Sessions and Cookies #01

이번에는 유저를 기억하게 만들어 보는걸 할거다.

기억한다는게 무슨 말이냐면 로그인 되었다는걸 볼수 있고, Dashboard탭에 들어갈수도 있다.

프로필 화면으로 가서 email을 수정 할수도 있다.

유저가 누구인지 웹사이트가 알고 있기 때문에 가능 한거다.

유튜브도 마찬가지 이다. 누군인지 아니까 어떤 채널을 구독했는지 확인 할수 있는 거다.

이 로그인 개념을 설명할 필요도 없을 거다. 어떤 유저가 로그인 했는지 기억하는게 다이다.

유저를 기억하는 방법 중 한가지는 유저에게 쿠키를 보내주는 거다.

쿠키를 이해하기 위해서는 우선 세션에 대해 알아야 한다.

세션이 뭐냐면 백엔드와 브라우저 간에 어떤 활동을 했는지 기억하는걸 말한다.

예를 들어 웹사이트에 로그인 되어 있다면 현재 사용하고 있는 브라우저와 백엔드 사이에

세션이 존재하는 거다. 그런데 2주 정도 후에는 세션이 사라질거다. 세션이 없어지는 거다.

그러면 다시 로그인을 해야 한다. 세션은 브라우저와 백엔드 사이의 memory,history같은 거다.

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

왜냐하면 로그인 페이지에서 HTTP 요청을 하면 요청이 처리되고 끝나게 되는데

그 이후로는 백엔드가 아무것도 할수 없다. 백엔드와 브라우저 모두 아무것도 하지 못한다.

예를 들어 Home화면으로 이동하면 GET요청을 보내게 되는데 백엔드가 HTML을

render하고 나면 연결이 끝나는 거다. 계속 연결이 유지 되지 않는다.

이 때부터는 연결된게 아니다. 계속 연결이 유지되어 있는 WIFI랑은 다르다.

여기서는 그렇게 연결이 유지되지 않는다. 요청을 받고 처리를 끝내면 서버에서는 누가 요청을 보냈는지

잊어버리게 되고 브라우저도 마찬가지로 잊어버리게 된다. 서버가 더 이상 필요 없게 된다.

이런걸 stateless(무상태)라고 한다. 한번 연결이 되었다가 끝나는거다.

이 둘 사이 연결에 state가 없는 거다. 한번 연결하고 끝나는 거다.

그래서 유저한테 어떤 정보를 남겨줘야 한다. 유저가 백엔드에 뭔가 요청 할때 마다 누가 요청하는지

알수 있게 해야 한다. 그래서 유저가 로그인 할때마다 유저한테 뭔가 줘야 한다.

조그만한 텍스트 같은걸 말이다. 이게 너의 텍스트니까 잘가지고 있으라고 알려주고

유저가 요청을 보낼때 마다 그 텍스트를 같이 보내달라고 하는 거다.

그걸 받아서 해당 유저 인걸 확인하는 거다. 그 유저의 정보를 보여 줄수 있는거다.

헷갈린다면 세션을 직접 써보고 이 텍스트가 뭔지에 대해 알아보도록 한다.

중요한건 유저가 로그인 할때 유저한테 어떤 텍스트를 준다는 거다.

아직은 이게 뭔지 모르지만 유저가 누구인지 알수 있게 해주는 뭔가 일거다.

그리고 유저한테는 요청을 보낼때 마다 그 텍스트를 같이 보내달라고 할거다.

middelware를 설치해서 어떻게 작동하는 건지 알아 보도록 한다.

이 middleware는 express에서 세션을 처리 할수 있게 해준다.

https://www.npmjs.com/package/express-session

설치해 보도록 한다. vsc 콘솔에서 npm i express-session 입력해준다.

이제 server에서 session을 import 해준다.

import session from "express-session";
app.set("view engine", "pug");
app.set("views", process.cwd() + "/src/views");
app.use(logger);
app.use(express.urlencoded({ extended: true }));

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

app.use("/", rootRouter);
app.use("/videos", videoRouter);
app.use("/users", userRouter);

export default app;

이제 이middelware를 router앞에 초기화 해주면 된다. router 앞에서 말이다.

그리고 app.use(session)을 써주고 이 안에 secret이라는 설정을 해줘야 하는데

일단 지금은 "Hello!"라고 한다. 나중에는 이 secret을 말 그대로 아무도 모르는 문자열로 쓸거다.

