쿠키(Cookie)와 세션(Session)

1. 쿠키와 세션

• 1) 쿠키와 세션이란?
  🍪 쿠키(Cookie): 브라우저가 서버로부터 응답으로 Set-Cookie 헤더를 받은 경우 해당 데이터를 저장한 뒤 모든 요청에 포함하여 보냅니다.

  - 쿠키는 사용자가 `naver.com`과 같은 웹 사이트를 방문할 때마다 이전에 방문했던 정보를 기억하는 데이터 파일입니다.
  - 데이터를 여러 사이트에 공유할 수 있기 때문에 보안에 취약할 수 있습니다.
  - 쿠키는 `userId=user-1321;userName=sparta` 와 같이 문자열 형식으로 존재하며 쿠키 간에는 세미콜론`(;)` 으로 구분됩니다.
  🔒 **세션(Session):** 쿠키를 기반으로 구성된 기술입니다. 단, 클라이언트가 마음대로 데이터를 확인 할 수 있던 쿠키와는 다르게 세션은 데이터를 **서버**에만 저장합니다.
  
  - 세션은 일반적으로 세션 Id를 쿠키를 이용해 클라이언트에게 전달하여, 서버는 이 세션 Id를 사용해 저장된 세션 데이터를 조회합니다.
  - 세션을 통해 사용자의 상태 정보를 서버에 저장하면, 서버는 사용자의 상태를 추적할 수 있게 됩니다.
  - 보안성은 좋으나, 반대로 사용자가 많은 경우 서버에 저장해야 할 데이터가 많아져서 서버 컴퓨터가 감당하지 못하는 문제가 생기기 쉽습니다.
  - 쿠키와 마찬가지로 세션 역시 만료 기간이 있습니다.

  2) 쿠키(Cookie) 만들어보기
  서버가 클라이언트의 HTTP 요청(Request)을 수신할 때, 서버는 응답(Response)과 함께 Set-Cookie 라는 헤더를 함께 전송할 수 있습니다. 그 후 쿠키는 해당 서버에 의해 만들어진 응답(Response)과 함께 Cookie HTTP 헤더안에 포함되어 전달받습니다
  쿠키-세션 템플릿, app.js
  // app.js

import express from 'express';

const app = express();
const PORT = 5001;

app.use(express.json());

app.listen(PORT, () => {
console.log(PORT, '포트로 서버가 열렸어요!');
});
Set-Cookie 를 이용하여 쿠키 할당하기
// 'Set-Cookie'를 이용하여 쿠키를 할당하는 API
app.get("/set-cookie", (req, res) => {
let expire = new Date();
expire.setMinutes(expire.getMinutes() + 60); // 만료 시간을 60분으로 설정합니다.

res.writeHead(200, {
'Set-Cookie': name=sparta; Expires=${expire.toGMTString()}; HttpOnly; Path=/,
});
return res.end();
});
res.cookie()를 이용하여 쿠키 할당하기
// 'res.cookie()'를 이용하여 쿠키를 할당하는 API
app.get("/set-cookie", (req, res) => {
let expires = new Date();
expires.setMinutes(expires.getMinutes() + 60); // 만료 시간을 60분으로 설정합니다.

res.cookie('name', 'sparta', {
expires: expires
});
return res.end();
});

• 3) req를 이용하여 쿠키 접근하기

  👉 **클라이언트**는 **서버**에 **요청(Request)**을 보낼 때 **자신이 보유하고 있는 쿠키**를 **자동으로** **서버**에 전달하게 됩니다. 여기서 **클라이언트**가 전달하는 쿠키 정보는 **Request header**에 포함되어 서버에 전달되게 됩니다.

  req.headers.cookie를 이용하여 쿠키 조회하기
  // 'req.headers.cookie'를 이용하여 클라이언트의 모든 쿠키를 조회하는 API
  app.get('/get-cookie', (req, res) => {
  const cookie = req.headers.cookie;
  console.log(cookie); // name=sparta
  return res.status(200).json({ cookie });
  });
  4) cookie-parser 미들웨어 적용하기
  cookie-parser 등록하기, app.js
  import cookieParser from 'cookie-parser';

app.use(cookieParser());

// 'req.cookies'를 이용하여 클라이언트의 모든 쿠키를 조회하는 API
app.get('/get-cookie', (req, res) => {
const cookies = req.cookies;
console.log(cookies);
return res.status(200).json({ cookie: cookies });
});
5) 세션(Session) 만들어보기
/set-session API 만들기
let session = {};
app.get('/set-session', function (req, res, next) {
// 현재는 sparta라는 이름으로 저장하지만, 나중에는 복잡한 사용자의 정보로 변경될 수 있습니다.
const name = 'sparta';
const uniqueInt = Date.now();
// 세션에 사용자의 시간 정보 저장
session[uniqueInt] = { name };

res.cookie('sessionKey', uniqueInt);
return res.status(200).end();
});
/get-session API 만들기
app.get('/get-session', function (req, res, next) {
const { sessionKey } = req.cookies;
// 클라이언트의 쿠키에 저장된 세션키로 서버의 세션 정보를 조회합니다.
const name = session[sessionKey];
return res.status(200).json({ name });
});
세션 API 전체 코드, app.js
import express from 'express';
import cookieParser from 'cookie-parser';

const app = express();
const PORT = 5001;

app.use(express.json());
app.use(cookieParser());

// 'req.cookies'를 이용하여 클라이언트의 모든 쿠키를 조회하는 API
app.get('/get-cookie', (req, res) => {
const cookies = req.cookies;
console.log(cookies);
return res.status(200).json({ cookie: cookies });
});

let session = {};
app.get('/set-session', function (req, res, next) {
// 현재는 sparta라는 이름으로 저장하지만, 나중에는 복잡한 사용자의 정보로 변경될 수 있습니다.
const name = 'sparta';
const uniqueInt = Date.now();
// 세션에 사용자의 시간 정보 저장
session[uniqueInt] = { name };

res.cookie('sessionKey', uniqueInt);
return res.status(200).end();
});

app.get('/get-session', function (req, res, next) {
const { sessionKey } = req.cookies;
// 클라이언트의 쿠키에 저장된 세션키로 서버의 세션 정보를 조회합니다.
const name = session[sessionKey];
return res.status(200).json({ name });
});

app.listen(PORT, () => {
console.log(PORT, '포트로 서버가 열렸어요!');
});