관리 메뉴

Scientific Computing & Data Science

[WebApp / Express] Cookie를 사용하여 데이터 저장하기 본문

Programming/Web App

[WebApp / Express] Cookie를 사용하여 데이터 저장하기

Data Scientist cinema4dr12 2015. 12. 26. 12:36

이번 글에서는  Express Framework에서 cookie를 사용하여 데이터를 저장하고 읽어오는 방법에 대하여 알아보도록 하겠습니다.

Cookie란 웹사이트가 사용자의 브라우저에 저장할 수 있는 작은 조각의 정보를 의미합니다. Express에서는 cookie-parser라는 middleware를 통해 cookie API를 제공합니다. Cookie 기능을 활성화하기 위해 다음 명령을 입력하여 cookie-parser를 로딩합니다:


1
var bodyParser = require('body-parser');
cs


Express에서 cookie-parser를 활성화합니다:


1
app.use(cookieParser());
cs


이제 Express에서 cookie를 활용할 수 있는 모든 준비가 완료되었습니다. req.cookies 오브젝트에서 브라우저에 저장된 cookie 값을 불러올 수 있으며, res.cookies() 메써드를 통해 cookie 값을 저장할 수 있다.

cookie 생성하기

다음은 웹사이트에 방문자를 카운팅하는 간단한 예제입니다. 만약 cookie가 존재하지 않는 경우 cookie를 생성하고 이미 존재하는 경우 값을 1만큼 증가시킵니다:


1
2
3
4
5
6
7
8
9
10
11
app.get('/visotors'function(req, res) {
    var visitors = req.cookies.visitors || 0;
     
    visitors++;
     
    res.cookie('visitors', visitors, {
        maxAge: 10000
   });
    
   res.send('visitors: ' + visitors); 
});
cs


웹브라우저의 개발도구에서 cookie에 저장된 값을 확인할 수 있습니다:



res.cookie() 메써드는 cookie 옵션을 설정할 수 있으며 주요 옵션은 다음과 같습니다:


 옵 션

 설 명

 maxAge

 현재 시간으로부터 만료 시간을 밀리초(millisecond) 단위로 설정합니다.

 expires

 Cookie의 만료 날짜를 GMT 시간으로 설정합니다. 지정되어 있지 않거나 0으로 지정되어 있는 경우 session cookie를 생성합니다.

 path

 Cookie의 경로. 기본 경로는 "/"입니다.

 domain

 Cookie의 domain name입니다. 기본 domain name은 loaded입니다.

 secure

 HTTPS에서만 cookie를 사용할 수 있도록 합니다.

 httpOnly

 웹 서버를 통해서만 cookie에 접근할 수 있도록 합니다.

 signed

 cookie가 서명되어야 할 지를 결정합니다.


위와 같은 옵션을 설정하는 방법은 다음과 같습니다:


1
2
3
res.cookie('visitors', visitors, {
    maxAge: 10000
});
cs

cookie 읽기

cookie는 req.cookie.{object_name}에 저장됩니다. 다음 코드는 현재 저장된 cookie 오브젝트의 값을 읽어오는 것입니다:


1
2
3
4
app.get('/currentcounter'function(req, res) {
    var visitors = req.cookies.visitors;
    res.send('Visitors: ' + visitors);
});
cs


 


cookie 업데이트

다음 코드는 해당 cookie 값을 업데이트하는 것입니다:


1
2
3
4
5
6
app.get('/updatevisitors'function(req, res) {
    var new_value = 38;
     
    res.cookie('visitors', new_value);
    res.send('Visitors updated.');
});
cs


visitors 값을 38로 지정하였으며, 개발 도구에서 값을 확인할 수 있습니다:



Signed cookies

서명된 cookie(signed cookie)는 값에 서명이 첨부된 cookie입니다. 서명은 특정 문자열에 의해 생성되며, 다음과 같이 cookie-parse middleware에 의해 지정합니다:


1
app.use(cookieParser('GCHOI'));
cs


서명된 cookie를 사용하려면 다음과 같이 res.cookie() 메써드에 signed 값을 'true'로 지정합니다:


1
2
3
4
5
6
7
8
9
10
11
12
app.get('/visitors'function(req, res) {
    var visitors = req.cookies.visitors || 0;
     
    visitors++;
     
    res.cookie('visitors', visitors, {
        signed: true,
        maxAge: 10000
   });
    
   res.send('Visitors: ' + visitors); 
});
cs


웹 브라우저의 주소창에 http://localhost:3000/visitors를 입력하고 브라우저의 개발 도구의 resource를 살펴보면 다음과 같이 값(Value)이 서명된 값을 확인할 수 있습니다:


cookie 삭제하기

cookie 삭제는 cookie를 생성할 때의 옵션에 따라 다르며, 이를 정리하면 다음과 같습니다:


 생 성

 삭 제

 res.cookie('visitors', 100);

 res.clearCookie('visitors');

 res.cookie('visitors', 100, {path: '/visitors'})

 res.clearCookie('visitors', {path: '/visitors'})

 res.cookie('visitors', 100, {sign : true});

 res.clearCookie('visitors')


이로써 cookie를 이용하여 웹 브라우저에 데이터를 저장하고 불러오고 삭제하는 방법에 대하여 알아보았습니다.


2 Comments
댓글쓰기 폼