지금은 이렇게 한다. 그리고 콘솔에 나타날 2가지를 추가한다.

하나는 resave라는 건데 true라 하고, 다른 하나는 saveUninitialized인데

이것도 true라 한다.

이렇게 session middleware를 추가해 봤다.

이제 이 middleware가 사이트로 들어오는 모두를 기억하게 될거다.

로그인 하지 않았어도 기억하게 될거다. 들어온 사람들한테 어떤 텍스트를 주고

그 텍스트를 가지고 유저가 누구인지 알아낼거다. 계속 설명했던 텍스트라는걸 알아보도록 한다.

홈페이지에서 inspect를 하고 Application탭에 들어가면 Cookies, localhost:4000이 있다.

아직 쿠키는 없다. 새로고침을 안했기 때문이다. 이제 새로고침을 하면 브라우저가 서버에 요청을 보내고

서버에서는 session``middleware가 브라우저한테 텍스트를 보낼거다.

서버가 브라우저를 개별적으로 기억할 수 있게 말이다. 새로고침을 해보면 이상한 텍스트가 생겼다.

아직 이게 뭔지 헷갈릴 수 있다. 아예 이해가 안 될수도 있다.

그런데 새로고침을 할 때마다 백엔드(localhost)에 요청을 보낼때 마다 이 텍스트가

백엔드로 같이 보내질거다. 브라우저가 알아서 백엔드로 쿠키를 보내도록 되어 있다.

이 쿠키로는 무엇을 할 수 있을까? middelware를 하나 만들어서 설명해 보겠다.

app.use((req, res, next) => {
  console.log(req.headers);
  next();
});

이 middleware에는 req,res,next가 있다. 그리고 req.header를

console.log 해본다. 그리고 next()를 호출해본다.

이렇게 하면 쿠키가 어떻게 나오는지 보도록 한다. 새로고침하고 콘솔을 확인하면 Cookie가 나온다.

Cookie의 이름도 나온다. 원하든 원하지 않든 브라우저를 새로고침 할 때마다

백엔드에서 Cookie를 받고 있다. 이게 정말 쓸모 있는거다.

유저가 웹사이트에 처음 들어왔을 때 이상한 텍스트를 보내주었다.

그러면 이제 이 텍스트의 내용이 뭔지 궁금할거다.

이걸 설명하기 위해 또 다른 middleware를 만들어 보도록 한다.

그러고 나면 이 이상한 텍스트가 뭘 하는지 이해하게 될거다.

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

이제 이렇게 해주고 나면 콘솔에서는 뭐가 나오게 되냐면 백엔드가 기억하고 있는

session을 console.log한걸 보게 될거다.

백엔드가 기억하고 있는 유저들을 말이다. 새로고침해서 확인해 본다.

보다시피 지금은 백엔드가 어떤 유저도 기억하고 있지 않다. 한번더 새로고침을 해본다.

이제는 백엔드가 어떤 유저를 기억하고 있다. 텍스트의 시작 부분을 살펴본다.

콘솔에 있는 텍스트와 Application에 보여주는 텍스트가 같다.

아마도 백엔드에 세션이 있다고 알려주는것 같다.

그리고 사용하는 브라우저에서 id가 이거라는 것 같다.

이게 진짜(?)인지 확인해 보도록 한다.

현재 브라우저 말고 다른 브라우저를 열어본다. 똑같이 inspect를 하고 Application탭에 들어가면

Cookies, localhost:4000에서 확인해 본다. 보다시피 쿠키가 생겼다.

그런데 시작 부분이 다르다. 이제 다시 백엔드로 돌아가서 보면 세션에 두명의 유저를 기억하고 있다고 나오고 있다.

보다시피 백엔드가 누가 자기한테 요청을 했는지 기억하고 있다.

백엔드가 요청을 보내는 유저한테 이 이상한 id를 보내고 있는거다.

크롬에서는 이걸 id로 알고 있고 다른 브라우저에서는 다른 id로 알고 있는거다.

백엔드에서 두명의 유저를 기억하고 있다는 사실을 알고 있으면 된다.

이걸 세션이라 하는데 지금은 2개의 세션이 있다.

이게 바로 백엔드가 id를 통해서 기억하는 방식이다. 쿠키 안에 id가 있다.

다음 파트에서는 세션에 기반해 프론트엔드에 내용 표시하는걸 만들어 볼거다.