Node.js에서 Cookie값 다루기

안녕하세요 모닝버드입니다. 오늘은 Node.js에서 Cookie 값을 다루는 것에 대해 스터디를 진행했습니다. 웹 프로그래밍에 있어서 Cookie를 언급하면 Session 이란 것도 빼놓을 수 없는데요. 오늘은 쿠키를 중심으로 스터디 내용을 포스팅하고 Session 부분은 다음 번 포스팅 때 다루어 보겠습니다.

# Cookie와 Session을 사용하는 이유

웹을 개발함에 있어서 Cookie와 Session을 사용하는 가장 큰 이유는 바로 Http의 기능적 특성 때문입니다. 장점이라 하면 장점일 수 있고 단점이라 하면 단점인 특성인데요. 바로 Connectionless와 Stateless 이 두 가지 입니다. 얘네 둘을 간단히 설명하자면..

- Connectionless: 클라이언트가 서버에게 요청(Request)을 보내면, 서버는 클라이언트에게 응담(Response)를 한 후 바로 접속(연결)을 끊어 버리는 특성.

- Stateless: 서버와 클라이언트의 접속(연결)을 끊음으로 인해 클라이언트와 서버 사이의 상태정보를 유지할 수 없는 특성

위와 같은 http의 두가지 특성이 때론 장점이 되고 때론 단점이 됩니다. 순간 순간 통신을 끊게 되면 지속적인 리소스를 생성하지 않아 리소스 낭비가 현저히 줄어드는 장점이 있습니다. 하지만 통신을 끊음으로서 클라이언트(사용자들) 측의 상태를 알 수 없을 뿐만 아니라 유지가 불가능하다는 단점이 있습니다. 

한가지 예를 든다면 사용자가 한 서비스 홈페이지에서 서비스 사용을 위해 여러 홈페이지를 드나드는데, 이 때 페이지가 바낄 때마다 통신이 끊김으로서 사용자와 클라이언트간의 상태가 불분명해집니다. 이로 인해 사용자는 페이지 이동 때마다 매번 로그인을 해야 하는 불편을 감수해야 할 것입니다. 바로 이러한 단점을 쿠키과 세션을 통해 해결할 수 있습니다.

# 쿠키란 무엇인가 ? 

- 쿠키는 클라이언트의 하드에 저장되는 키와 값이 들어있는 작은 데이터입니다.

- 쿠키 안에는 이름, 값, 쿠키 저장기간, 경로정보 가 들어있습니다.

- 쿠키는 일정시간동안 데이터를 저장함으로써 사용자의 상태유지(로그인)가 가능합니다.

# Node.js에서 Cookie값 다루기

1. Express api에서 cookie 사용법 확인하기 

http://expressjs.com/en/4x/api.html#req.cookies

- req.cookies()을 사용하기 위해서는 아래의 정보와 같이 cookie-parser라는 미들웨어(모듈)을 따로 설치하여야 합니다. 

2. cookie-parser 모듈 설치하기

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

- npm 홈페이지에 접속하여 cookie-parser을 검색하면 설치하는 방법이 자세히 나와 있습니다.

- 터미널 명령어 : npm install cookie-parser --save

* 명령어 끝에 --save를 붙이는 이유 : cookie-parser 모듈이 PC전역이 아니라 해당 프로젝트 폴더 안에만 설치 되게 하기 위해서이다.

# Cookie를 사용하여 쇼핑카트 만들기 

1. 소스보기

Cookie 값 다루기를 공부하면서 직접 실습해본 내용입니다.  아래 소스상에서 cookieParser(); 안에 있는 문자열은 쿠키를 암호화 하기 위한 키 값입니다. 이 값은 필자의 맘대로 아무 값이나 입력한 것입니다.

var express = require('express');
var app = express();
var cookieParser = require('cookie-parser');

app.listen(4004, () => console.log('hello 4004 port, this is cookie test'));
app.use(cookieParser('akep2do4293402dlf@!#$%'));
app.get('/count', (req, res) => {
  if(req.signedCookies.count) {
    var count = parseInt(req.signedCookies.count);
  } else {
    var count = 0;
  }
  count = count + 1;
  // 쿠키 굽기
  res.cookie('count', count, {signed: true});
  res.send('count : ' + count);
});

// 제품 객체
var products = {
  1: { title: 'The history of web 1' },
  2: { title: 'The next web' }
};

// 제품 목록
app.get('/products', (req, res) => {
  var output = '';
  for(id in products) {
    output += `
      

        ${products[id].title} add
      
    `;
  }
  res.send(`
Product
${output}
Cart`);
});

// 쇼핑카트에 제품 추가하기
app.get('/cart/:id', (req, res) => {
  var id = req.params.id;

  if(req.signedCookies.cart) {
    var cart = req.signedCookies.cart;
  } else {
    var cart = {};
  }

  if(!cart[id]) {
    cart[id] = 0;
  }
  cart[id] = parseInt(cart[id]) + 1;
  res.cookie('cart', cart, {signed: true});
  res.redirect('/cart');
});

// 쇼핑카드 보기
app.get('/cart', (req, res) => {
  var output = '';
  var cart = req.signedCookies.cart;
  for(id in products) {
    output += `
      

        ${products[id].title} - ${cart[id]}
      
    `;
  }
  res.send(`
Cart
${output}
Products List`);
});

2. 실습 내용 (사진)

라우터 바깥쪽에 products라는 객체를 생성하여 2개의 product를 만들었습니다. 이 후 add버튼을 통하여 추가시키면 해당 제품에 대해 count가 발생하고 이 count에 대한 데이터는 cookie 값으로 할당시켜 유지시켜 줍니다.

아래의 사진처럼 제품리스트 오른쪽에 add 버튼을 클릭하면 해당 제품이 추가되고 count는 +1씩 증가합니다. 이 때 count의 +1에 대해 쿠키값으로 처리하도록 요청/응답 합니다. 또한 cookieParser()에서 키값을 할당함으로서 쿠키값을 암호화 했는데요. 아래와 같이 Response header와 Request header에서 각각 set-cookie값과 cookie값을 확인 해 보면 cookie값이 잘 암호화가 된 것을 볼 수 있습니다. 쿠키 값이 만약 그대로 일반 사용자들에게 요청된다면 심각한 보안문제를 초래할 수 있답니다.