[프론트엔드 인증] JWT란? 실무에서 쓰는 개념과 사용법 한눈에 정리

1. JWT(JSON Web Token)란?

JSON Web Token = 웹 표준 기반의 인증 토큰

 

서버에서 로그인 성공 시 클라이언트에 발급하는 “디지털 서명된 토큰”입니다.

로그인 상태를 유지하는 방법 중 하나로

 

1. 서버 : "너는 로그인한 사용자야" 라는 증명서를 줌.

2. 클라이언트 : 이후 모든 요청에 이 증명서(JWT)를 들고 다님.

3. 서버 : 이 토큰이 맞는지 검사하고 요청 허용

 

 

2. JWT가 필요한 이유

로그인을 유지하려면 서버가 "이 사용자가 로그인했는지" 알아야 합니다.
전통적으로는 서버 메모리에 세션을 저장했지만, 서버 확장성이 떨어졌어요.
그래서 등장한 것이 "클라이언트가 로그인 인증서를 들고 다니는 방식" = JWT 방식입니다.

 

JWT 장점

• 서버가 세션을 저장 안 해도 됨 → 확장성 좋음
• 모바일, 웹, 여러 플랫폼에서 쉽게 사용 가능

 

3. JWT 구조

JWT는 3부분으로 구성됨
[Header].[Payload].[Signature]

 

부분	설명
Header	토큰 타입, 서명 알고리즘
Payload	실제 데이터 (userId, name 등)
Signature	위 내용 + 비밀키로 만든 서명 (위조 방지)

 

📌 Payload는 누구나 볼 수 있음 → 비밀번호, 주민번호 등 넣으면 안 됨!

예시

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJ1c2VySWQiOjEsIm5hbWUiOiLslYTsubTr
Q9rFJ5sE2Zbx0zAz5yZBd9vQ8MvA

 

 

4. JWT 사용 예시(쿠키, localStorage)

📌 로그인 후

로컬 스토리지 저장

localStorage.setItem("accessToken", token);

쿠키 저장

Set-Cookie: accessToken=<토큰값>; HttpOnly; Secure

 

📌API 요청 시

매 요청마다 Authorization Header에 넣음

axios.get('/api/user', {
  headers: {
    Authorization: `Bearer ${accessToken}`
  }
})

 

📌 서버에서 검증

서버는 토큰을 해석하고 서명을 확인해서 "정상 사용자"인지 판단

const payload = jwt.verify(token, SECRET_KEY);

 

 

5. JWT vs 세션 인증

항목	JWT(토큰)	세션(서버 메모리)
상태 유지	클라이언트가 유지	서버가 유지
확장성	✅ 좋음 (서버 부담 X)	❌ 서버 메모리 필요
보안	Cookie 설정 권장	상대적으로 안전
사용 추천	SPA, 모바일 앱, API 서버	전통 웹사이트

 

👉 SPA (Next.js, React) + 모바일 앱 → JWT가 더 잘 어울림