개발자

Next JS 14 쿠키 관련 질문입니다.

2024년 03월 17일조회 432

현재 NextJS 14 버전을 사용 중에 있으며 App Router로 폴더 구성을 하고 로그인 작업을 진행 중에 있으며, 로그인 프로세스는 다음과 같습니다. 1. 프론트엔드 : 사용자가 로그인 버튼 클릭 2. 디스코드 서비스에서 인증 (디스코드 페이지로 이동) 3. 백엔드 서버로 인증코드 전송 4. 백엔드 서버에서 프론트엔드로 리다이렉트 (이 때 쿠키로 엑세스 토큰과 같은 정보를 보내줌) 쿠키 설정도 https에 백엔드랑 같은 도메인으로 맞춰 줬습니다. 여기서 1~4번까지 에러 없이 잘 동작하고, 쿠키도 브라우저에 잘 저장되고 있습니다. 근데 여기서 한 가지 문제가 발생했는데, Nexjs가 서버 사이드 컴포넌트(layout) 에서는 쿠키를 잘 불러오고 있지만 클라이언트 사이드 컴포넌트(page) 에서는 쿠키를 불러올 수 없었습니다. (undefined) 현재 클라이언트 사이드 컴포넌트에는 최 상위에 'use client' 를 붙혀 잘 사용하고 있고, cookies-next 라는 라이브러리로 불러오고 있습니다. 어떤 것이 문제일까요? 문제의 원인과 해결 방법을 알고 싶습니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

코애딩플님의 프로필 사진

useEffect안에서 document.cookie 출력해봅시다

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 03월 17일

Next.js는 다양한 프레임워크로 개발되며, 클라이언트 사이드와 서버 사이드 모두에서 실행될 수 있습니다. 이 때문에 쿠키의 동작 방식에 있어서 차이가 발생할 수 있습니다. 문제가 발생하는 부분은 클라이언트 사이드입니다. 아마도 `cookies-next` 라는 라이브러리를 사용하여 쿠키를 읽으려고 하지만 실패하고 있는 것 같습니다. 이 경우, 문제의 원인과 해결 방법은 다음과 같을 수 있습니다: 1) 보안 설정: Next.js는 기본적으로 보안을 강화하기 위해 쿠키를 HTTP Only로 설정합니다. 이렇게 설정된 쿠키는 자바스크립트로 접근할 수 없으므로 클라이언트 사이드에서 읽지 못하게 됩니다. 이 경우 백엔드에서 쿠키 생성 시 httpOnly 옵션을 false로 설정해야 합니다. 2) 동일 출처 정책(Same-Origin Policy): 쿠키 접근은 동일 출처 정책에 따라 제한됩니다. 요청을 보내는 소스(프론트엔드)와 대상(백엔드)의 프로토콜, 호스트, 포트가 모두 일치해야되기 때문에 둘이 동일한 도메인에서 실행되어야 합니다. 3) 쿠키의 Path 속성: 쿠키가 설정될 때, 해당 쿠키가 유효한 URL 경로를 지정할 수 있습니다. 만약 쿠키의 path가 '/api'로 설정되었다면, '/api' 하위 경로에서만 쿠키에 접근이 가능합니다. 이 경우 해당 경로에서 클라이언트 사이드 코드가 실행되어야 합니다. 최종적으로는 어떤 문제가 발생했는지 확인하기 위해선, 백엔드에서 쿠키를 생성하고 설정하는 방법과 그 후 프론트엔드에서 쿠키에 접근하는 방식을 자세히 확인해봐야 할 것 같습니다. 이러한 과정을 통해 문제를 해결할 수 있을 것입니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!