기본 코드 작성 ( app.js, cookie_router.js, cookie_controller.js, cookie01.ejs )
서버 실행 확인
쿠키와 세션을 사용하는 이유 : HTTP 통신은 비연결성 통신( 연결 시도 후 연결이 되면 끊기는 형식 - 예를 들어 클라이언트가 request 를 서버로 전송한 뒤 연결을 끊음, 그럼 서버는 클라이언트에게 response 를 보낸 후 연결을 끊음.... 그렇기 때문에 로그인 정보와 같은 것을 쿠키와 세션에 보관해서 인증한다 )
쿠키 : 클라이언트가 관리 ( 보안에 좋지 않기 때문에 쿠키는 로그인에는 잘 사용하지 않는다 )
세션 : 서버가 관리
app01.js 파일에 cookie-parser 모듈을 불러온다
app 에서 동작하는 cookieParser 라는 값을 app 에서 사용할 수 있게끔 middle ware 로 위임
cookie_ctrl.js 에서 response 에 cookie 를 추가 이때 res.cookie("쿠키 키","쿠키 값"); 으로 표현한다
다시 웹에 접속해 개발자 모드(F12)에서 Application 탭에 들어가서 쿠키 탭을 확인하면 쿠키가 정상적으로 받아지는 것을 확인할 수 있다
쿠키 설정 값을 변수화하여 쿠키의 속성 값을 적용한다
쿠키가 5초뒤에 삭제됨
전달 받은 쿠키의 값이 제대로 출력되는지 cookie01.ejs 파일에 전달하여 출력해보기
쿠키 관리를 위해 팝업을 띄우기
쿠키를 생성하여 5초동안 팝업이 뜨지 않게 하기
localhost:3000/cookie02 로 접속하면 창 띄우기
쿠키 정보가 담긴 userCookie 변수를 cookie02.ejs 를 실행할때 전송하기
cookie02.ejs 에서는 쿠키가 존재하지 않는다면 팝업창을 띄우기.... popup02 를 띄우게 라우터와 컨트롤러에 다시 설정하러 가야함
popup02 경로를 설정
popup02.ejs 파일에서 하루동안 열지 않음!!! 텍스트나 체크박스를 클릭하면 makeCookie 함수가 실행되며 이 함수에는 /cookie/makeCookie 경로로 이동시키는 기능과 창을 닫는 기능을 스크립트로 생성해놓는다
makeCookie 가 실행되면 쿠키를 적용해주고 창을 닫는다
코드 실행 시 쿠키를 가지고 있는 5초 동안은 새로고침을 해도 팝업창이 출력되지 않는 모습
쿠키를 암호화 하기, 쿠키를 config.js 파일로 분리하기
기존에 있던 cookieConfig 를 config.js 파일을 따로 생성하여 분리하면서 signed : true 옵션을 사용하여 암호화 시킨다
signed : true => 쿠키 암호화 ( 암호화 키 값은 cookieParser 를 미들웨어로 등록할때 괄호 안에 키 값을 입력해준다 )
이후에 cookieConfig 를 require 하여 불러온 뒤 사용한다, 또한 쿠키를 가져올땐 req.signedCookies.쿠키이름 을 사용하여 쿠키를 가져온다... 기존에는 req.cookies.쿠키이름 이었지만 signedCookies 로 암호화된 쿠키를 가져옴을 명시한다
장바구니 만들기
더미로 장바구니 DB 생성
라우터에 경로 추가
컨트롤러에 cart 경로와 서비스 추가
cookie_service 에 더미 DB 반환 코드 추가 및 export
전달 받은 더미 데이터 forEach 문으로 나열하기
상품 목록에 상품 아이디로 링크를 걸기 링크 클릭하면 /cookie/save 로 넘어가야 하기 때문에 경로를 라우터와 컨트롤러에 추가
/save/:goods 에서 경로 뒤에 :goods 는 콜론 뒤에 /save/ 경로 뒤에 오는 내용을 goods 라는 변수로 저장한다는 뜻
goods 라는 변수로 넘겨받은 /save/ 뒤의 경로 정보를 params 를 사용하여 변수로 저장한 뒤 alert 창을 출력하고 다시 /cookie/cart 경로로 돌려보낸다
코드 실행
쿠키 정보가 있는지 없는지 확인 후 변수에 쿠키에 저장될 변수를 생성 및 데이터 추가
cookie_service 에서 전달받은 cart_list 에 쿠기를 저장한 뒤 cart_list 를 다시 반환
저장 목록 확인을 눌렀을때 이동되는 view_list 경로를 라우터에 설정controller 에도 설정하여 만약 cart_list 라는 쿠키를 사용자가 가지고 있지 않다면 alert 창을 띄운 후 다시 /cookie/cart 로 보내고 사용자가 cart_list 쿠키를 가지고 있다면 views_list.ejs 에 cart_list 쿠키를 값으로, list 를 키로 설정하여 전달
view_list.ejs 파일 생성하여 해당 내용을 출력하게 설정
코드 실행 영상 ( 쿠키는 현재 5초 뒤 삭제되게끔 설정되어 있으므로 5초가 경과되면 자동으로 저장 목록이 삭제된다 )
