Cookie란?

1. HTTP 쿠키는 ****서버가 사용자의 웹 브라우저에 전송하여 저장하는 작은 데이터 저장소
2. JS의 객체처럼 key 값과, data 가 들어 있다.
3. 브라우저는 쿠키로 데이터를 저장해 두었다가, 동일한 서버에 다시 요청을 보내게 될 때 쿠키에 저장된 정보를 함께 전송한다.
4. 따라서, 서버에서는 쿠키를 통해 요청이 어떤 브라우저에 들어왔는지(혹은 요청이 동일한 브라우저에서 들어왔는지) 등을 파악할 수 있다.
5. 서버에 저장 해야할 정보를 관리 > 로그인 정보, 장바구니, 팝업 하루 동안 안보기 등
6. 중요한 정보는 아무래도 로컬에 남게 되므로 절대 저장해서는 안됨
7. 중요 정보로는 이름, 데이터, 만료일, 경로 등이 저장 된다.

Cookie의 동작 방식

1. 클라이언트가 페이지를 요청
2. 서버에서 쿠키를 생성
3. HTTP HEADER에 쿠키를 포함 시켜 응답
4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
5. 같은 요청을 할 경우 HTTP HEADER에 쿠키를 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트하여 변경된 쿠키를 HTTP HEADER에 포함시켜 응답

document.cookie = "user=test; expires=15 sep 2022 13:00:00 GMT; path=/";

프론트단에서는 위와 같이 간단하게 쿠키를 문서에 저장해 사용할 수도 있다.

EXPRESS에서 COOKIE 사용하기

• 백엔드에서는 cookie-parser 라는 모듈을 사용함
• 설치 코드 :

npm i cookie-parser -s

• 메인 서버에 쿠키 모듈 호출 및 미들 웨어 등록!

const cookieParser = require('cookie-parser');
app.use(cookieParser());

• 이제 쿠키를 사용할 곳에서 res.cookie(‘쿠키 이름‘, ‘데이터’, ‘옵션 객체‘); 를 써서 사용하면 된다.

res.cookie('alert', true, {
    expires: new Date(Date.now() + 1000 * 60),
    httpOnly: true,
});

• 옵션의 의미
  • Expires: 쿠키가 자동으로 삭제되는 일자를 지정
  • httpOnly: 해당 쿠키는 서버와의 http 통신에서만 읽을 수 있음을 표시, 프론트에서 처럼 JS로 해당 쿠키를 읽으려 하면 웹브라우저가 이를 차단

실제로 쿠키가 잘 작동하는지 확인하기

• Index.ejs 에서 cookie가 서버에서 잘 전송 되었는지 확인해 봅시다!
• 만약에 프론트에서 쿠키를 발행하는 코드가 있다면 주석 처리 + 기존에 발행 된 쿠키도 삭제 처리

<script>
	window.onload= ( ) => {
	      if(document.cookie) alert(`Do you fancy piece of ${document.cookie} cookies?`);
	    }
</script>

: 위와 같은 코드를 뷰 템플릿 파일의 Header와 Body 사이에 해당 코드를 입력하고 서버를 실행 후, 페이지로 들어가게 되면 alert 창이 뜸과 동시에 Cookie가 저장된 것을 확인할 수 있다.