Cookie (쿠키) 와 counter 기본 예제 (with Nodejs)

쿠키

예1 ) 웹사이트를 방문했을 때, 로그인을 합니다. 다시 웹사이트를 방문했을 때 로그인 된 상태가 유지되고 있다.

이는 사용자가 접속했을 때만 로그인되었다는 사실을 서버쪽에서 알고 있는 것.

예2 ) 쇼핑몰에서 장바구니에 담긴 아이템을 기억하는 것.

• 쿠키 자체가 활용도가 높다 : 잘 쓰면 좋다.
• 그런데 쿠키를 기초로 해서 이어서 '세션'을 이해해야한다.
• 인증(회원가입, 로그인 등)과 관련된 부분의 가장 기초적인 부분 :'인증'이 없다면 사용자에게 개인화(최적화)된 일을 할 수 없고, 보안도 떨어진다.
• 같은 사이트인데 접속한 브라우저마다 (= 사용자마다) 다른 상태를 유지할 수 있다.
• 쿠키를 제거하는 방법 : resource탭에서 쿠키항목에서 해당 쿠키 이름을 삭제하면 된다.

< 간단한 Counter 애플리케이션 만들기 >

Line 3 : 쿠키를 구현하기 위해서, 쿠키 기능을 제공하는 모듈 필요. express는 쿠키 기능을 기본적으로 가지고 있지 않기 때문.

Line 3, 6 : expressjs의 문서에서 API reference를 읽어보면 cookie-parser라는 미들웨어가 필요하다는 것을 확인할 수 있다.

문서에 의해 cookie-parser를 설치하고 사용하는 코드를 추가해보자.

* cookie-parser : 쿠키 정보를 가지고 있는 요청이 들어오면, cookie-parser가 중간에서 이를 해석하여 Response객체를 통해 쿠키 관련 작업을 할 수 있게 해주는 라이브러리.

npm install cookie-parser --save

/count로 접속했을 때, 쿠키 정보 셋팅.

• 웹서버에서 웹브라우저에게 응답할 때, 'counter'라고 하는 쿠키의 값을 1로 셋팅해서 그것을 웹브라우저에게 보낼 것이다.
  (응답할때 보낸다 = response )
• res.cookie('쿠키이름', '값'); 이 값을 지정해준다음에 네트워크탭을 새로고침 해보면, 처음에는 없었던 Response Headers에 Set-cookie, count=1 이 들어가 있는 것을 볼 수 있다. 웹브라우저는 이를 받아서 카운트가 1이라는 값을 저장해두는 것이다.

두번이상 접속하면 Request Headers에 Cookie라는 항목 끝에 count=1 이라는 값이 들어가 있는 것을 볼 수 있다.

웹브라우저가 웹서버에게 count=1이라는 값을 전송한 것이다.

그럼 어떻게 웹브라우저가 전송한 쿠키값을 웹서버는 어떻게 가져올까? (request) req.cookies.쿠키네임

* 같은 주소에 한해서만 쿠키가 유효하다. ( = 다른 주소로 들어왔을 때는 쿠키가 축적되지 않는다 )

Line 11 : localhost:3003/count 로 접속할 때마다 숫자가 증가.

Line 12 - 16 : 웹브라우저에서 요청한 값 req.cookies.count (한번도 쿠키를 구운적이 없다면 웹브라우저는 어떤 값도 주지 않을 것이다. = count 값이 없을 수도 있다. 그래서 값이 없을 때를 가정해주어야 한다.

Line 13 : 사용자가 요청한 쿠키의 값은 사실 문자이다. 그래서 1이라는 숫자를 전달해도 올때는 문자로 온다.  그래서 강제로 숫자화 해야한다. (parseInt() : 자바스크립트에 어떤 값을 숫자로 강제로 바꿔주는 함수.)

Line 17-18 : 기존의 카운트 값의 +1 해준 값이 쿠킹된다.

Line 19 : 그리고 그렇게 올라간 값을 화면에 출력해준다.