그렇다면 JWT인증 구현시 Access Token을 localStorage에 저장할 것인가, 쿠키(HttpOnly)에 저장할 것인가?

✅ 1. localStorage vs 쿠키 저장 – 장단점 비교

항목	localStorage	쿠키 (HttpOnly)
접근 방식	JS (`localStorage.getItem`)	JS로 접근 ❌ (`HttpOnly` 설정 시)
자동 전송	❌ 요청마다 직접 `Authorization` 헤더에 붙여야 함	✅ 브라우저가 자동으로 쿠키 전송
XSS 취약성	❌ 높음 – JS로 토큰 탈취 가능	✅ 안전 – JS 접근 불가
CSRF 위험성	✅ 없음 – 자동 전송 안됨	❌ 있음 – 자동 전송되기 때문 (SameSite 설정 필요)
사용 편의성	CSR에서 유연함 (SPA API 호출 등)	SSR과 연동하기 쉬움 (쿠키 자동 전송)
보안 최선책	❌ 취약한 환경	✅ 더 안전한 방식

✅ 요약 포인트

localStorage: XSS에 매우 취약하지만 CSRF는 없음
쿠키(HttpOnly): XSS에는 강하지만 **CSRF 보호 설정(CORS + SameSite)**이 필요

✅ 2. 쿠키 사용 시 CORS + SameSite 설정 (보안에 필수!)

📌 문제 상황:

서버와 클라이언트가 다른 도메인일 때(예: frontend.com ↔ api.backend.com)

쿠키를 주고받으려면 CORS + SameSite 정책을 제대로 설정해야 함

✅ 서버 설정 (Access-Control-Allow…)

Access-Control-Allow-Origin: <https://frontend.com>
Access-Control-Allow-Credentials: true

❗ 꼭 credentials: true를 설정해야 브라우저가 쿠키를 서버로 전송함

✅ 클라이언트 설정 (`fetch`, axios)

// fetch 예시
fetch("<https://api.backend.com/user>", {
  method: "GET",
  credentials: "include" // 쿠키 포함!
})

// axios 예시
axios.get("<https://api.backend.com/user>", {
  withCredentials: true
})

✅ 1. localStorage vs 쿠키 저장 – 장단점 비교

✅ 요약 포인트

✅ 2. 쿠키 사용 시 CORS + SameSite 설정 (보안에 필수!)

📌 문제 상황:

✅ 서버 설정 (Access-Control-Allow…)

✅ 클라이언트 설정 (fetch, axios)

✅ 쿠키 설정 (서버에서)

✅ 클라이언트 설정 (`fetch`, axios)