쿠키와 nookies

Link : https://www.npmjs.com/package/nookies

일단 쿠키가 뭔지부터 알아보자.

HTTP Cookie => 웹 서버에 의해 사용자의 컴퓨터에 저장되는 '이름을 가진 작은 크기의 데이터'

사용자가 어떤 웹 사이트를 방문할 경우 사용자의 웹 브라우저를 통해 인터넷 사용자의 컴퓨터나 다른 기기에 설치되는 작은 기록 정보 파일을 일컫는다.

쿠키, 웹 쿠키, 브라우저 쿠키 라고도 함.

이 파일에 담긴 정보는 인터넷 사용자가 같은 웹 사이트를 방문할 때 마다 읽히고 수시로 새로운 정보로 바뀐다.

쿠키는 소프트웨어가 아니다. 쿠키는 컴퓨터 내에서 프로그램처럼 실행될 수 없으며, 바이러스를 옮길 수도, 악성코드를 설치할 수도 없다. 그치만 스파이웨어를 통해 유저의 브라우징 행동을 추적하는데 사용될 수 있고, 누군가의 쿠키를 훔쳐서 해당 사용자의 웹 계정 접근권한을 획득할 순 있다.

쿠키의 구조

• 이름

• 값

• 0개 이상의 속성 (이름/값 쌍). 속성은 쿠키의 만료 기간, 도메인, 플래그(Secure, HttpOnly) 등의 정보를 저장한다.

  쿠키의 설정

  쿠키는 Set-Cookie Http 헤더를 사용하여 설정되며, 이는 웹 서버의 HTTP 응답을 통해 송신된다. 이 헤더는 웹 브라우저가 쿠키를 저장하고 이를 차기 서버 요청 시 송신할 지를 지시.

  그러면 이 쿠키를 React에서 써보자.

  Nookies

• React 애플리케이션에서 쿠키를 쉽게 관리할 수 있게 도와주는 라이브러리. Next.js와 함께 사용되며, SSR 환경에서도 쿠키를 다를 수 있는 기능을 제공한다. Nookies를 사용하면 쿠키를 설정하고 가져오며, 삭제하는 작업을 손쉽게 수행할 수 있다.

  Start

  Server Side Cookies

  
  import nookies from 'nookies'

export default function Me() {
return

}

export async function getServerSideProps(ctx) {
// Parse
const cookies = nookies.get(ctx)

// Set
nookies.set(ctx, 'fromGetInitialProps', 'value', {
maxAge: 30 24 60 * 60,
path: '/',
})

// Destroy
// nookies.destroy(ctx, 'cookieName')

return { cookies }
}

Client-Only Cookies

```javascript
import { parseCookies, setCookie, destroyCookie } from 'nookies'

function handleClick() {
 // Simply omit context parameter.
 // Parse
 const cookies = parseCookies()
 console.log({ cookies })

 // Set
 setCookie(null, 'fromClient', 'value', {
   maxAge: 30 * 24 * 60 * 60,
   path: '/',
 })

 // Destroy
 // destroyCookie(null, 'cookieName')
}

export default function Me() {
 return <button onClick={handleClick}>Set Cookie</button>

Custom Express Server Cookies