Sessions and Cookies #02

일단 server를 저장하고 재시작하면 어떻게 되는지 본다.

세션이 모두 사라지게 된다. 왜냐하면 express가 세션을 메모리에 저장하고 있기 때문이다.

그래서 서버를 재시작 할때 마다 세션이 사라지는 거다. 서버가 계속 잊어버리는거다.

fake DB를 만들었을때처럼 세션도 그렇게 되고 있는거다.

나중에는 백엔드가 잊지 않도록 세션을 mongoDB와 연결해 볼거다.

지금은 코드들 저장 할때마다 서버가 세션을 잊어버린다.

이제 백엔드가 쿠키를 가지고 어떻게 브라우저를 구분하는지 보도록 한다.

이전 파트에서 백엔드가 브라우저한테 이해할수 없는 텍스트를 보내는걸 봤다.

그런데 이 텍스트가 백엔드에서 세션 id로 사용되고 있었다.

백엔드의 메모리에 세션을 저장할 수 있는 DB가 생긴거다.

백엔드의 각 세션들은 id를 가지고 있었고 그 id를 브라우저한테 보냈다.

그러면 브라우저가 요청을 보낼때마다 그 id를 같이 보내준다.

브라우저와 일치하는 세션이 뭔지 알수 있고, 어떤세션이 다른 브라우저와 일치하는지도 알수 있었다.

서로 다른 브라우저에서는 서로 다른 쿠키를 가지고 있기 때문이다.

정리를 해보면 세션과 세션 id는 브라우저를 기억하는 방식중 하나이다.

그리고 브라우저와 백엔드 사이에는 WIFI처럼 유지되는 연결이 없으니까

백엔드에 요청을 보낼때 마다 id를 같이 보내줘야 한다.

그러면 백엔드가 기억 할수 있는거다. 그리고 세션 id를 가지고 있으면 세션 object에 정보를 추가 할수 있다.

새로고침을 해보면 현재 백엔드에 등록된 세션이 console.log 되는걸 볼수 있다.

한번더 새로고침을 하면 2개를 볼수 있다. 이제 세션을 저장 할수 있는 DB같은게 생긴거다.

무슨 말이냐면 DB에 정보를 넣을수 있다는 말이다. 세션을 위한 정보를 넣을수 있다는 거다.

예를 들어 숫자나 유저의 id같은 정보를 넣을수가 있다.

원하는 모든 정보를 넣을 수있는데 이 세션에서만 공유 될거다.

이번에는 아주 빠르게 URL을 하나 만들어 본다.

app.get("/add-one", (req, res, next) => {
  return res.send(`${req.session.id}`);
});

get을 써서 req,res,next를 받으면 이 url은 한가지 기능을 하게 만들거다.

res를 return해서 req.session.id를 담은 텍스트를 send한다.

이 URL을 /add-one이라고 한다. 그러면 이제 /add-one으로 가본다.

보다시피 세션id가 보이고 있다. 다른 브라우저에서도 확인해 본다. 다른 세션 id가 나오고 있다.

서로 다른 id가 나왔다. 브라우저마다 서로 다른 세션 id를 가진 텍스트를 보내고 있다.

말했다시피 이 세션 id가 쿠키에도 있다는건 그냥 우연이 아니다.

앞서 봤다시피 정말 간단하다. 서버가 브라우저한테 세션 id를 주고 있다.

그리고 브라우저가 요청을 보낼때 마다 쿠키에서 세션 id를 가져와 보내주는거다.

그러면 서버가 그 세션 id를 읽고 누군지 알수 있는거다. 어떤 브라우저인지도 알수 있다.

한가지 더 하고 싶은게 있다. 여기에 카운터(counter)를 만들어 본다.

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

여기있는 세션은 javascript object이다. 말그대로 javascript object일 뿐이다.

{
    cookie: { originalMaxAge: null, expires: null, httpOnly: true, path: '/' }
  },

그리고 서로 다른 브라우저에서 req.session.id가 다르다는 것도 봤다.

그러면 어떤 정보를 javascript object에 넣어 본다.

req.session을 쓰고 potato라는걸 추가해보았다.

potato에는 + = 1이라고 썼다. 세션 object안에 potato를 만들었다.

이제 세션 안에 있는 potato에 1을 더하면 어떻게 나오는지 본다.

새로고침하면 보이다시피 id가 바뀌었다. 왜냐하면 코드를 저장 할때마다 서버에서 세션을

