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

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

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

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

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

app.use(cookieParser());

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

cookie 생성하기

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

app.get('/visotors', function(req, res) {
    var visitors = req.cookies.visitors || 0;
     
    visitors++;
     
    res.cookie('visitors', visitors, {
        maxAge: 10000
   });
    
   res.send('visitors: ' + visitors); 
});

웹브라우저의 개발도구에서 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가 서명되어야 할 지를 결정합니다.

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

res.cookie('visitors', visitors, {
    maxAge: 10000
});

cookie 읽기

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

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

 

cookie 업데이트

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

app.get('/updatevisitors', function(req, res) {
    var new_value = 38;
     
    res.cookie('visitors', new_value);
    res.send('Visitors updated.');
});

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

Signed cookies

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

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

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

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); 
});

웹 브라우저의 주소창에 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를 이용하여 웹 브라우저에 데이터를 저장하고 불러오고 삭제하는 방법에 대하여 알아보았습니다.