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