없애고 새로 만들기 때문이다.

이 문제는 걱정할 필요가 없다. 나중에는 실제 DB에 연결 할거다. 일단 지금은 세션이 사라진다.

그리고 req.session.potato를 보내본다.

app.get("/add-one", (req, res, next) => {
  req.session.potato += 1;
  return res.send(`${req.session.id}\n${req.session.potato}`);
});

뭐가 나오는지 살펴 본다. 새로고침하면 보다시피 NaN(Not a Number)가 나온다.

이제 다시 새로고침을 해본다. 새로고침 할때마다 카운터가 쌓인다.

콘솔을 보면 potato가 새로고침한 만큼 숫자인 세션이 있다.

다른 브라우저에서도 새로고침한 만큼의 숫자 세션이 있다. 보다시피 백엔드가 브라우저한테 id를 주고 있다.

그리고 브라우저가 /add-one..뿐만 아니라 서버의 모든 URL을 방문할때 마다

브라우저가 받았던 id를 요청에 담아 보낼거다. 이 모든걸 알아서 처리한다.

브라우저한테 준 id를 요청에 담아 보내주고 있다는걸 꼭 기억하자.

데이터를 보내줬던 id를 백엔드에 요청을 보낼때마다 같이 보내고 있는거다.

그러면 백엔드의 세션 DB에서 id를 가진 세션을 찾게 된다.

그리고 그 세션에 정보를 담을 수 있는거다. 그러면 이제 유저 정보를 기억 할수 있고

유저의 세션에 정보를 추가할 수도 있는거다. 아직은 유저가 누구인지 모르고 있다.

알고 있는건 potato가 다른 한쪽은 몇번을 새로고침을 한것과 다른 한쪽의 potato는

또 몇번의 새로고침을 했냐는 거다.

여기서 한번 더 홈화면을 방문해본다. 브라우저에서 웹사이트를 방문 할때마다 세션 이 middelware가

있으면

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

express가 알아서 그 브라우저를 위한 세션 id를 만들고 브라우저한테 보내줄거다.

알아서 처리 되는거다. 그러면 브라우저가 쿠키에 그 세션 id를 저장하고

express에서도 그 세션을 세션 DB에 저장 할거다. 세션 DB에 있는 id와 쿠키에

있는 id가 같도록 말이다. 그러면 브라우저한테 보내서 쿠키에 저장한 세션 id를

브라우저가 localhost:4000의 모든 url에 요청을 보낼 때마다 세션 id를 요청과 함께 보낼거다.

그러면 백엔드에서 어떤 유저가 어떤 브라우저에서 요청을 보냈는지 알수 있는거다.

예를 들어 , 집에 오는 사람들한테 id카드를 주는거랑 비슷하다.

얼굴을 계속 잊어 먹을테니까 집에 올때마다 id카드를 보여줘야 한다.

마스크를 쓰고 있으면 까먹을 수도 있으니깐 말이다.

그래도 그 사람들이 마스크를 쓰고 꾸민채로 온다고 가정 해본다.

어쨋든 누가 들어오는건지는 알아야 하니깐 id카드를 주는거다. 그리고 다음에도 집에 오고 싶다면

id카드를 들고 오라고 알려주는 거다. 어떻게 꾸미고 왔는지 마스크를 쓰고 왔는지

그런 것들과 상관없이 말이다. id카드를 들고 왔으니 말이다.

id카드를 들고오면 만든 id DB에서 이름을 찾고 그 사람의 이름으로 인사를 할수 있다.

지금 브라우저에서 하고 있는게 이거이다.

브라우저한테 백엔드 url을 방문할때 마다 보여줘야하는 id카드를 주는거다.

쿠키가 이런 일처리를 해주기 때문에 좋은거다. 유저들은 아무것도 할게 없는거다.

유저한테 쿠키를 주면 유저가 웹사이트를 방문할때 마다 알아서 그 쿠키를 보내주니까

지금까지 봤다시피 유저를 구분하는건 정말 좋은거다.

예를 들어 브라우저에서 potato가 30이라는걸 기억하고 다른 브라우저에서는 potato가

8이라는걸 알수 있다. 이 모든건 세션 , 세션id때문에 가능한거다.

이 id를 브라우저한테 보내주고 브라우저가 요청을 할때마다 id를 같이 보내준다.