[React ] study(7) 인증과 인가 - 쿠키, 세션, 토큰, JWT

dev kyu·2025년 1월 13일

React

목록 보기
11/11

인증과 인가란,

1️⃣ 인증 (Authentication): 누구인지 확인하는 과정이야.
(예) "이 사용자가 정말 로그인하려는 계정의 주인인지 확인." 로그인: ID와 비밀번호 입력.
결과: "당신은 누구인지 확인했습니다."

2️⃣ 인가 (Authorization): 권한을 확인하는 과정이야.
(예) "이 사용자가 특정 작업(예: 관리자 페이지 접근)을 할 수 있는 권한이 있는지 확인."
결과: "이 작업을 할 수 있는 사람입니다/아닙니다."

📍핵심 설명

인증과 인가를 구현할 때 사용하는 기술은 쿠키(Cookie), 세션(Session), 토큰(Token), JWT이 있어.

  • 쿠키 (Cookie)
    웹 브라우저에 저장하는 작은 정보 조각이야. 서버가 브라우저에게 데이터를 저장하도록 요청하고,
    브라우저는 이 데이터를 이후 요청마다 서버에 다시 보여줘.
    • 마치 극장 입장권과 같아!
      입장권(쿠키)은 극장(브라우저)에 저장해.
      입장권을 보여주면 서버가 "아, 이 사람은 이미 인증받았군!" 하고 신원을 확인해.
    • 특징: 클라이언트(브라우저)에 데이터 저장.
      로그인 정보, 장바구니 상태 등을 유지할 때 사용.
      만료 시간이 설정되어 있어, 시간이 지나면 쿠키가 삭제.
  • 세션 (Session)
    서버에 저장되는 사용자 상태 정보야. 사용자가 서버에 접속하면 세션 ID를 생성하고, 이를 쿠키에 저장해.
    • 마치 호텔 키카드와 같아!
      키카드(세션 ID)가 발급되고, 이를 가지고 있을 때만 방(서버 데이터)에 접근할 수 있고, 키카드는 호텔(서버)에 상태 정보를 저장하므로, 잃어버려도 큰 문제가 없어.
    • 특징: 데이터가 서버 저장.
      서버가 사용자의 상태를 기억할 수 있어.
      서버 리소스를 사용하기 때문에 많은 사용자가 접속하면 부담이 될 수 있어.
  • 토큰 (Token)
    사용자 정보를 포함한 인증 데이터야. 서버는 사용자가 로그인하면 토큰을 발급하고, 이후 요청마다 이 토큰을 사용해 인증해.
    • 마치 회원증과 같아!
      회원증(토큰)을 가지고 있으면, "이 사람이 인증된 회원이구나"라고 확인할 수 있고, 회원증에는 사용자의 정보가 포함되어 있어.
    • 특징: 클라이언트에 저장.(쿠키, 로컬 스토리지 등)
      상태를 서버에 저장하지 않으므로 서버 부하가 적어.
  • JWT (JSON Web Token)
    JSON 형식으로 된 토큰이야. 토큰 안에 인증 정보(예: 사용자 ID, 권한)를 담아서 서버가 이를 해석해 인증해.
    • 마치 비행기 탑승권과 같아!
      탑승권(JWT)에는 승객 이름, 좌석 번호 등 정보가 포함되어 있고, 항공사는 탑승권만 보고 신원을 확인하고, 서버에 추가 저장이 필요 없어.
    • JWT 구조는
      헤더(Header): 어떤 종류의 토큰인지와 어떤 알고리즘으로 서명되었는지에 대한 정보가 들어있어.
      본문(Payload): 실제로 중요한 데이터가 들어있는 부분이야. 예를 들어, 사용자 ID, 토큰의 만료 시간 등이 여기에 포함.(민감한 정보는 넣지 않아야해!)
      서명(Signature): 토큰이 위조되지 않았는지 확인하는 역할을 해. 서버만이 알 수 있는 비밀 키로 서명되어 있어, 이 서명 때문에 토큰의 무결성이 보장돼.
    • 특징: 데이터를 직접 토큰에 포함하여 서버는 상태를 기억할 필요 없고, 자체 인증이 가능하지만, 민감한 정보를 담으면 안돼. 암호화 서명(Signature)으로 토큰 위조를 방지하지.

🚀 진짜 쉬운 설명

  • 쿠키: 로그인 상태 유지, 장바구니 저장 등 간단한 상태 유지가 필요할 때.
  • 세션: 사용자 데이터를 서버에서 안전하게 관리하고 싶을 때.
  • 토큰: 서버 부하를 줄이고, 상태 정보를 클라이언트에서 관리하고 싶을 때.
  • JWT: RESTful API와 같은 무상태(Stateless) 시스템에서 인증을 구현할 때.
특징쿠키세션토큰JWT
데이터 저장 위치브라우저서버클라이언트클라이언트
인증 데이터 포함보통 포함하지 않음 (세션 ID 저장)포함하지 않음 (세션 ID만 저장)포함 가능포함 (JSON 형식)
만료 관리쿠키 만료 시간으로 설정세션 만료 시간으로 설정토큰 만료 시간 설정 가능토큰 만료 시간 설정 가능
보안민감 정보 저장 시 주의 필요비교적 안전보안에 신경 써야 함서명(Signature)으로 위조 방지
서버 부하적음서버 리소스 필요없음없음

✏️ 더 알아가기

  • 토큰으로 으로 보안을 강화하는 법!
    (이를 위해서는 각종 토큰을 발급해주는 영역의 백엔드 개발자와의 협업이 필요해)

리소스 접근 인가를 받기 위해 사용되는 토큰을 Access Token 이라고 불러.
Access Token의 만료기간을 길게 잡고 인증상태를 오래 가져갈 경우 서버 부담은 줄어드나 보안성(탈취 당할 경우)에 허점이 있어.

인증 보안이 중요한 서비스의 경우 인증 시 2개의 토큰 (Access Token, Refresh Token)을 발급해. Access Token의 기간은 30분 정도로 짧게 가져 가고, Refresh Token은 1~2주 정도로 길게 잡는 경우가 많아!
이 경우 서버에서는 Access Token이 만료되었을 때 Refresh Token 이 유효한 상태면 새로운 Access Token을 클라이언트에 발급해주고 인증상태를 유지할 수 있도록 하고, Refresh Token 만료 시 다시 로그인하라는 메시지를 응답해.

  • Thunder Client툴
    HTTP 요청을 보내고 응답을 받는데 필요한 모든 기능을 가지고 있는 툴이야, 이를 이용하면 손쉽게 API를 테스트하고 디버깅 할 수 있어.

    • 설치방법:
      VS Code Extensions에서 [thunder Client] 검색 후 설치 → 사이드바의 아이콘 선택
    • 기본 사용 방법:
    1. New Request 클릭
    2. 원하는 HTTP Method 선택 및 URL 입력(Payload가 필요할 경우 Body에 추가)
    3. Send를 눌러 응답 확인
profile
dev kyu

0개의 댓글