2024-11-21

내일배움캠프 Node.js 트랙 19일차

1. ZEP에서 이루어진 노드 숙련주차 스터디

쿠키와 세션: 정의와 Node.js에서의 구현 방법

1. 쿠키와 세션의 정의

쿠키(Cookie)
클라이언트의 웹 브라우저에 저장되는 작은 데이터 조각이다. 서버는 클라이언트가 특정 페이지를 방문할 때 쿠키를 생성하고, 이후 요청마다 클라이언트는 쿠키를 포함하여 서버로 전달한다. 이를 통해 서버는 클라이언트를 식별하거나 상태를 유지할 수 있다.

쿠키는 주로 아래와 같은 목적으로 사용된다:

• 사용자 인증 상태 유지
• 사용자 맞춤 설정 저장 (예: 테마, 언어 설정)
• 세션 관리

세션(Session)
서버 측에서 사용자와의 상호작용 상태를 저장하기 위한 기술이다. 세션은 보통 고유한 식별자인 세션 ID를 생성하고, 이를 클라이언트의 쿠키에 저장하여 관리한다. 서버는 세션 ID를 통해 각 사용자의 상태를 추적할 수 있다.

세션의 주요 특징은 다음과 같다:

• 서버에 데이터가 저장되므로 클라이언트가 데이터를 조작할 수 없다.
• 주로 보안이 중요한 정보나 사용자 인증 정보를 관리하는 데 사용된다.

2. Node.js에서 쿠키와 세션 구현하기

Node.js에서는 쿠키와 세션을 구현하기 위해 주로 cookie-parser와 같은 미들웨어를 사용한다. 아래는 이를 활용한 구현 방법이다.

(1) 쿠키 설정 및 사용하기 (cookie-parser 활용)

cookie-parser는 Express 애플리케이션에서 쿠키를 쉽게 처리할 수 있도록 도와주는 미들웨어다.

npm install cookie-parser

설치 후 다음과 같이 사용할 수 있다:

import express from 'express';
import cookieParser from 'cookie-parser';

const app = express();
app.use(cookieParser());

// express.js에서는 'res.cookie(name, value, [options])'메서드를 지원한다. 
// 이를 이용하여 쿠키를 할당하는 API를 작성할 수 있다.
app.get("/set-cookie", (req, res) => {
  let expires = new Date();
  expires.setMinutes(expires.getMinutes() + 60); // 만료 시간을 60분으로 설정한다.
  res.cookie('name', 'sparta', { 
  // name이란 이름을 가진 sparta라는 문자열을 쿠키 헤더에 담아 응답한다.
    expires: expires
  });
  return res.end();
});

// 'req.cookies'를 이용하여 클라이언트의 모든 쿠키를 조회하는 API 
app.get('/get-cookie', (req, res) => { 
    // 원래는 req.headers.cookie에서 쿠키를 조회할 수 있지만, cookie-parser를 통해 간소화시킬 수 있다.
    const cookies = req.cookies;     
    console.log(cookies); 
    return res.status(200).json({ cookie: cookies }); 
});

app.listen(3000, () => console.log('서버가 실행 중입니다.'));

(2) 세션 설정 및 사용하기 (cookie-parser 활용)

구현 예시는 다음과 같다:

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 }; 
  // uniqueInt라는 key를 생성하고 value에는 {name: sparta}를 할당
  // 만약 uniqueInt의 값이 1690212738213이라면, 
  // session = { 1690212738213: { name: 'sparta' } };

  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, '포트로 서버가 열렸어요!');
});

3. 세션을 통해 사용자에게 응답할 때 쿠키를 활용하는 이유

1) 상태 지속성

서버는 클라이언트가 상태를 지속적으로 유지할 수 있도록 쿠키에 세션 ID나 기타 상태 정보를 저장하여 응답한다.

• 클라이언트는 이를 통해 서버와의 연결 상태를 유지하며, 재인증 없이 연속적인 상호작용이 가능하다.
• 예: 로그인 후 서버는 세션 ID를 쿠키로 전달하며, 이후 요청마다 이를 통해 사용자를 식별한다.

2) 자동 전송

쿠키는 브라우저가 요청마다 자동으로 서버에 전송하므로, 클라이언트-서버 간 상태 동기화가 간편하다.

• 클라이언트가 쿠키를 수동으로 처리하지 않아도 되며, 서버는 클라이언트로부터 쿠키를 받아 세션을 관리할 수 있다.

3) 개발 편의성

쿠키는 HTTP 표준으로 브라우저에서 기본 지원되므로, 별도의 클라이언트 설정 없이도 상태 관리를 쉽게 구현할 수 있다.

• 서버에서 한 번 쿠키를 설정하면 이후 요청마다 이를 자동으로 활용할 수 있다.

4) 범용성

쿠키는 모든 브라우저와 서버 환경에서 동작하므로, 사용자 인증이나 상태 유지와 같은 기능에서 표준화된 도구로 사용된다.