포모도로타이머(6)
-
POMOTODO : jQuery (ajax, sortable)
POMOTODO를 만들면서 작성한 코드를 복습하기 위해 작성하는 글입니다. POMOTODO.kr What is POMOTODO? POMOTODO에서 사용한 jQuery - ajax - sortable - ajax (asynchronous javascript and xml) AJAX는 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술이다. 꼭 xml뿐 아니라 json도 사용할 수 있다 이 기술을 통해 서버 뿐 아니라 사용자도 시간,돈,자원을 절약할 수 있고, 싱글 웹페이지를 구성할 수 있다 1. ejs파일에 jquery를 첨부한다(cdn형식) 2. 자바스크립트에 작성할 요청코드 //기본형태 //$.ajax({ // method : '서버로 전송하는 데이터의 ..
2022.01.06 -
POMOTODO : 암호화
POMOTODO를 만들면서 작성한 코드를 복습하기 위해 작성하는 글입니다. POMOTODO.kr What is POMOTODO? 사용자의 정보를 받을 때 비밀번호를 직접 받으면 보안에 굉장히 취약하다는 문제가 있다 그래서 입력받은 비밀번호를 해쉬값으로 변경해서 서버에 저장해야한다 해쉬? : 입력값을 일정한 로직에 따라 사람이 알 수 없는 문자로 변환해줌 내생각 : - hash를 사전에 검색하면 나오는 정의 1.'#'이라는 기호 2. '고기와 감자를 잘게 다져 섞어 요리하여 따뜻하게 차려 낸 것' 이라는 요리법 - 해시함수에 대한 정의 1. '하나의 주어진 출력에 대하여 이 출력으로 사상시키는 하나의 입력을 찾는 것이 계산적으로 불가능하고....,' 즉, 요리에 빗대서 쉽게 생각해보면 고기와 감자를 잘게다..
2022.01.05 -
POMOTODO : session, passport, serialize, deserialize
POMOTODO를 만들면서 작성한 코드를 복습하기 위해 작성하는 글입니다. POMOTODO.kr What is POMOTODO? Node.js의 라이브러리인 Express에서 Session을 이용해 인증을 구현하도록 한다 쿠키의 등장으로 이전에 통신했던 내역을 기억할 수 있게 되었다 하지만 쿠키가 유출될 수 있고 조작될 수 있기때문에 인증을 구현하는것은 매우 위험하다 세션을 적용해서 인증하도록 해서 쿠키를 암호화 할 수 있다. 세션은 각각의 사용자를 식별하기 위한 식별자로서만 기능하는것이고 이것에 대한 실제 데이터는 서버에 저장해서 안전하게, 훨씬 더 많은 정보를 저장할 수 있다 직접 구현하는것이 가능하지만 복잡하고 어렵기 때문에 Express의 도움을 받아서 쉽게 구현한다. -생활코딩- 1. 터미널을 ..
2022.01.05 -
POMOTODO : ejs템플릿 include 하기
POMOTODO를 만들면서 작성한 코드를 복습하기 위해 작성하는 글입니다. POMOTODO.kr What is POMOTODO? 여러 페이지에서 공통으로 사용하는 상단 네비게이션바의 코드를 여러 파일에서 동일하게 사용하고 있는 걸 인지했고, 수정하기 위해 공부했다 간편하게 공통되는 중복코드들을 하나의 외부 파일로 만들고 ejs템플릿으로 include 하기로 했다 header.ejs Icons made by Freepik from www.flaticon.com Icons made by th studio from www.flaticon.com Please login, if you want to save your data. 데이터를 저장하려면 로그인 해주세요. POMOTODO Hello! Hello ! Log..
2022.01.05 -
POMOTODO : 회원가입 유효성검사 및 예외처리
POMOTODO를 만들면서 작성한 코드를 복습하기위해 작성하는 글입니다. POMOTODO.kr What is POMOTODO? 1-1. signup.ejs 값을 받아서 signup버튼을 누르면 /signupResult로 post요청 1-2. signup.js - id는 서버와 통신해야하기 때문에 /signup-id-check ajax요청을 통해 유효성체크를 한다 - 나머지 값들은 단순 양식에 맞는지만 확인해서 아래에 시각화 해준다 2. server.js 요청에 따라 응답코드를 전송해준다 - /signupResult app.post('/signupResult',function(req, res){ db.collection('users').findOne({id: req.body.loginId}, functio..
2022.01.05 -
PoMoToDo - 포모도로 타이머 + 투 두 리스트
PoMoToDo 기획서 기능설명 & 자료 현재 나에게 가장 필요한 서비스가 무엇인가? 공부를 좀 더 효율적으로 하기 위해 매시간 체크하는 pomodoro타이머, 명확한 목표를 설정하기 위한 TodoList, 나의 안좋은 습관을 체크하고 고치기 위한 Not TodoList, 공부하는데 도움이 되는 음악이나 소리들 이 네가지를 한 화면에서 관리 할 수 있는 프로그램을 만들고 싶었음. 매일 직접 사용하고 있는 프로그램들이기에 사용자의 시선에서 좀 더 냉정하게 평가할 수 있고, 공부했던 내역이 남는다면 많은 도움이 될 것이라고 판단했음. 구현 예정 기능 (Main Page) PomodoroTimer - 누르면 시작, 한번 더 누르면 일시정지 - 설정버튼을 통해 아래와 같은 기능 구현 1. 강제종료하기 2. 작업..
2021.09.05