Cookie
- 웹 브라우저 (클라이언트) 에 저장되는 키와 값이 들어있는 작은 데이터 파일
- 이름, 값, 만료일, 경로 정보로 구성됨
cookie 동작 방식
- 클라이언트가 페이지 요청
- 서버에서 쿠키 생성 - res.cookie( )
- HTTP 헤더에 쿠키를 포함시켜 응답
- 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
- 같은 요청을 할 경우, HTTP 헤더에 쿠키를 함께 보냄 - req.cookies
- 서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때, 쿠키를 업데이트하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답
💥 요즘은 쿠키보다는 로컬 스토리지를 많이 사용하는 추세
프론트에서 빨리 처리해야 할 것은 백엔드로 넘기지 않고 프론트에서 로컬 스토리지에 저장했다가 처리 (쿠키는 백엔드에서 생성해야 함)
cookie 설치 & 사용
npm i cookie-parser// app.js
const cookieParser = require("cookie-parser");
app.use(cookieParser());
// controller
res.cookie("쿠키 이름", "쿠키 값", "옵션 객체");
req.cookies;cookie 옵션 객체
- httpOnly : 웹 서버를 통해서만 쿠키에 접근 가능
- 자바스크렙트에서 document.cookie를 이용하여 쿠키에 접속하는 것을 차단
- maxAge : 쿠키 수명 (밀리초)
- expires : 만료 날짜를 GMT 시간으로 설정
- path : 해당 디렉토리와 하위 디렉토리에서만 경로가 활성화되고, 웹 브라우저는 해당하는 쿠키만 웹 서버에 전송 / 쿠키가 전송될 URL 지정 가능(기본값 : "/")
- domain : 쿠키가 전송될 도메인을 지정 가능(기본값 : 현재 도메인)
- secure : 웹 브라우저와 웹 서버가 https로 통신하는 경우에만 쿠키를 서버에 전송
- signed : 쿠키의 암호화 결정(req.signedCookies 객체에 들어있음)
Session
- 웹 서버에 저장되는 쿠키
- 사용자가 웹 브라우저를 통해 접속한 시간부터 연결을 끝내는 시점까지의 시간 동안 일련의 요구를 하나의 상태로 보고 그 상태를 유지시킴
session 동작 방식
- 클라이언트가 서버에 접속 시, 세션 ID를 발급 받음
- 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장
- 클라이언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 서버에 전달하여 사용
- 서버는 세션 ID를 전달받아서 별다른 작업 없이 세션 ID로 세션에 있는 클라이언트 정보 가져옴
- 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답
session 설치 & 사용
npm i express-session// app.js
const session = require("express-session");
app.use(session("옵션 객체"));
// controller
req.session.id = req.body.id;session 옵션 객체
- httpOnly : 값을 true로 하면 사용자가 자바스크립트를 통해서 세션을 사용할 수 없도록 함
- secure : 값을 true로 하면 https에서만 세션을 주고받음
- secret : 안전하게 쿠키를 전송하기 위한 쿠키 서명 값 (세션을 발급할 때 사용되는 키)
- resave : 세션에 수정 사항이 생기지 않더라도 매 요청 (req) 마다 세션을 다시 저장할 것인지 여부, 덮어쓰기 가능하게 하기 (false면 덮어쓰기 하지 않음, default : true)
- saveUninitialized : 세션 데이터가 초기화되지 않은 상태에서도 세션을 저장할 것인지 여부
- 초기화되지 않는 세션 데이터 : 세션을 시작한 후 데이터를 저장하지 않는 상태
Cookie vs Session
- 전체적인 역할과 동작 원리는 비슷 (세션 = 서버 쿠키)
- 쿠키 - 로컬 & 세션 - 서버
- 보안 : 쿠키 < 세션
- 속도 : 쿠키 > 세션
