3박 4일 미니프로젝트 2일차
오늘은 어제 구상한 미니프로젝트를 발표하고 피드백을 들었다.
피드백은 2명이 조라 그런지 다른 조들의 비해 빡센? 피드백은 없었지만 생각해볼만한 질문들을 던져주셨다.
- 내 학습 페이지에서 모든 문제를 보여줄 때 문제가 많아지면 화면을 어떻게 보여줄 것인지?
- 문제 검색기능이 있었으면 좋겠다.
질문들을 듣고 미쳐 생각하지 못한 부분을 짚어주셔서 서비스의 기능을 완성하고 시간이 남으면 만들기로 했다.
처음 구현은 깃허브 레포를 먼저 만들고, 로그인 페이지를 만들어 JWT토큰을 적용하기 위해 JWT 토큰에 대해 자세히 알아보기로 했다.
1. JWT 토큰이란?
JWT (JSON Web Token)은 웹에서 사용자 인증 및 정보 전달에 사용되는 JSON 기반의 토큰(Token)
"로그인 인증 결과"나 "사용자 정보를 안전하게 클라이언트에 전달"하기 위해 사용
- 인증(Authentication), 권한(Authorization)
- Stateless (서버가 세션을 저장하지 않음) 방식
- 자체 검증 가능 → 서버에서 DB 조회 없이 유효성 확인 가능
- 세션 기반 검증과 비교하여 서버에 리소스 사용이 낮음
2. JWT의 사용처
- 사용자가 로그인할 때, 서버가 인증 정보를 검증하고 JWT를 발급
- 이후 사용자는 이 토큰을 요청 헤더에 포함시켜 API 호출
- 서버는 토큰을 복호화하고, 유효하면 요청을 처리
- 매 요청마다 사용자 인증 정보가 포함되어 오기 때문에 세션처럼 서버에 저장하지 않아됨
3. JWT 구조
xxxx.xxxx.xxx
헤더.페이로드.시그니쳐
1. 헤더
{
"alg": "HS256",
"typ": "JWT"
}alg: 서명에 사용할 알고리즘 (예: HS256, RS256)
typ: 타입, 보통 "JWT"
2. Payload (내용)
{
"sub": "user123",
"name": "홍길동",
"role": "admin",
"exp": 1710000000
}사용자 정보나 권한을 담는 공간
표준 클레임(Claim)도 존재: iss(발급자), exp(만료 시간), sub(사용자 ID) 등 Base64 인코딩만 되었기 때문에 누구나 디코딩 가능 → 페이로드는 복호화가 가능하기 때문에 민감정보 저장 X
3. Signature (서명)
위의 Header + Payload를 합친 후, 비밀 키(secret key)를 사용해 서명
JWT 위조 방지 기능 제공
HMACSHA256(
base64UrlEncode(header) + "." + base64UrlEncode(payload),
secret
)4. JWT의 장점
- 자체 검증: 서버가 토큰만 보고 사용자 식별 가능 (DB 조회 없이)
- 빠른 응답: Stateless → 세션 저장 필요 없음
- 유연한 전달: HTTP 헤더, 쿠키, 로컬스토리지, 세션스토리지 등 다양한 방식으로 전달 가능
- 범용 표준 다양한 언어/환경에서 사용 가능 (Node.js, Python, Java 등)
5. JWT 토큰이 등장한 이유
기존 방식의 문제점
- 세션 방식의 단점
- 서버가 로그인한 모든 유저의 세션 정보를 저장해야 함.
- 사용자가 많아지면 서버의 메모리 사용량 증가(Stateful)
→ 확장성 저하 - 서버를 여러 대 운영할 경우 세션 동기화 필요 (Sticky Session, Redis 등)
API/SPA 환경에서의 문제
- 프론트엔드(React, Vue 등)와 백엔드가 분리된 SPA나 모바일 앱에서 세션 유지가 번거롭고 불편
세션 없이도 인증 정보를 토큰에 직접 담아 클라이언트에 저장함으로써 Stateless 인증을 가능하게 함
서버는 인증 상태를 기억할 필요 없이, 매 요청마다 전달되는 토큰을 검증해서 인증 처리 → 수평 확장에 유리
6. JWT 토큰의 저장 방식
- 로컬 스토리지: JS 코드를 통해 접근이 가능하기 때문에 XSS 공격에는 취약
- 세션 스토리지: 탭 단위 격리로 현재 떠 있는 텝에서만 유지되는 특징 탭을 지우면 토큰이 사라짐
- HTTPOnly: JS를 통한 접근이 불가능하기 때문에, XSS 공격으로부터 보호
이렇게 JWT토큰을 공부하고 저장 방식중 가장 안전해 보이는 HTTPOnly 방식으로 토큰을 발급하기로 정했다.
첫째날에는 대시보드 페이지까지 만들고 CS면접 질문 csv 파일을 DB에 집어넣고 끝을 냈다.
