RARRIT

기억을 너무 믿지 말자

:ledger: 쿠키의 개념과 Next.js에서 쿠키를 관리하는 방법을 알아보자

이번 글을 통해 쿠키의 개념과 Next.js에서 쿠키를 어떻게 사용하는지 알아보자!

:one: 쿠키의 기본 개념

쿠키(Cookie)는 웹 애플리케이션에서 흔히 사용되는 상태 관리 방법 중 하나로, 서버에서 생성하여 클라이언트에 저장한다. 이후 클라이언트는 이 쿠키를 통해 서버에 다시 요청을 보낼 때 추가적인 정보를 전달할 수 있다.

:pushpin: 1-1) 쿠키의 주요 특징

  1. 작은 용량
    • 일반적으로 4KB 이하로 제한된다.
  2. 만료기간
    • 쿠키는 설정된 만료 시간 이후 자동으로 삭제된다.
  3. 도메인 기반 저장
    • 쿠키는 특정 도메인에 한해 저장되며, 해당 도메인에서만 접근이 가능하다.

:pushpin: 1-2) 쿠키의 용도

쿠키는 여러 목적으로 사용되며, 대표적인 용도는 다음과 같다.

  1. 사용자 인증
    • 로그인 후 세션 정보를 저장하여, 이후 요청 시 인증 상태를 유지한다.
  2. 사용자 설정 저장
    • 다크 모드 설정이나 언어 설정과 같은 사용자 맞춤형 옵션을 저장할 수 있다.
  3. 세션 유지
    • 새로고침 후에도 사용자의 상태 정보를 유지하여 지속적인 사용자 경험을 제공한다.

:two: next-cookies

Next.js에서는 cookies 함수를 사용하여 쿠키를 관리할 수 있다. 쿠키 관리기능은 아래와 같다.

  • 쿠키 읽기: 특정 쿠키를 가져오거나 모든 쿠키를 가져올 수 있음
  • 쿠키 존재 여부 확인: 쿠키의 존재 여부를 확인할 수 있음
  • 쿠키 설정: 새로운 쿠키를 설정하거나 기존 쿠키를 업데이트할 수 있음
  • 쿠키 삭제: 쿠키를 삭제할 수 있는 여러가지 방법을 제공함

:pushpin: 2-1) 특정 쿠키 읽기

cookies().get(name) 메서드를 사용하여 특정 이름의 쿠키를 가져올 수 있음

  • 만약 쿠키가 없으면 undefined를 반환함
import { cookies } from 'next/headers'

export default function Page() {
  const cookieStore = cookies()
  const theme = cookieStore.get('theme')
  return '...'
}

:pushpin: 2-2) 모든 쿠키 읽기

cookies().getAll()메서드를 사용하여 모든 쿠키를 배열 형태로 가져올 수 있음

  • 특정 이름의 쿠키만 가져오려면 이름을 지정할 수도 있음
import { cookies } from 'next/headers'

export default function Page() {
  const cookieStore = cookies()
  return cookieStore.getAll().map((cookie) => (
    <div key={cookie.name}>
      <p>Name: {cookie.name}</p>
      <p>Value: {cookie.value}</p>
    </div>
  ))
}

:pushpin: 2-3) 쿠키 존재 여부 확인

cookies().has(name) 메서드를 사용하여 특정 쿠키가 존재하는지 여부를 확인할 수 있음

import { cookies } from 'next/headers'

export default function Page() {
  const cookieStore = cookies()
  const hasCookie = cookieStore.has('theme')
  return '...'
}

:pushpin: 2-4) 쿠키 설정

cookies().set(name, value, options) 메서드를 사용하여 새로운 쿠키를 설정하거나 기존 쿠키를 업데이트할 수 있음.

  • 이 메서드는 서버 액션이나 라우트 핸들러에서만 사용할 수 있음
'use server'

import { cookies } from 'next/headers'

async function create(data) {
  cookies().set('name', 'lee')
  // or
  cookies().set('name', 'lee', { secure: true })
  // or
  cookies().set({
    name: 'name',
    value: 'lee',
    httpOnly: true,
    path: '/',
  })
}

:pushpin: 2-4) 쿠키 삭제

쿠키를 삭제하는 방법은 여러가지가 있다.

  1. 명시적 삭제
  2. 빈 값 설정
  3. 만료 시간 설정
'use server'

import { cookies } from 'next/headers'

// 명시적 삭제
async function delete1(data) {
  cookies().delete('name')
}

// 빈 값 설정
async function delete2(data) {
  cookies().delete('name', '')
}

// 만료 시간 설정: maxAge:0 => 즉시 만료
async function delete3(data) {
  cookies().set('name', 'value', { maxAge: 0 })
}

:three: SSR과 CSR에서의 쿠키 관리 차이점

Next.js는 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 모두 지원하므로, 두 방식에서 쿠키를 처리하는 방법에 차이가 있다.

:pushpin: 3-1) SSR (서버 사이드 렌더링)

서버에서 쿠키를 처리하며, getServerSideProps 또는 API 라우트에서 쿠키를 읽거나 설정할 수 있다.

:pushpin: 3-2) CSR (클라이언트 사이드 렌더링)

클라이언트에서 직접 쿠키를 읽고 설정할 수 있으며, 브라우저의 document.cookie를 통해 접근한다.

:fire: 마무리

쿠키의 기본 개념부터 Next.js에서 쿠키를 설정하고 관리하는 방법까지 알아보았다. Next.js에서 쿠키를 활용하여 인증, 사용자 맞춤 설정, 세션 관리 등을 구현하는데 유용하게 적용할 수 있을 것 같다.

참고