쿠키와 인증 - 실습 준비, 쿠키의 생성/읽기/활용

개인화 - 사람마다 다른 웹페이지를 보여주는 것 ( ex. 장바구니, 로그인 유지 )

쿠키를 이용하여 사용자가 이전에 이용했던 정보를 웹 서버에 전달

웹 서버는 그 정보를 바탕으로 접속한 사람이 누구인지 알아냄

 

*** Cookie & Auth 수업은 교육용이므로 현실에서 이용하기에는 생략된 부분이 많음, 맥락을 파악하고 후속 수업으로 현실에서 인증을 구현하자.

 

 

쿠키의 생성

 

쿠키는 HTTP 프로토콜에 포함된 기술

쿠키의 용도: 인증 / 개인화 / 방문자의 상태 check

 

cookie 디렉토리를 생성하고 그 안에 cookie.js를 만들어주었다.

 

쿠키를 만들기 위해서는 응답 메시지를 조작해야한다.

const http = require('http');
http.createServer(function(request, response){
    response.writeHead(200, {
        'Set-Cookie': ['yummy_cookie=choco', 'tasty_cookie=strawberry']
    });
    response.end('Cookie!!');
}).listen(3000);

response.writeHead 함수의 두번째 인자로 객체를 주어서 쿠키를 생성했다.

쿠키를 여러 개 생성하고 싶을 때는 'Set-Cookie'를 배열로 하면 된다.

 

서버를 열고 reload를 하면,

쿠키가 생성된 것을 볼 수 있다.

 

위 코드는 쿠키를 보내는 것이고 다시 reload를 하면

request에도 쿠키가 전달된 것을 볼 수 있다.

 

 

쿠키의 읽기

 

쿠키를 요청했을 때 웹 브라우저 안에서 어떻게 알아낼 수 있는가?

 

const http = require('http');
http.createServer(function(request, response){
    console.log(request.headers.cookie);
    response.writeHead(200, {
        'Set-Cookie': ['yummy_cookie=choco', 'tasty_cookie=strawberry']
    });
    response.end('Cookie!!');
}).listen(3000);

request.headers.cookie를 이용하여 쿠키 값이 출력되는 것을 볼 수 있다.

 

npm에서 cookie 모듈을 다운받아 사용해보자.

npm install --save cookie

 

const http = require('http');
const cookie = require('cookie');

http.createServer(function(request, response){
    console.log(request.headers.cookie);
    var cookies = cookie.parse(request.headers.cookie);
    console.log(cookies);
    response.writeHead(200, {
        'Set-Cookie': ['yummy_cookie=choco', 'tasty_cookie=strawberry']
    });
    response.end('Cookie!!');
}).listen(3000);

앞에서 전달받은 쿠키들은 문자열이었기 때문에 코딩을 하며 이를 다루기 어려운 점이 있다.

쿠키 모듈의 parse 메서드를 이용하면 우리가 전달받은 쿠키들을 객체 형식으로 반환하여 준다. 위와 같이 코드를 수정하여 결과를 비교해보자.

 

 

console.log(cookies.yummy_cookie);

이렇게 yummy_cookie에 대한 값만 받아오는 것도 가능하다.

 

const http = require('http');
const cookie = require('cookie');

http.createServer(function(request, response){
    var cookies = {};
    if(request.headers.cookie !== undefined){
        var cookies = cookie.parse(request.headers.cookie);
    }
    console.log(cookies.yummy_cookie);
    response.writeHead(200, {
        'Set-Cookie': ['yummy_cookie=choco', 'tasty_cookie=strawberry']
    });
    response.end('Cookie!!');
}).listen(3000);

쿠키를 삭제하면, request.headers.cookies의 값은 undefined가 된다.

그러나 parse 메서드는 undefined를 처리하지 못해 reload를 했을 때 웹 페이지에 에러가 날 것이다.

이를 방지하기 위해 cookies 변수를 빈 객체로 만들어주고, if문으로 request.headers.cookies의 값이 undefined가 아닐 때만 처리하도록 만들어주자.

 

 

쿠키의 활용

 

( 위에서 끌올 ) 쿠키의 용도: 인증 / 개인화 / 방문자의 상태 check

 

• 언어 설정을 한국어로 한번 설정하면 다시 들어갔을 때도 한국어로 나옴

https://developer.mozilla.org/en-US/docs/Web/HTTP 에서 언어를 바꿔보자.

 

개발자 도구를 이용하여 쿠키를 보면 처음엔 en-US인 것을 알 수 있다.

 

여기서 언어를 한국어로 바꾸면,

ko로 쿠키가 바뀐 것을 확인할 수 있다. 그리고 다시 들어갔을 때도, 사이트의 언어가 한국어로 뜬다.

 

• 로그인 > sessionid라는 쿠키가 생김, sessionid의 값을 입력하면 로그인 가능