본문 바로가기

Youtube Clone Coding

세션 & 쿠키

로그인을 했다면, 브라우저가 로그인한 사용자에 대한 정보를 알고 있어야 해당 사용자가 구독한 채널들, 사용자에게 추천해줄 영상 등등을 보여줄 수 있다. 이럴때 알아야하는게 세션과 쿠키이다.

 

1. 쿠키

사용자가 어떤 사이트에 접속했을때, 브라우저는 서버로 요청을 보낸다. 그리고 서버는 이에대한 응답을 보내주면서 쿠키를 같이 보내준다. 이 쿠키는 나중에 사용자가 다시 접속 했을때 서버로 다시 보내주면서 "전에 왔던 나에요!" 와 같은 역할을 하게 한다. 그리고 이 쿠키에는 다른 정보도 들어갈 수 있어서 예를들어 내가 "영어로 된 페이지로 보여줘" 라는 정보를 쿠키에 담아서 서버에 요청했다면 , 나중에 다시 방문했을때 서버는 쿠키를 받고 영어로된 페이지를 보여줄 것이다. 

 

2. 세션

서버는 사실 우리를 항상 까먹는다. 우리가 특별한 조치를 취하지 않는 이상 우리가 매번 요청 할 때마다 우리가 누군지 모르고 그에 맞는 응답을 보내줄 수 없다. 이때 세션을 사용하는 것이다. 

예를들어, 내가 로그인 한다고 하면 이름과 비밀번호를 보내고, 만약 비밀번호가 맞다면 서버는 세션 DB에 '정기민' 이라는 유저를 만들것이다. 이 세션 DB에는 세션 ID가 있고 서버는 이 세션 ID를 쿠키에 담아서 브라우저로 보내주는 것이다. 그리고 저장된다. 그래서 다른 페이지로 가게 되면 브라우저는 세션ID를 포함하고있는 쿠키를 서버에게 보내는 것이다. 이때 서버는 쿠키를 보고 '세션ID가 있군 그러면 세션DB를 보고 찾아봐야지' 라고하면서 찾게된다. 그래서 찾았다면 그에 맞는 응답을 보내준다. 

쿠키는 세션 ID 를 전달하기 위한 수송수단(?) 인것이다. 

 

 

npm i express-session을 한뒤, server.js에 다음을 작성한다.

import session from "express-session";

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

app.use(session~~); 이부분은 우리가 사용하는 라우터들 위에 작성되어야 한다. 이제 유저가 로그인을 할때에, 특정 토큰을 받고, 백엔드로 요청을 보낼 때 이 토큰을 같이 건네준다, 그러면 백엔드에서 해당 토큰을 보고 어떤 유저인지 알고 그에 맞는 대응을 한다.

 

--정리--

우리의 브라우저와 백엔드가 상호작용을 할 때 마다, express 모듈의 미들웨어가 브라우저에게 쿠키를 전송한다. 이 때 쿠키는 백엔드가 브라우저에게 주는 정보의 조각인데, 우리가 백엔드에 request를 보낼때, 브라우저는 알아서 쿠키를 덧붙여서 보낸다.

session ID는 사용자에게 부여하는 것인데, 이는 쿠키에 저장된다. 따라서 브라우저는 쿠키를 가지고 있고, 쿠키 안에는 세션 ID가 들어 있다. 그리고 백엔드에서는 현재 사용중인 세션ID를 기억하고 있다.

'Youtube Clone Coding' 카테고리의 다른 글

로그인 한 사용자에게만 세션을..  (0) 2022.11.15
MongoStore  (0) 2022.11.15
로그인 페이지  (0) 2022.11.14
Form validation  (0) 2022.11.14
사용자 비밀번호 해싱  (0) 2022.11.11