개발자
next.js 서버 컴포넌트에서의 쿠키 설정.
현재 프론트는 next.js 백엔드는 nest.js 를 사용하고있습니다. 로그인을 하게 되면 토큰을 생성해서 쿠키에 담아주고있습니다. 쿠키가 설정된 후 서버 컴포넌트에서 백엔드 서버로 요청 시 쿠키를 직접 담아줘야 하는데 그렇다면 아래 첨부한 사진과 같이 저 로직이 항상 들어가야 할까요? 클라이언트에서 요청 시 쿠키는 자동으로 전송되지만 서버 컴포넌트에서는 매번 저렇게 직접 설정해줘야하는지 궁금합니다!
답변 1
전체 코드를 보지 않아 정확하게 확답은 힘들지만 흐름상 으로 클라이언트에 저장된 쿠키에서 권한을 읽어오는 작업으로 보여지는데 질문의 요지가 정확하지 않은 것 같습니다. getServers의 코드가 뭔지는 모르겠지만 해당 코드는 쿠키 정보를 불러와 내부 내역 중 토큰 정보를 추출하는 로직 으로 보입니다. https://nextjs.org/docs/app/api-reference/functions/cookies 먼저 쿠키가 어떤 것이고 어디에 저장되는지를 먼저 파악하신 다음 코드를 보시면 조금 더 도움이 될 것 같습니다. 보여주신 코드는 통신에서 받아온 쿠키가 브라우저에 저장되 있는데 그 저장된 쿠키를 Next.js 의 Header를 사용하여 불러와 그 토큰정보를 getServers에 인자로 전달해주는 로직 같습니다. + 작성해주신 부분 서버 컴포넌트라는 말이 나오는데 리액트 서버 컴포넌트를 말씀하시는 걸까요? 아니면 Next의 서버리스 펑션을 사용해 api쪽에 구성을 해줬다는 말씀이실까요?
LHS
작성자
멋쟁이사자처럼 프론트엔드스쿨 수학 • 2023년 11월 13일
로그인을 하게되면 서버에서 쿠키를 설정해주고, 그 쿠키가 저장이 잘되는것까지확인을했습니다! 저는 로그인을 하게되면 / 라는 경로의 라우터로 이동시키게 해놨는데, 해당 경로에 해당하는 페이지에서는 getServer라는 서버 리스트를 불러오는 함수를 호출합니다. 하지만 해당 페이지는 RSC 이기 때문에 서버로 요청을 보낼 때 쿠키가 헤더에 담기지 않게 되는데, 그렇다면, RSC에서 서버로 요청을 할때마다 cookies 라는 함수를 호출해서 토큰을 받아온후 헤더에 따로 쿠키 셋팅을 계속 해줘야하는지에 대한 질문이었습니다! 즉, 모든 RSC에서 nest 서버로 요청을 하게 될 때 cookies() 라는 함수에서 토큰을 계속 받아와 넣어줘야하는지에 대한 의문점이 들어서 질문하게되었습니다!
백승훈
프론트 엔드 개발자 (FE) • 2023년 11월 13일
RSC는 리액트 서버 컴포넌트로 해당 부분 제가 알기로 버전에 따라 조금씩 달라지는 걸로 알고 있습니다. 기본적으로 LocalStorage나 세션 스토리지 등은 RSC에서는 사용이 불가능하다고 알고 있습니다. 아마 서버로 요청하는 로직은 CSR에서 실행되고 랜더나 쿠키가 저장 되는곳은 서버 부분이라 이슈가 발생하는 것 같습니다. 해당 부분은 Next 버전이나 app,pages등 라우터 요소 등에 따라 달라질 수 있어서 전체 코드를 보지 않으면 답변 드리기가 힘들 것 같습니다. https://nextjs.org/docs/app/building-your-application/rendering/server-components (공식 문서 상으로 해당 부분이 지금 정상 동작하면 코드 상 문제는 없어 보입니다.)
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 11월 12일
서버 사이드 렌더링에서 쿠키를 사용한다면, 그것은 직접 호출해야합니다. 클라이언트에서는 브라우저가 자동으로 쿠키를 채워 넣지만, 서버 사이드에서는 이 작업을 수동으로 해야합니다. 그러나 다행히도, 모든 요청에 대해 이러한 설정을 반복하지 않고 자동화하려면 몇 가지 방법이 있습니다: 1. 커스텀 axios 인스턴스 생성: Axios에 기본적으로 추가되어야 하는 헤더가 있다면, 커스텀 인스턴스를 만들 수 있습니다. ```js // example in Node.js const instance = axios.create({ baseURL: 'https://your-base-url', headers: {Cookie: `your-cookie`} }); ``` 2. 서버 중간자 사용하기: express와 같은 백엔드 프레임워크를 사용하고 있다면, 서버의 모든 들어오는 요청에 쿠키를 설정하는 미들웨어 함수를 작성할 수 있습니다. 이런 식으로 전체 코드 베이스에서 일관성을 유지하며 각 요청에 대해 수동으로 쿠키를 설정하는 번거로움을 줄일 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!