들어가기 전

  • 로그인을 구현하기 위해서는 쿠키와 세션에 대한 이해가 필요합니다.

  • 웹에서는 쿠키와 세션을 사용하여 로그인을 유지시키고 있습니다.

1. 쿠키(cookie)란?

 

  • 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 기록정보 파일입니다.

  • 쿠키는 ‘키-값’의 쌍입니다.

  • 쿠키는 프로그램처럼 실행될 수 없고 악성코드를 설치할 수도 없습니다.

  • 하지만 브라우징 행동을 추적하는데에 사용되거나 쿠키를 훔쳐서 해당 사용자의 웹 계정 접근권한을 획득 할 수도 있습니다.

2. 쿠키의 원리

 

  • 서버는 요청에 대한 응답을 할 때 쿠키를 같이 보내줍니다.

  • 서버로부터 쿠키가 오면 쿠키를 저장해두었다가 요청할때마다 쿠키를 같이 보냅니다.

  • 서버에서는 요청에 들어있는 쿠키를 읽어서 사용자를 파악합니다.

출처: 띠그랭님 티스토리

  • 서버는 미리 클라이언트에 쿠키를 보내고 다음부터는 클라이언트로부터 쿠키를 받아 요청자를 파악합니다.

  • 쿠키는 요청과 응답의 헤더에 저장됩니다.

3. 서버에서 직접 쿠키만들어 브라우저에 넣어보기

 

const http = require('http');

const parseCookies = (cookie = '') =>
    cookie
        .split(';')
        .map(v => v.split('='))
        .map(([k, ...vs]) => [k, vs.join('=')])
        .reduce((acc, [k,v]) => {
            acc[k.trim()] = decodeURIComponent(v);
            return acc;
        }, {});

    http.createServer((req, res) => {
        const cookies = parseCookies(req.headers.cookie);
        console.log(req.url, cookies);
        res.writeHead(200, {'Set-Cookie': 'mycookie=test'});
        res.end('Hello Cookie');
    })
        .listen(8082, () => {
            console.log('8082번 포트에서 서버 대기 중입니다!');
        });

코드해석

  • createServer 메서드의 콜백에서는 req객체에 담겨 있는 쿠키를 분석합니다.

  • 쿠키는 req.headers.cookie에 들어 있습니다.

  • req.headers는 요청의 헤더를 의미합니다.

  • 응답의 헤더에 쿠키를 기록해야 하므로 res.writeHead 메서드를 사용합니다.

  • 첫 번째 인자로 200이라는 상태 코드를 넣었습니다.(200은 성공이라는 의미입니다.)

  • 두 번째 인자로 헤더의 내용을 입력합니다.

  • Set-Cookie는 다음과 같은 값의 쿠키를 저장하라는 의미입니다.

  • 응답을 받은 브라우저는 mycookie=test라는 쿠키를 저장합니다.

  • localhost:8082에 접속합니다.

  • req.url은 주소의 path와 search 부분을 알려줍니다.

*HTTP 상태 코드*

  • 2xx: 성공을 알리는 상태코드입니다. 200(성공), 201(작성됨)이 많이 사용됩니다.

  • 3xx: 다른페이지로 이동을 알리는 상태코드입니다. 어떤 주소를 입력했는데 다른 주소의 페이지로 넘어갈 때 이 코드가 사용됩니다. 301(영구 이동), 302(임시 이동)이 있습니다.

  • 4xx: 요청 오류를 나타냅니다. 요청 자체에 오류가 있을 때 표시됩니다. 401(권한 없음), 403(금지됨), 404(찾을 수 없음)이 있습니다.

  • 5xx: 서버 오류를 나타냅니다. 요청은 정상이었지만 서버에 오류가 생겼을 때 발생합니다. 프로그래밍할 때 이 오류가 뜨지않게 주의 해야합니다. 예기치 못한 에러 발생 시 서버가 알아서 5xx대 코드를 보냅니다. 500(내부 서버 오류), 502(불량 게이트웨이), 503(서비스를 사용할 수 없음)이 자주 사용됩니다.

+ Recent posts