인프런 커뮤니티 질문&답변

챙준

작성한 질문수

타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지

서버 컴포넌트에서 헤더, 쿠키 읽어오기

(제보) 쿠키를 브라우저 개발 환경에서 직접 삽입했을 때 나오지 않는 현상

작성

수정됨

말씀해주신 대로 브라우저의 쿠키 탭에서 데이터를 입력하니, 서버를 재실행했을 때 쿠키가 날라가서 올바르게 테스트를 할 수 없었습니다.

Claude 로 확인해보니 headers.set('Set-Cookie', ...) 코드 작성 후 테스트 환경에서 직접 URI 를 입력하여 실행하여 쿠키를 심어보라고 해서 그렇게 했더니 쿠키가 잘 심어집니다!

/* src/app/api/test-cookie/route.ts */
// localhost:3000/app/api/test-cookie 로 들어가 직접 쿠키를 입력해야 정상 작동

export async function GET() {
  const response = new Response('ok');
  response.headers.set('Set-Cookie', 'name=kim; HttpOnly; Path=/; Max-Age=3600');
  return response;
}

javascript react typescript next.js jwt

답변 2

수코딩

지식공유자

안녕하세요 😀

코드적인 처리를 통해서 직접 심으셔도

결과는 같습니다.

잘되시는 방법으로 진행하시면 되겠습니다.

감사합니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 챙준님.

쿠키를 브라우저 개발 환경에서 직접 삽입할 경우, 서버 재실행 시 쿠키가 사라지는 문제가 발생할 수 있습니다. 또한, 쿠키 관련 작업을 테스트할 때는 서버와 브라우저 간의 동작을 정확히 이해하고 있어야 합니다. 아래에 몇 가지 주의사항을 안내드립니다.

쿠키 테스트 시 고려 사항

서버 측 쿠키 설정:
- 서버에서 Set-Cookie 헤더를 사용해 쿠키를 설정해야 합니다. 코드를 통해 직접 쿠키를 설정함으로써, 서버 재실행 시에도 쿠키가 유효함을 보장할 수 있습니다.
- 예시 코드를 통해 Set-Cookie 헤더로 쿠키 설정을 정확히 구현하신 것 같습니다.
테스트 환경 설정:
- 개발 중에 브라우저의 개발자 도구를 사용해 쿠키를 쉽게 조작하고 확인할 수 있습니다. 하지만, 실제 환경에서는 이러한 방식으로 쿠키를 삽입할 수 없으므로 실서버에서의 동작도 반드시 테스트해야 합니다.
쿠키 속성의 중요성:
- HttpOnly, Secure, SameSite 등의 속성을 활용하여 쿠키의 보안을 강화할 수 있습니다. 특히, HttpOnly 는 클라이언트 측 JavaScript에서 쿠키에 접근하지 못하도록 해 보안상 유리합니다.
쿠키 만료 및 경로 설정:
- Max-Age와 Path 속성 설정을 통해 쿠키의 수명과 적용 경로를 명확히 할 수 있으며, 이를 통해 필요한 경우 원하는 범위에서 쿠키를 재사용하거나 삭제할 수 있습니다.

추가로 도움이 될 수 있는 관련 질문들:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

챙준

작성한 질문수

전체 Q&A

질문하기