낫투두리스트(10)
-
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(11)
진행상황은 깃허브에 매일매일 기록하고 있습니다. https://github.com/coqoa/PoMoToDo- 2021.12.20~ 2021.12.28 1. 해결한 문제점들 - 모바일 환경에서 출력 안되던 문자 교체 : 회원가입 유효성 체크할 때 모바일 환경에서 문자가 이상하게 출력되던 문제가 발생 -> 맥북 특수문자여서 모바일화면에서는 안보였었음, 교체를 통해 해결 - 전체컬러변경 : 출력기기마다 컬러가 다르게 출력되는데 모바일에서는 파랑과 초록이 돋보여서 물빠진 청바지색으로 출력되는 문제 -> 컬러변경해서 해결 - 반응형 디자인 수정 : 모바일 / 태블릿 / 컴퓨터로 나눠서 반응형디자인 수정 2. 수정한 코드 - css에서 각 요소마다 컬러를 넣었는데 컬러변수화를 통해 유지보수가 쉽도록 변경 - 모달..
2021.12.28