Next.Js (App router) access token 저장위치 및 전달

Next.js와 같은 클라이언트 사이드에서는 주로 쿠키(cookie) 또는 로컬 스토리지(localStorage)에 토큰을 저장합니다. 하지만, Next.js가 서버 사이드 렌더링(SSR)을 지원하기 때문에, localStorage나 sessionStorage를 사용하면 서버에서는 이 값들을 접근할 수 없어 문제가 생길 수 있습니다. 그래서 이러한 SSR 환경에서는 httpOnly 쿠키를 사용하는 것이 일반적입니다. httpOnly 쿠키는 XSS(크로스 사이트 스크립팅) 공격을 방어할 수 있으며, 서버에서도 접근 가능하므로 SSR 시나리오에 잘 맞습니다. fetch API를 사용하여 요청을 보낼 때는 headers 옵션을 설정하여 JWT 토큰을 포함시킬 수 있습니다. 다음과 같이 fetch 요청 시 headers 객체 안에 'Authorization' 헤더를 포함시키면 됩니다: ```javascript fetch('/api/data', { method: 'GET', headers: { 'Content-Type': 'application/json', // Bearer scheme + your token 'Authorization': `Bearer ${token}` } }); ``` 여기서 token은 저장된 토큰 값을 불러온 것으로, 쿠키에서 추출하는 경우 `js-cookie` 라이브러리의 `get()` 메소드 등을 활용하여 가져올 수 있습니다. 만약 서버에서도 이 토큰값을 사용해야 한다면, 쿠키에 저장하는 것이 좋습니다. Next.js 환경에서는 useEffect 또는 getServerSideProps 등을 이용하여 초기 로딩에 필요한 SSR 처리를 보완하면, CSR 처리와 SSR 처리를 모두 커버할 수 있게 됩니다.