🎯 JWT 기반으로 인증, 인가하는 개념을 정리하고, 코드에 반영합니다.

📙 Today I Learned

🔑 인증 vs 인가

인증 (Authentication)

• 사용자가 사이트에 가입된 사용자임을 증명하는 과정입니다.

  • 예 : 로그인

인가 (Authorization)

• 인증된 사용자가 특정 페이지나 기능에 접근할 권한이 있는지 확인하는 과정입니다.

  • 예: 관리자 페이지와 일반 사용자 페이지 구분

---

🍪 쿠키 (Cookie)

브라우저가 서버에서 받은 작은 데이터 조각(key-value)을 저장해두고, 이후 같은 서버에 요청할 때 자동으로 다시 보내줍니다.

동작 방식

1. 로그인 → 서버가 쿠키 생성 (예: userId=123)

2. 서버가 쿠키를 브라우저에 전송 (Set-Cookie)

3. 브라우저는 쿠키를 저장하고 이후 요청마다 쿠키 자동 전송

4. 서버는 쿠키 값을 읽어서 유저 식별 or 설정값 확인

특징

• 브라우저에 저장됨 (Client-side)

• 기본적으로 요청마다 자동 전송됨 → 보안 주의 필요

• 용량 제한 있음 (도메인당 4KB까지)

웹 페이지의 F12를 눌러 개발자 도구 창 > Application > Cookies 에서 쿠키를 확인할 수 있습니다.

Expires 탭에서 Session이라고 적혀있는 쿠키는 세션 쿠키를 뜻합니다.

---

🔐 세션 (Session)

쿠키의 보안 문제를 보완하기 위해 등장한 방식으로 서버가 사용자 정보를 서버 메모리/DB에 저장하고, 브라우저에는 단순히 세션ID(Session ID)만 쿠키로 발급하는 방식입니다.

동작 방식

1. 사용자가 로그인하면 서버가 특정 정보를 저장하는 세션을 생성합니다.

2. 세션 ID를 쿠키로 사용자에게 전달합니다.

3. 이후 사용자는 요청 시 세션 ID를 포함하여 서버와 통신합니다.

특징

• 비교적 보안이 뛰어납니다. (쿠키보다 안전)

• 서버에서 유저 상태를 기억(Stateful) → 서버에 저장소 필요

---

🚀 JWT (JSON Web Token)

JWT는 JSON 형식의 데이터를 안전하게 전송하는 토큰으로, 인증과 인가에 자주 사용됩니다.

동작 방식

1. 클라이언트가 서버에 로그인 요청을 보냅니다.

2. 서버가 사용자의 로그인 정보를 확인합니다.

3. 서버가 로그인 정보가 유효하면 JWT를 생성하여 클라이언트에 전달합니다.

4. 클라이언트가 받은 JWT를 저장한 이후 서버에 요청을 보낼 때 JWT를 포함하여 전송합니다.

5. 서버는 받은 JWT의 유효성을 검증한 후 요청을 처리하고 응답합니다.

 [🖥️클라이언트]                       [🏢서버]
   |                                 |
1️⃣ 로그인 요청 -------------------> 2️⃣ 로그인 정보 확인
   |                                 |
   | <---------------------------- 3️⃣ JWT 발급 및 전달
   |                                 |
4️⃣ 요청 시 JWT 포함 ---------------> 5️⃣ 서버에서 JWT 검증 및 응답
   |
(🔐 인증된 상태 유지)

특징

• 변조를 감지할 수 있어 보안성이 뛰어납니다.

• 서버가 별도로 정보를 저장하지 않아도 되므로 Stateless한 구조입니다.

• 별도의 토큰 발급 서버를 운영할 수 있습니다.

---

🏗 JWT 구조

JWT는 헤더(Header), 페이로드(Payload), 서명(Signature)으로 구성됩니다.

각 부분은 .으로 구분되며, 다음과 같은 형식입니다.

인코딩 값

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30

👉 jwt.io 에서 JWT 구조를 확인할 수 있습니다.

헤더(Header)

JWT의 타입과 암호화 알고리즘 정보를 포함합니다.

{   
  "alg": "HS256",   
  "typ": "JWT" 
}

• alg : 사용된 해싱 알고리즘

• typ : 토큰 타입

페이로드(Payload)

사용자 정보 및 클레임(권한 등)이 포함됩니다.

{   
  "sub": "1234567890",   
  "name": "John Doe",   
  "admin": true,   
  "iat": 1516239022 
}

• sub : 사용자 ID

• name : 사용자 이름

• admin : 관리자 여부

• iat(Issued At) : 토큰 발행 시간을 나타냅니다.

서명(Signature)

JWT 변조 방지를 위한 서명(Signature) 정보입니다.

a-string-secret-at-least-256-bits-long

---

실습: JWT 로그인 구현

