쿠키 관리의 예술: Next.js에서의 쿠키 처리 기술

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Next.js 프론트엔드 개발자, React 앱 개발자

(중급 이상의 경험을 가진 쿠키/세션 관리에 관심 있는 개발자)

핵심 요약

• CookieOptions 타입으로 쿠키 옵션 정의 (path, secure, sameSite 등)
• ClientCookies 클래스를 통해 쿠키 생성(set), 조회(get), 삭제(delete), 존재 여부 확인(has)
• useCookie 훅으로 React 컴포넌트 내 쿠키 상태 반응형 관리 및 탭 간 동기화 지원

섹션별 세부 요약

1. 쿠키 관리의 중요성

• 쿠키는 사용자 선호도, 세션 유지, 상태 저장에 필수적
• 잘못된 path 설정(path=/admin vs path=/)으로 인한 데이터 누락 사례
• SSR(SERVER-SIDE RENDERING) 호환성과 보안(secure, sameSite) 강조

2. `CookieOptions` 타입 정의

• days, path, domain, secure, sameSite 옵션 정의
• secure는 HTTPS 환경 자동 감지
• sameSite 값은 "Lax", "Strict", "None" 중 선택 가능

3. `ClientCookies` 클래스 구현

• set(name, value, options)

- encodeURIComponent(value)로 값 인코딩

- expires, path, domain 등 쿠키 문자열 생성

• get(name)

- document.cookie 분석 후 decodeURIComponent로 값 추출

• delete(name, path, domain)

- expires를 과거 시간으로 설정하여 쿠키 삭제

• has(name)

- document.cookie에서 쿠키 존재 여부 확인

4. `useCookie` 훅 사용법

• useState로 쿠키 값 상태 관리
• useEffect로 storage 이벤트 리스너 등록: 탭 간 쿠키 동기화
• set(value, options) 메서드로 쿠키 업데이트 및 상태 반영
• remove()로 쿠키 삭제
• has 속성으로 쿠키 존재 여부 확인

5. 사용 예시

• 직접 사용: ClientCookies.set("user_token", "abc123", { days: 7, secure: true })
• 훅 사용:

```jsx

const { value: theme, set: setTheme } = useCookie("theme", "light");

```

• 객체 저장: JSON.stringify()로 객체 인코딩 후 저장, JSON.parse()로 복원
• 쿠키 삭제: ClientCookies.delete("auth_token") 또는 useCookie("auth_token").remove()

6. 디버깅 팁

• path 옵션 검증 (예: /admin vs /)
• secure 플래그 확인 (프로덕션 환경 필수)
• Chrome 개발자 도구 > Application > Cookies로 쿠키 검사
• 탭 간 동기화 테스트: 한 탭에서 변경 후 다른 탭 확인

결론

• useCookie 훅을 통해 쿠키 상태 반응형 관리 및 탭 간 동기화 가능
• secure 및 sameSite 옵션을 반드시 사용하여 보안 강화
• storage 이벤트 리스너를 통해 다중 탭 환경에서의 데이터 일관성 유지
• 객체 데이터는 JSON.stringify()/JSON.parse()로 처리할 것
• 쿠키 path 설정을 명확히 하여 예상치 못한 데이터 누락 방지