[JavaScript, Node.js] 유튜브 클론 정리 7장 (4) - Session, Cookie

머리글

이번 시간에는 세션과 쿠키에 대해서 알아보자.

Session, Cookie

세션이랑 백엔드와 브라우저 간에 어떤 활동을 했는지 기억하는 것을 말한다.
즉, 브라우저와 백엔드 사이의 memory, history와 같은 개념이다.

만약 어떤 사이트에 로그인되어 있다면,
현재 사용하고 있는 브라우저와 그 사이트의 백엔드 사이에 세션이 존재한다는 것이다.

세션에는 보통 2주정도의 유효기간이 존재한다.
만약 기간이 지난다면 로그인을 다시 해주어야 한다.

세션이 작동하려면 백엔드와 브라우저가 서로에 대한 정보를 가지고 있어야 한다.

일반적으로 HTTP 요청을 보내고 처리가 완료되면 그 연결은 종료된다.
연결에 지속성이 없다.
이러한 것을 Stateless 라고 한다.
이 상태에서는 서버와 브라우저 양쪽 모두 유저를 인식할 수가 없다.

따라서 우리는 유저가 백엔드에 요청할 때 누구인지 알기 위한 방법이 필요하다.
그래서 유저가 로그인 할 때 유저에게 쿠키를 발급한다.
유저가 서버에 어떠한 요청을 보낼 때 쿠키를 같이 보내서 유저가 누구인지 구분을 할 수 있다.
그러면 유저에게 정보를 제공할 수 있는 것이다.

우선 세션을 사용해보기 위해 미들웨어를 설치를 해보자.

npm i express-session

이 미들웨어는 express에서 세션을 처리할 수 있게 해준다.

세션을 사용하기 위해서 서버에 import 해주고,
라우터 앞에 미들웨어를 초기화해 주면 사용이 가능하다.

import session from "express-session";
...

app.use(
  session({
    secret: "Hello!",
    resave: true,
    saveUninitialized: true,
  })
);

...
라우터

이런 식으로 사용이 가능하다.

이제 이 미들웨어를 통해 사이트로 오는 모든 유저에 대해서 구분이 가능하다.
로그인을 하지 않아도 가능하다.

그럼 세션을 한 번 확인해 보자.

app.use((req, res, next) => {
  req.sessionStore.all((error, sessions) => {
    console.log(sessions);
    next();
  });
});

서버에 이런 식으로 코드를 작성해 주고,
새로고침을 2번 해주자(1번째 접속에 유저를 기록, 2번째 접속 때 코드가 작동)

이렇게 하면 지금 접속한 유저의 쿠키를 확인할 수가 있다.
다른 브라우저로 접속하면 또 다른 쿠키도 확인이 가능하다.

그런데 지금 세션의 경우 서버를 다시 시작하면 사라진다.
우리가 지금 세션을 메모리에 저장하고 있기 때문이다.

추후에 세션을 MongoDB를 사용하여 연결할 예정이다.

우리는 이 세션에 정보를 추가할 수 있다.

app.get("/add", (req, res, next) => {
    req.session.fake += 1;
    return res.send(`${req.session.fake}`);
};

이렇게 하면 /add라는 주소로 이동할 때,
session에 있는 fake라는 정보가 1이 상승하게 된다.

이러한 방식으로 세션에 유저의 정보를 넣어줄 수 있다.

마무리

이번 시간에는 세션과 쿠키에 대해서 알아보았다.

다음 시간에는 이러한 방법을 이용하여 유저의 로그인을 구현해 보자.