라이브러리 설치

$ npm install jsonwebtoken dotenv cookie-parser

로그인 API 코드

const express = require('express');
const router = express.Router();
const conn = require('../mariadb');
const { body, validationResult } = require('express-validator');
const jwt = require('jsonwebtoken');
const dotenv = require('dotenv');
dotenv.config();

router.use(express.json());

const validate = (req, res, next) => {
  const err = validationResult(req);

  if (err.isEmpty()) {
    return next();
  } else {
    return res.status(400).json(err.array());
  }
};

router.post(
  '/login',
  [
    body('email').notEmpty().isEmail().withMessage('이메일 입력 필요'),
    body('password').notEmpty().isString().withMessage('비밀번호 입력 필요'),
    validate,
  ],
  (req, res) => {
    const { email, password } = req.body;

    const sql = 'SELECT * FROM users WHERE email =?';
    conn.query(sql, email, (err, results) => {
      if (err) {
        return res.status(400).end();
      }

      let loginUser = results[0];

      if (loginUser && loginUser.password === password) {
        const token = jwt.sign(
          {
            email: loginUser.email,
            name: loginUser.name,
          },
          process.env.PRIVATE_KEY,
          {
            expiresIn: '30m',
            issuer: 'chickenmandu',
          }
        );

        res.cookie('token', token, { httpOnly: true });

        res.status(200).json({ message: `${loginUser.name}님 환영합니다.` });
      } else {
        res.status(403).json({
          message: '이메일 또는 비밀번호가 틀렸습니다.',
        });
      }
    });
  }
);

• loginUser가 존재하고 입력한 비밀번호가 DB의 비밀번호와 일치하면 로그인 성공하게 되어 jwt.sign()을 사용해 JWT 발급합니다.

  • email, name : 토큰에 포함할 사용자 정보입니다.

  • process.env.PRIVATE_KEY : .env 파일에 저장된 비밀키로 서명합니다.

  • expiresIn: '30m' : 토큰 만료 시간을 30분으로 설정합니다.

  • issuer: 'chickenmandu' : 토큰 발급자를 설정합니다.

• res.cookie('token', token, { httpOnly: true }) : HTTP 전용 쿠키로 JWT 저장합니다.

🚀 Postman Cookie 결과

• Name : 서버에서 token이라는 이름의 쿠키를 설정

• Value : JWT(토큰) 값이 설정되어 있음

• Domain : 로컬 환경에서 쿠키가 설정됨

• Path: 모든 경로에서 이 쿠키를 사용할 수 있음

• Expires : 만료가 세션 쿠키로 설정됨 (브라우저를 닫으면 삭제됨)

• HTTPOnly : 브라우저의 JavaScript로 접근 불가능 → XSS 공격 방지

• Secure : HTTPS 환경에서만 쿠키 전송 가능 → 네트워크 스니핑 방지

🤔왜 JWT를 쿠키🍪에 담는 걸까?

JWT를 저장할 수 있는 방법(localStorage, sessionStorage, Cookie)은 여러가지지만, 쿠키를 사용하는 이유는 보안과 편의성 때문입니다.

• XSS 공격 방어 (HttpOnly 속성)
• 자동 인증 관리 (요청 시 자동으로 포함됨)
• 보안 강화 가능
• 브라우저 기본 기능 활용 가능

---

쿠키 vs 세션 vs JWT 비교

구분	쿠키 (Cookie)	세션 (Session)	JWT (Json Web Token)
저장 위치	브라우저 (Client)	서버(세션 저장소) + 브라우저(세션ID)	브라우저(LocalStorage, SessionStorage, Cookie 등)
서버 상태 유지 여부	❌ Stateless	✅ Stateful	❌ Stateless
인증 방식	쿠키 자체에 데이터 저장	세션ID만 쿠키에 저장 → 서버에서 유저 상태 조회	토큰 자체에 유저 정보 포함 → 서버는 검증만
확장성(Scale)	높음	낮음 (세션 클러스터링 필요)	매우 높음 (분산 서버 환경에 유리)
보안 위험	쿠키 탈취(XSS)	세션ID 탈취 (CSRF)	토큰 유출 시 위험 (Payload 안의 정보 노출 가능)
만료 관리	쿠키 만료일 설정	서버에서 세션 만료 처리	토큰 만료 시간(exp) 설정 + Refresh Token 사용
장점	간단하고 빠름	유저 상태 관리 용이	서버 확장에 유리, 상태 저장 불필요
단점	보안에 취약	서버 자원 사용 많음	토큰 탈취 시 위험, 토큰 길이가 길어짐

---

✏️ 한 줄 회고

인증과 인가에 대한 차이를 정리하고, JWT를 활용한 로그인 구현과 보안 요소까지 고려한 코드를 짜면서, 보안에 대해 더 공부해야겠다고 생각했습니다.