쿠키의 활용법

자바스크립트의 쿠키!!

 

1. 쿠키란??

사용자에 관한 데이터를 서버에 저장하는 것이 아니라 로컬에 임시적으로 저장하여 데이터를 활용할 수 있는 저장공간을 뜻한다. 쿠키와 비슷한 성격의 로컬 저장소로는 세션 스토리지와 로컬 스토리지가 존재한다. 하지만 이번 게시글에서는 쿠키에 관한 내용을 다뤄보고자 한다.

 

이전 게시글 처럼 필자는 JWT토큰을 활용하여 사용자 인증을 하는 기능을 구현하였다. 이 기능을 구현하면서 로그인 시 생성되었던 JWT토큰을 저장할 적절할 공간을 찾고 있었다. 여러 가지 경우의 수를 고려해 보았을 때, JWT토큰은 브라우저 창을 닫은 상태여도 세션이 유지되어야 하고, 모든 브라우저에서 활용을 할 수 있는 범용성을 가지고 있으면 좋겠다는 생각이 들었다. 이러한 특징들을 종합했을 때, 저장소로 쿠키를 활용하는 것이 좋겠다는 결론이 도출되었다.

 

2. 쿠키의 Key, Value 형식

쿠키와 같은 웹스토리지(세션, 로컬 스토리지) 등은 기본적으로 Key, Value 형식으로 값이 저장되어진다. Key, Value라고 하면 JSON방식이 생각날텐데, 그 형식이 맞다. 예를 들어, cookie='meow meow'; 이러한 방식으로 쿠키 저장소에 값들이 저장된다. cookie는 name이고 'meow meow'는 cookie라는 name에 해당하는 value를 뜻한다.

 

3. 쿠키의 설치(Node.js의 패키지 매니저 npm, yarn 활용)

필자는 리액트 라이브러리를 활용하고 있다. 그렇기에 node.js의 npm과 yarn이라는 패키지 매니저를 활용하여 설치를 진행하였다.

패키지 매니저안에 속해있는 내용 중에서 universal-cookie를 활용할 것이다. 이 패키지는 react-cookie보다 더 업그레이드된 버전이다.

yarn add universal-cookie
npm install universal-cookie

import Cookies from 'universal-cookie';
 
const cookies = new Cookies();

설치를 진행한 후, import -> 객체 선언을 하게 되면 이제부터 본격적으로 쿠키를 활용할 수 있게 된다.

 

4. 쿠키의 사용법

 

 

4-1. 쿠키의 생성

필자는 JWT토큰을 쿠키에 저장하여 사용자 인증을 하기 위해 사용한다. 그렇기 때문에 몇 가지의 조건을 충족시킨 상태에서 쿠키를 생성해야한다.

1. 쿠키를 모든 페이지에서 활용할 수 있어야 한다.(특정 페이지에서만 인증을 하는 것이 아니기 때문)

2. 쿠키의 만료시간은 JWT 토큰의 만료시간와 일치해야 한다.

간단하게 두 가지의 조건을 충족시켜야 한다.

 

이 조건을 충족시키기 위해서 활용할 것은 expires와 path를 활용하는 것이다.

추가적으로 무언가를 설치하는 것이 아닌 쿠키를 생성할 때 이에 따른 조건을 추가해주는 방법으로 조건을 충족시킬 수 있다.

cookies.set('cookie', 'Meow Meow', { 
  path: '/',
  expires: Math.floor(Date.now() / 1000) + (60 * 60) }
);

cookies.set이라는 명령어가 기본적으로 쿠키를 생성한다는 메서드이다. 이 안에 매개변수를 추가하여 쿠키를 생성한다.

먼저 'cookie'라고 써져 있는 부분은 위에서 말한 Key에 해당하는 부분이다. 즉, 쿠키의 이름이다. 이 이름을 통하여 쿠키를 불러오거나 삭제하는 등의 작업을 할 수 있다.

