[생활코딩] NodeJs 활용하기(1)

HTTP

: 브라우저와 서버가 소통(request, response message)하는 통신 방법 - stateless

 

 

Cookie

: 서버에서 전의 기록을 저장

→ session → 인증으로 확장될 수 있음

 

이런 식으로 확인할 수 있다

Network에서 확인을 하면 Set-Cookie를 볼 수 있다는데 나는.. 없다.. 쿠키가.. 왜지?? 아 ^.^ 알고보니 따로 다운해줘야 사용할 수 있다고 한다 ( 그거슨 뒤에... )

 

request의 헤더에서도 cookie 부분의 count가 1로 되어있는 것을 볼 수 있다

 

이제 Nodejs를 이용해서 count의 수를 늘려가면서 response 헤더를 통해 브라우저에서 세팅하라고 명령한다

그리고  브라우저는 서버의 명령에 따라 다음에 방문했을 때 count를 2로 바꾼다

 

 

!! 쿠키를 사용하기 위해 어떤 게 필요한지 알아보면 !!

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

Express 4.x - API Reference

 

cookie-parser를 설치해준다

 

let cookieParser = require('cookie-parser');
app.use(cookieParser());

그리고 js 파일에 이렇게 cookie를 사용하기 위한 기본적인 부분을 추가해준다

 

app.get('/count', function(req, res){
    let count = parseInt(req.cookies.count); //문자를 숫자로
    if(!req.cookies.count){ // cookie의 값이 없다면
        count=0;
    }
    count = count+1;
    res.cookie('count', count);
    res.send('count : '+ count);
})

/count로 접근했을 때 count를 보여주기 위해서 req.cookies.count 를 통해 cookie의 count에 접근해서 화면에 출력해준다

 

req.cookie.count의 값이 없다면 count 개수를 0으로 설정해준다

 

강의에서는 var를 사용해서 변수 선언의 위치가 상관없었지만 let을 사용하려면 변수 선언을 가장 위에서 해줘야 한다

 

방문 횟수가 증가할 때마다 res.cookie를 사용해서 count를 1씩 증가시켜주고, 화면에 출력해준다

 

↓↓↓ 그 결과

짜라란! 나도 이제 Set-Cookie 생겼당

리로드해주면 request의 cookie count가 1로 설정된 걸 볼 수 있다

 

 

let products = {
    1:{title: 'The history of web 1'},
    2:{title: 'The next web'}
};

app.get('/products', function(req, res){
    let output='';
    for(let name in products){
        output += `
            <li>
                <a href="/cart/${name}">${products[name].title}</a>
            </li>
        `
    }
    res.send(`<h1>Products</h1><ul>${output}</ul><a href="/cart">Cart</a>`);
})

이 부분은 강의가 잠겨있어서 일단 코드만 따라 썼다

 

여기서 products 객체는 id 값에 해당하는 title의 값이 담겨있다

/product를 get 방식으로 라우트 해주고! 반복문을 돌려서 1, 2의 title을 화면에 보여주고, url으로 연결해주었다

마지막으로 cart 페이지에도 연결해주었다

 

 

이제 각 링크를 클릭했을 때의 페이지를 라우트 해준다

app.get('/cart/:id', function(req, res){
    let id = req.params.id;
    let cart;
    let cart = req.cookies.cart;
    if(!req.cookies.cart){
        cart = {}; // 빈 객체 - 정보 x -> 한번만
    }
    if(!cart[id]){ //없는 id에 접근하면
        cart[id] = 0; // cnt 0으로 설정
    }
    cart[id] = parseInt(cart[id])+1; // 해당 url의 count 더하기
    res.cookie('cart', cart); // 사용자의 컴퓨터에 cart 객체 심기
    res.send(cart);
})

cookie cart가 있다면 cart에 그대로 대입, 없다면 최초로 실행되었다는 것이기 때문에 객체 생성!

id가 없는 cart라면 0으로 설정해주고, 현재 cart에서 1을 더해준다

 

이것처럼 cart 객체를 출력해보면 id가 1인 사이트엔 2번, id가 2인 사이트엔 4번 방문했다는 것을 알 수 있다

 

 res.redirect('/cart');

그리고 cart 페이지로 보내기

 

 

다음으로는 cart 페이지 라우트 하기!

app.get('/cart', function(req, res){
   let cart = req.cookies.cart;
   let output='';
   if(!cart){
       res.send('Empty!');
   }
   else{
       for(let 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>`)
})

cart가 비어있으면 비어있다는 것을 알려주고,

그렇지 않다면 반복문을 이용해 물품의 이름과 카트의 수를 output에 담아준다

 

그리고 마지막으로 output을 출력해주고 products 페이지로 이동하는 버튼을 만들어주면 된다

 

↓↓↓ 그 결과

 

 

마지막으로 보안과 관련된 쿠키!!

 

→ cookie를 주고받을 때 https 방식으로 통신하는 것이 좋다 (이해할 수 없는 방식으로 소통)

 

→ cookie 값 자체를 암호화: app.use(cookieParser('134123jrehfds**(&#94'));

이런 식으로 cookieParser를 사용하는 부분에 아무 값을 입력해주면 저게 key 값이 된다

그리고 /count에서 count를 하는 방법 또한 바꿔주면 된다

app.use(cookieParser('134123jrehfds**(&#94'));

app.get('/count', function(req, res){
    let count = parseInt(req.signedCookies.count); //문자를 숫자로
    if(!req.signedCookies.count){ // cookie의 값이 없다면
        count=0;
    }
    count = count+1;
    res.cookie('count', count, {signed: true});
    res.send('count : '+ count);
})

req.cookies를 쓰던 부분을 req.signedCookies로, cookie를 만들어 주던 부분의 3번째 인자로

{signed: true}를 추가해준다

 

 

처음과 다르게 Set-Cookie에서 count의 값이 숫자가 아니고 암호화된 정보로 바뀐다!

 

 

 

---

오늘 은 여기까 지 ! !!!

 

하아ㅜㅜ 요즘 교환학생, 휴학, 라피신 등등 때메 머리가 아프다 휴

어떻게 해야될지 더 고민해봐야겠다

 

4일에 라피신 결정되고!

18일에 수강신청하고 결정될 듯!!

 

오늘부터 아침마다 월~금 토익 학원 가야되는데 과제가 넘 많아ㅠㅠㅠㅠ ;ㅅ;

 

나 프로젝트도 해야대는디ㅠㅠㅠ