Node.js 생활코딩 정리 – Cookie를 이용한 장바구니 만들기

Cookie 이용하기 2번째 장바구니 만들기

 

app_cookie_cart.js

 

var express = require('express');

var cookieParser = require('cookie-parser');//쿠키 파서 사용

var app = express();

app.use(cookieParser());//expressjs API보면 나옴

 

//상품들 리스트 원래는 데이터베이스여야함

var products = {

1:{title:'The history of web 1'},

2:{title:'The next web'}

};

 

//상품들 페이지

app.get('/products', function(req, res){

var output = ``;

for(var name in products){//products는 순회하고 싶은 객체

output += `

<li>

<a href="/cart/${name}">${products[name].title}</a>

</li>`;

//console.log(products[name].title);

}

//send로 html태그를 보냄

res.send(`<h1>Products</h1><ul>${output}</ul><a href="/cart">Cart</a>`);

});

 

app.listen(3003, function(){

console.log('Connected 3003 port!!!');

});

 

실행 화면

첫 화면

 

상품을 클릭하면 /cart/숫자 로 이동한다.

 

 

Cart를 클릭하면 /cart로 이동한다

 

이번에는 상품들을 클릭시 product의 수량을 추가시켜주는 페이지를 만들어 본다.

 

app_cookie_cart.js

 

var express = require('express');

var cookieParser = require('cookie-parser');//쿠키 파서 사용

var app = express();

app.use(cookieParser());//expressjs API보면 나옴

 

//상품들 리스트 원래는 데이터베이스여야함

var products = {

1:{title:'The history of web 1'},

2:{title:'The next web'}

};

 

//상품들 페이지

app.get('/products', function(req, res){

var output = ``;

for(var name in products){//products는 순회하고 싶은 객체

output += `

<li>

<a href="/cart/${name}">${products[name].title}</a>

</li>`;

//console.log(products[name].title);

}

//send로 html태그를 보냄

res.send(`<h1>Products</h1><ul>${output}</ul><a href="/cart">Cart</a>`);

});

 

/*

카트에 넣을 데이터 형식 선언해봄 제품id:구매한수

cart = {

1:2,

2:1

}

*/

app.get('/cart/:id', function(req, res){

var id = req.params.id;

if(req.cookies.cart){//이미 쿠키값이 있다면

var cart = req.cookies.cart;

}else{//최초 실행시

var cart = {};

}

if(!cart[id]){//값이 없으면 초기화해줌

cart[id] = 0;

}

cart[id] = parseInt(cart[id]) + 1;//물건의 수량을 증가시킴 쿠키는 기본적으로 문자이므로 parseInt해야됨

res.cookie('cart', cart);

//res.redirect('/cart');//이동시 cart페이지로 이동

res.send(cart);

});

 

 

app.listen(3003, function(){

console.log('Connected 3003 port!!!');

});

 

실행 화면

다음과 같이 뜨는 첫 화면에서 product를 클릭하면

다음과 같이 출력된다. product번호:수량 으로 출력된다.

한번 더 클릭하면 다음과 같이 카운트가 올라간다.

 

이번에는 상품을 클릭했을 때 카운트가 올라가는 것과 상품명을 출력해주는 /cart 라우팅부분을 구현해보자

 

app_cookie_cart.js

 

var express = require('express');

var cookieParser = require('cookie-parser');//쿠키 파서 사용

var app = express();

app.use(cookieParser());//expressjs API보면 나옴

 

//상품들 리스트 원래는 데이터베이스여야함

var products = {

1:{title:'The history of web 1'},

2:{title:'The next web'}

};

 

//상품들 페이지

app.get('/products', function(req, res){

var output = ``;

for(var name in products){//products는 순회하고 싶은 객체

output += `

<li>

<a href="/cart/${name}">${products[name].title}</a>

</li>`;

//console.log(products[name].title);

}

//send로 html태그를 보냄

res.send(`<h1>Products</h1><ul>${output}</ul><a href="/cart">Cart</a>`);

});

 

/*

카트에 넣을 데이터 형식 선언해봄 제품id:구매한수

cart = {

1:2,

2:1

}

*/

app.get('/cart/:id', function(req, res){

var id = req.params.id;

if(req.cookies.cart){//이미 쿠키값이 있다면

var cart = req.cookies.cart;

}else{//최초 실행시

var cart = {};

}

if(!cart[id]){//값이 없으면 초기화해줌

cart[id] = 0;

}

cart[id] = parseInt(cart[id]) + 1;//물건의 수량을 증가시킴 쿠키는 기본적으로 문자이므로 parseInt해야됨

res.cookie('cart', cart);

res.redirect('/cart');//이동시 cart페이지로 이동

//res.send(cart);

});

 

app.get('/cart', function(req, res){

var cart = req.cookies.cart;

if(!cart){

res.send('Empty cart');

}else{

var output = '';

for(var id in cart){

output += `<li>${products[id].title} (${cart[id]})</li>`;//상품들의 제목들과 수량을 출력해주는 부분

}

}

//편하게 하기 위해 출력해주는 부분

res.send(`

<h1>Cart</h1>

<ul>${output}</ul>

<a href="/products">Products List</a>

`);

});

 

 

app.get('/count', function(req, res){

if(req.cookies.count)//쿠키값이 있다면

var count = parseInt(req.cookies.count);//숫자로 강제로 바꿈

else{//쿠키값이 없다면

var count = 0;

}

count = count + 1;//카운트 값을 올리고

res.cookie('count', count);

res.send('count : '+ req.cookies.count);//cookies객체에 count라는 쿠키값을 가져옴

});

 

app.listen(3003, function(){

console.log('Connected 3003 port!!!');

});

 

 

실행 화면

여기서 상품을 클릭하면

상품명 및 (수량)을 출력해준다.

 

Products List를 누르면 다시 돌아간다.

 

 

출처 : https://opentutorials.org/course/2136