두번째로 'Meow Meow'라는 부분은 위에서 말한 Value에 해당하는 부분이다. 즉 쿠키의 값이다. 쿠키를 호출할 때, 해당하는 Key값을 불러오게 되면, 그 쿠키에 속해져있는 Value값을 반환한다.

Key부분은 유일해야 하지만 Value부분은 그렇지 않다. cookie1, cookie2라는 Key가 존재할 때, Value는 nyam nyam이라는 중복되는 값이 들어가도 문제가 없다. Key부분은 무조건 유일해야 한다.

세번째는 쿠키에 해당하는 옵션들을 명시해 놓는 부분이다. path는 웹페이지의 어느 부분에서 쿠키를 활용할 것인지를 나타낸다. '/'라고 지정하였기에 웹페이지의 모든 부분에서 쿠키를 활용할 수 있다. expires는 만료기간을 뜻한다. expires에 들어간 값에 따라 그 해당하는 시간이 지나게 되면 쿠키는 자동으로 삭제가 된다.

 

4-2. 쿠키 불러오기

쿠키를 불러오는 방법을 set과 대비되는 명령어인 get을 사용한다.

cookies.get('cookies');

get 안에 들어가 있는 내용은 쿠키의 Key에 해당하는 내용이다. 이러한 내용을 콘솔에 찍어 보게 되면 해당하는 쿠키의 Value값인 'Meow Meow'가 출력되는 것을 확인할 수 있다. 이를 통해 쿠키에 속해있는 내용을 불러와 활용할 수 있다.

 

4-3. 쿠키 삭제하기

cookies.remove('cookies');

remove를 사용하여 쿠키를 제거할 수 있다. get과 마찬가지로 Key에 해당하는 내용을 적어주면 해당하는 쿠키의 만료시간과 상관없이 쿠키가 사라지게 된다.

 

5. 쿠키의 활용

이처럼 서버가 아닌 로컬에 값을 저장하여 사용하는 경우에는 서버에 부담을 주지않고, 간단하고 빠르게 활용할 수 있다는 장점이 존재한다. 필자는 쿠키를 사용자의 ID를 담아 호출하는 용도로 활용하였다.

어떠한 페이지에 로그인할 경우,

->>.  '나의 ID'님 환영합니다~~.  라는 문구를 본 적이 있을 것이다. 이 문구에 속해있는 ID를 표현하기 위해서 쿠키에 내용을 저장, 해당하는 페이지를 불러올 때 쿠키에 대한 내용을 호출하여 저 부분에 쿠키 값을 삽입하여 표현하는 방법으로 해당 문구를 완성할 수 있다.

 

또한 JWT토큰을 저장하는 저장소로 활용하여 암호화된 내용을 검증 후 불러와 활용할 수 있다.

 

6. 쿠키관련 사이트

https://www.npmjs.com/package/universal-cookie

universal-cookie

쿠키설치와 쿠키에 대한 메서드, 그 외에도 path와 expires 외에 추가적인 쿠키에 대한 옵션들을 참고하여 활용할 수 있다. 쿠키에 대한 내용이 잘 정리되어져 있기 때문에 옵션 추가를 고려하는 경우 해당 홈페이지의 잘 정리된 문서들을 바탕으로 기능을 추가할 수 있다.

 

 

Next >> ....

다음 글에는 AWS의 S3저장소를 통해 파일들을 불러오고 업로드하는 방법에 관한 글을 작성할 예정이다. 최근 관련된 작업을 하면서 꼼꼼히 정리하고자 하는 생각이 들었기 때문이다.

S3를 활용하면서 개인 서버에 부담을 최소화하고자, 클라우드에 저장된 파일들을 불러올 때는 Laravel 프레임워크를 활용하였고 파일을 업로드할 때는 클라이언트 쪽에서 업로드를 진행하는 방법으로 개발하였다. 동영상등의 대용량 파일들을 업로드할 때 서버를 통해 작업을 진행하게 되면 서버가 죽어버리는 현상이 있기 때문에 클라리언트 쪽에서 업로드를 할 수 있도록 구현하였다.