250217 월 TIL

Next.js에서 쿠키 사용하기

클라이언트 컴포넌트에서 쿠키 사용

const response = await client.POST("/api/posts", {
      body: {
        title,
        content,
      },
      credentials: "include",
    });

• 클라이언트 컴포넌트는 브라우저에서 실행됨.
• 쿠키를 불러올 때 credentials: "include" 옵션을 설정하면 자동으로 포함됨.

서버 컴포넌트에서 쿠키 사용

const response = await client.GET("/api/posts/{id}", {
    params: {
      path: {
        id,
      },
    },
    headers: {
          cookie: (await cookies()).toString(),
        }
  });

• 서버 컴포넌트에서는 Next.js의 API를 이용해 직접 쿠키를 가져와야 함.
• cookies() 함수를 통해 서버에서 쿠키를 불러와 요청의 헤더에 추가해야 함.

Next.js와 Spring Boot 간 쿠키 문제

• 클라이언트 컴포넌트에서 쿠키 요청 시 서버에서 바로 응답함.
• 그러나 Spring Boot 서버는 응답을 브라우저가 아닌 Next.js 서버로 반환.
• Next.js 서버가 Spring Boot 응답을 받아 새 응답을 구성해 브라우저에 전달.
• 이 과정에서 Spring Boot 서버가 보낸 쿠키가 헤더에서 사라지는 문제 발생.

해결 방법

1. 미들웨어를 이용해 처리

• Next.js에서 미들웨어를 활용하여 요청을 가로채고 쿠키를 유지.

2. 응답 가로채기

• Next.js 서버가 브라우저로 응답을 전달하기 전에 Spring Boot에서 받은 쿠키를 저장.
• 이를 브라우저로 넘기는 응답에 다시 포함.

 

프론트엔드에서 인증/인가를 하는 이유

서버에서 토큰 재발급 및 인증을 처리하는데, 왜 프론트에서 인증/인가를 해야 할까?

1. 최적화

• 불필요한 요청이 서버에 과도하게 발생하는 것을 방지.
• 예: /member/me 요청이 매번 발생하는 문제 → 만료 시간 체크로 최적화.

2. 불필요한 API 요청 방지

• post/write 페이지에 로그인하지 않은 사용자가 접근 가능.
• 로그인하지 않은 사용자가 API 요청을 보내는 문제 발생.
• Middleware에서 차단하여 서버 요청이 발생하지 않도록 처리.