1. 쿠키

인터넷을 이용할때, 로그인 정보, 장바구니 정보등을 저장할 필요가 있는데

그 정보를 서버가 아닌 사용자 컴퓨터에 저장한다.(이게 쿠키다)

때문에 보안에 약하지만 서버입장에선 본인 일을 떠넘긴거니 편하다.

userId=user-1321;userName=sparta

=를 기준으로 왼쪽은 name, 오른쪽은 value 의 형태로 관리 된다.

각 쿠키마다 관리는 ;을 기준으로 관리한다.

 

2. 세션

쿠키를 기반으로 구성된 기술

사용자의 인증여부를 서버가 가지기 때문에 보안성은 좋지만 사용자들이 많아지게 되면 서버입장에선 빡세진다.

 

3. 쿠키 만들기

/set-cookie라는 API를 호출했을 때, 이름은 name, 값은 sparta인 쿠키를 만들어보자

app.get("/set-cookie", (req, res) => {
  const expire = new Date();
  expire.setMinutes(expire.getMinutes() + 60); // 만료 시간을 60분으로 설정합니다.

  res.writeHead(200, {
    'Set-Cookie': `name=sparta; Expires=${expire.toGMTString()}; HttpOnly; Path=/`,
  });
  return res.status(200).end();
});

 

1번째 줄: 메서드는 get, API는 set-cookie다.

2번째 줄: 시간을 하나 만들었다. 이 시간은 쿠키의 유지시간이다.

3번째 줄: setMinutes를 통해 시간을 60분으로 조정했다

 

5번째 줄: writeHead라는 메서드로 쿠키를 만든다.

      200이라는 숫자는 HTTP status code로 200은 제대로 잘 작동했음을 의미한다.

6번째 줄: 키 값은 Set-Cookie, 이름은 name, 값은 sparta으로 한다.

      Expires부터는 쿠키에 속성을 지정해주는 문이다.

      Expires는 만료기간이 언제까지인가 정한다. 뒤에 보면 2번째 줄에 선언한 expire가 있다. toGMTString은 그냥 쿠키 선언을 하기 위한 형식으로 변환해 주는 것이라고 생각하면 된다.

      HttpOnly는 Http에서만 사용할 수 있다는 뜻이다.

      Path는 어디서부터(경로) 사용할 수 있는가 를 정해준다.

마지막 줄: 상태가 제대로 돌아갔음을 응답하고 end를 통해 API를 종료한다.

 

app.get("/set-cookie", (req, res) => {
  const expires = new Date();
  expires.setMinutes(expires.getMinutes() + 60); // 만료 시간을 60분으로 설정합니다.

  res.cookie('name', 'sparta', {
    expires: expires
  });
  return res.status(200).end();
});

이건 바로 위와 동일하나 좀더 간결해서 보기 좋다.

 

 

4. 쿠키 접근하기

 

쿠키는 일반적으로 req.headers.cookie에 들어 있다.

req.headers는 클라이언트가 요청한 Request의 헤더를 의미한다.

app.get("/get-cookie", (req, res) => {
  const cookie = req.headers.cookie;
  console.log(cookie);                                 // name=sparta
  return res.status(200).json({ cookie });
});

2번째 줄: 쿠키를 가져와 cookie라는 변수에 넣었다.

 

자 이걸 console.log에 찍으면 오른쪽 주석처럼 쿠키가 나온다.

실질적으로 쿠키를 사용하기 위해서는 =도 없애주고, 쿠키가 다수라면 ;으로 또 분리를 해줘야 한다.

이런 불편함을 없애기 위해 미들웨어를 써보자

 

5. cookie-parser 미들웨어 적용하기

cookie-parser를 쓰면 req.cookies라는 객체로 만들어 준다

이렇게 객체가 되면 왼쪽은 이름, 오른쪽은 값으로 이루어진 객체가 된다.

 

app.use(cookieParser());

우선, cookieParser를 쓰기 위해 이 코드로 전역 미들웨어를 설정하자

 

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

app.get("/get-cookie", (req, res) => {
  const cookie = req.cookies;
  console.log(cookie); // { name: 'sparta' }
  return res.status(200).json({ cookie });
});

쿠키 접근하기에서 다루었던거랑 동일한 코드이나 위에 뭔가 더 늘었다

cookie-parser를 씀으로써 몇가지 불편한 사항이 없어진 것이다.

당장은 이해가 잘 안되지만 편의성 개선 기능이니 쓰다보면 이해가 될 것이다.

 

6. 세션 만들기

쿠키는 서버를 재시작하거나 새로고침해도 로그인이 유지가 된다.

그 계산을 모두 사용자 컴퓨터가 하기 때문이다.

물론 이건 서버입장에선 엄청난 위험부담 행위다.

서버가 뻗은 사이, 쿠키는 얼마든지 조작되거나 노출될 수 있기 때문이다.

이를 막기 위해 우리는 세션을 사용한다.

세션을 만들어보자

 

let session = {};
app.get('/set-session', function (req, res, next) {
  const name = 'sparta';
  const uniqueInt = Date.now();
  session[uniqueInt] = { name };

  res.cookie('sessionKey', uniqueInt);
  return res.status(200).end();
});

1번째 줄: 우선 세션을 쓰겠다고 선언했다

2번째 줄:

3번째 줄: 일단 이름은 sparta로 한다.

4번째 줄: 현재 시간을 나타내는 변수를 사용하며 이름은 uniqueInt이다.

5번째 줄: 1번째 줄에서 선언한 그 변수에 4번째 줄에서 선언한 시간을 "키"로 넣는다. 3번째 줄에서 선언한 이름도 넣는다.

           이로써 이름과 시간이 들어감에 따라 유니크한 세션이 되었다.

7번째 줄: 1번째 줄의 session에 할당된 객체를 사용자에게 전달할 때는 sessionKey라는 키로 전달된다.

 

이로써 전달받은 쿠키에는 아무런 정보가 없고 그저 서버가 사용자를 구분하는 용도로만 사용된다.

 

좀더 알기쉽게 설명하자면

사용자에겐 sessionKey라는 문자열과 uniqueInt의 변수값이 전달된다.

그리고 이것을 다시 사용자가 서버에게 전달하면

서버는 uniqueInt 값이 무엇인지 확인하고 그것을 바탕으로 사용자를 구분한다.

일종의 주민번호 같은 개념인듯 하다

 

get-session API

app.get('/get-session', function (req, res, next) {
  const { sessionKey } = req.cookies;
  const name = session[sessionKey];
  return res.status(200).json({ name });
});

req.cookies를 통해서 sessionKey에 해당하는 쿠키를 가지고 오고

가지고 온 sessionKey를 session에서 찾는다.

만약 존재한다면 그것을 name변수에 할당한다.

그리고 return을 통해서 실제 사용자에게 전달해 준다.

만약 없다면 에러나 null값을 전달하던지 등을 지정해주어야 한다.

 

 

 

+ Recent posts