[포스코x코딩온] 웹 풀스택 과정 7주차 회고 | Cookie와 Session

 

쿠키 (Cookie)

• 키와 값이 들어있는 작은 데이터 파일로, 웹 브라우저에 저장된다.
• 구성: 이름, 값, 만료일, 경로

🚩 쿠키의 동작방식

1) 클라이언트가 페이지를 요청
2) 서버에서 쿠키 생성 후, HTTP 헤더에 쿠키를 포함하여 응답
3) 쿠키 만료 기간동안 클라이언트에서 쿠키 보관 (브라우저 종료해도 보관됨)
4) 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄.
5) 서버에서 쿠키를 읽어 이전 상태 정보를 변경해야 하는 경우, 업데이트 한 쿠키를 HTTP 헤더에 포함시켜 응답.

🚩 쿠키 사용

1) cookie-parser 설치

npm install cookie-parser

2) cookie-parser 불러오기 & 쿠키 생성

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

// 쿠키 생성
res.cookie('쿠키이름', '쿠키값', '옵션객체');
// 쿠키 삭제
res.clearCookie('쿠키이름', '쿠키값', '옵션객체');

🚩 쿠키 옵션

미리 옵션 객체 선언해두어, 쿠키 생성 시 해당 옵션을 불러올 수 있다.

• httpOnly: (true인 경우) 웹 서버를 통해서만 쿠키에 접근 가능 (이렇게 하면, JS에서 document.cookie를 이용하여 쿠키에 접속하는 것을 차단한다!)
• maxAge: 쿠키의 수명 설정 (밀리초)
• expires: 만료 날짜를 GMT 시간으로 설정
• path: 해당 디렉토리와 하위 디렉토리에서만 경로가 활성화되고, 웹 브라우저는 해당하는 쿠키만 웹 서버에 전송한다. (쿠키가 전송될 url 특정 가능. 기본값은 '/')
• domain: 쿠키가 전송될 도메인을 특정할 수 있다. (기본값은 현재 도메인)
• secure: 웹브라우저와 웹서버가 https로 통신하는 경우에만, 쿠키를 서버에 전송한다.
• signed: (true인 경우) 쿠키를 암호화한다. 이때, 쿠키는 req.signedCookies 객체에 들어가 있다.

세션 (Session)

• 웹 서버에 저장되는 쿠키
• 사용자가 웹 브라우저를 통해 '접속한 시점'부터 '연결을 끝내는 시점'까지의 시간 동안 일련의 요구를 하나의 상태로 보고, 그 상태를 유지한다. (ex. 로그인 유지)

🚩 세션의 동작방식

1) 클라이언트가 서버에 접속 시, 세션 ID를 발급받음
2) 클라이언트는 세션 ID에 대해 쿠키를 저장하고 있음
3) 클라이언트는 서버에 요청 시, 해당 쿠키의 세션 ID를 서버에 전달함
4) 서버는 전달받은 세션 ID로, 세션에 있는 클라이언트 정보를 가져옴.
5) 클라이언트 정보를 가지고 서버 요청을 처리하여, 클라이언트에게 응답.

🚩 세션 사용

1) 세션 설치
npm install express-session
2) 세션 불러오기 & 옵션 설정

const session = require('express-session');
app.use(session('옵션객체'));

// req.session.key = value; 형태로 키, 값 추가
req.session.id = req.body.id;

🚩 세션 옵션

쿠키와 마찬가지로, 미리 세션 옵션을 선언해둔다.

• express-session으로 쿠키 옵션도 설정할 수 있다.
• secure: (true인 경우) https에서만 세션을 주고받을 수 있다.
• secret: 쿠키에 서명을 추가한다.
• resave: 요청이 왔을 때, 세션에 수정사항이 생기지 않더라도 세션을 다시 저장할지 설정한다. true인 경우 다시 저장. (false이면, 불필요한 session 저장을 막아줌)
• saveUninitialized: 세션에 저장할 내용이 없더라도, 처음부터 세션을 설정할지 결정한다. true인 경우 저장.
  ('uninitialized'란, 세션이 생성되었지만 어떠한 데이터도 추가되거나 변경되지 않은 상태를 뜻함)