5. http 모듈로 서버 만들기 (3) - 쿠키와 세션의 이해 [2]

 

 

 

 

 

앞선 아티클에서 쿠키가 오고가는 과정을 간략하게 설명했습니다. 서버가 브라우저에게 전달하는 쿠키는 res의 헤더(Set-Cookie)에 담겨 브라우저에 전달되고, 브라우저가 저장하게 됩니다. 그리고 브라우저가 서버에게 req를 보낼 때 req의 헤더(Cookie)에 담겨 전달하게 됩니다.

 

 

5. http 모듈로 서버 만들기 (3) - 쿠키와 세션의 이해 [1]

 

 

이제 아래 예제에서, 직접 쿠키를 생성해 요청한 대상의 브라우저에 해당 정보를 보내보겠습니다. 다시 한번 설명하지만, 쿠키는 요청자를 '식별'하기 위한 정보입니다. 

 

 

[cookie.js]

const http = require('http');

http.createServer((req, res) => {
    console.log(req.url, req.headers.cookie);
    res.writeHead(200, { 'set-cookie': 'mycookie=test' });
    res.end('Hello Cookie');
})
    .listen(8083, () => {
     console.log('8083번 포트 대기 중');
    });

/* 출력
8083번 포트 대기 중
*/

 

 

위와 같이 cookie.js를 실행해 서버를 실행하고나면 콘솔에서는 '8083번 포트 대기 중'이라는 메시지를 확인할 수 있습니다. 이 상태에서, 브라우저에 http://localhost:8083을 실행하게 되면 어떻게 될까요?

 

일단 브라우저 화면에는 "Hello Cookie"라는 텍스트만 덩그러니 출력되는 것을 확인할 수 있습니다. 이 때 콘솔을 확인해보면, 아래와 같은 메시지가 출력되는 것을 확인할 수 있습니다. 

 

/ undefined
/favicon.ico mycookie=test

 

 

코드에 따라 차근차근 설명해 보겠습니다. 우선, 콘솔 화면에 찍힌 라인은 console.log(req.url, req.headers.cookie);로 인해 생성된 라인입니다. 즉, 맨 위의 / undefined는 ('/')를 요청한 것을 의미합니다. 그리고 이 요청과 함께 req.headers.cookie 즉 req의 헤더에 저장된 쿠키 정보를 출력한 것입니다. 그런데 설명했다시피 최초의 req에는 쿠키 정보가 없습니다. 그래서 undefined가 출력되었습니다.

 

하지만 이렇게 최초의 req가 갔기 때문에, 서버에서는 res를 보내며 'mycookie=test'를 보냈습니다. 그래서 이미 쿠키 값을 브라우저는 저장한 상태가 되죠. 

 

그런데 여기서 예상치 못한 일이 하나 벌어집니다. 바로 'favicon'이라는 요청이 자동으로 발생하는 것이죠. favicon은 웹사이트 탭에 보이는 이미지를 의미하는데, 이것 파비콘 정보가 HTML에서 확인이 불가능할 경우 브라우저는 자동으로 서버에 파비콘 정보를 요구하는 req를 보내게 됩니다. 이때, 두 번째 req가 발생하면서 여기는 이미 저장해둔 쿠키 정보를 출력할 수 있게 되는 것입니다.