[JS] 쿠키 사용하기

본 글은 node.js 17.8.0, react 17.0.2 버전을 기준으로 작성되었습니다.

웹 환경에서 쿠키는 여러 상황에서 사용됩니다.
인증 토큰을 보관하는 것부터 DB의 역할까지 맡기도 합니다.
본 글에서는 프론트에서 쿠키를 간단하게 다루는 법에 대해 알아보겠습니다.

1. js-cookie 설치하기

npm을 보면 쿠키를 다루는 여러 라이브러리들을 볼 수 있습니다.
js-cookie는 npm에 있는 프론트엔드에서 쿠키를 다루는 라이브러리 중 가장 많은 주간 다운로드 수를 가지고 있는 라이브러리입니다.
물론 리액트나 뷰를 사용한다면 해당 라이브러리/프레임워크에 특화된 쿠키 관련 라이브버리를 사용하는게 더 효율적일 수 있으나 개인적으로는 큰 필요를 느끼지 못했습니다.
js-cookie는 프로젝트 디렉토리에서 터미널에 아래 명령어를 입력하여 설치할 수 있습니다.

• npm을 사용할 경우

npm i js-cookie

• yarn을 사용할 경우

yarn add js-cookie

2. 쿠키 읽기

js-cookie를 사용하기 위해서는 아래 코드를 입력해 import를 해야합니다.

import Cookies from 'js-cookie';

아래 코드를 통해 key가 name인 쿠키의 value를 읽을 수 있습니다.

Cookies.get('name')

만약 이 때 key가 name인 쿠키가 없다면 undefined를 반환합니다.

3. 쿠키 쓰기

쿠키를 쓸 때 또한 js-cookie를 import해줘야 합니다.

import Cookies from 'js-cookie';

아래 코드를 통해 쿠키의 key와 value를 설정할 수 있습니다.

Cookies.set('name', 'value', { expires: 7, path: '' })

이 때 expires는 유효기간, path는 쿠기의 경로로 기입하지 않아도 됩니다.