지금까지 해본걸 복습 해보도록 한다.
어떻게 됐는지 복습 해보는 거다. 첫번째로 여기 보이는 middleware를 생성했다.
server.js에서
app.use(
session({
secret: "Hello!",
resave: true,
saveUninitialized: true,
})
);이 middleware는 express-session이라는 대단한 module로 부터 주어진거다.
이 middleware가 뭘하냐면 브라우저가 백엔드와 상호작용 할때마다
session이라는 middleware가 바라우저에 cookie를 전송한다.
그럼 cookie는 뭐냐면 cookie는 백엔드가 브라우저에 주는 정보인데
cookie에는 정해진 규칙이 있기 때문에 매번 백엔드에 request를 할때
브라우저는 알아서 그 request에 cookie를 덧붙이게 된다.
그렇기 때문에 이걸 위해서 따로 해야 할것은 없는거다.
여기 보이는 middleware가 브라우저에 Cookie를 보내고 브라우저는 cookie로 뭘할지
어디에 넣을지 모든 걸 알고 있다. 게다가 브라우저는 매번 백엔드 localhost에 있는
URL로 request를 보낼때 마다 cookie가 request랑 같이 전송 된다는 것도 안다.
그럼 cookie에는 무슨 정보를 넣을 수 있을까? 어떤 정보든 넣을 수 있다.
숫자를 넣어도 되고 이름을 넣어도 되고 어떤 정보든 넣을 수 있다.
현재 넣을 것은 session ID이다.
왜냐하면 브라우저와 백엔드와의 연결이 평생 보장된 것은 없기 때문이다.
http를 사용하고 있으니까 http는 stateless이다.
무슨 뜻이냐면 home page를 들어가면 connection이 열리고 render가 끝나면
connection이 끊어진다. connection이 계속 유지 되지 않는거다.
예를 들어 WIFI공유기와 관계를 보면 그건 connection이 항상 유지 된다.
WiFI공유기는 한번 연결되면 항상 연결되어 있다.
그래서 WIFI공유기랑 정보를 주고 받을수 있는 이유이다.
하지만 브라우저와 백엔드와 같은 경우엔 살아있는 connection이라곤 없다.
connection은 render가 끝나거나 redirect가 발생하거나
post request를 보내거나 응답없음을 받으면 connection은 바로 끝난다.
그래서 사용자에게 session ID를 주는 거다. session ID를 넣을 곳은 바로 cookie인 거다.
두개가 있는데 하나는 바로 cookie이고 이걸 사용해서 백엔드돠 프론트엔드 간의 정보교환을 하고
다른 하나는 session ID이다. 그래서 session ID는 한 예로 브라우저에서 볼수 있다.
검사-> 애플리케이션 ->쿠키-> 로컬호스트로 들어가면 나오는게 바로 session ID이다.
그럼 브라우저는 session ID가 포함된 cookie를 가지고 있고,
백엔드는 현재 사용중인 session ID를 기억하고 있다.
다시 말하자면
cookie랑session은 별개의 개념이다.
cookie는 단지 정보를 주고 받는 방법이다.
cookie는 정말 좋은데 왜냐하면 자동적으로 처리되기 때문이다.
cookie를 받고 보내는 과정에서 사용자는 아무것도 안해도 되고 별개의 코드를 작성할 필요도 없다.
왜냐하면 http표준을 따르고 있기 때문이다. 이게 cookie이다.
또 다른 하나는 session ID인데 이건 cookie에 저장된다.
왜내하면 cookie는 session ID를 전송하는데 사용 되기 때문이다. 서로 다른거다.
어쨌든 session ID가 cookie안에 저장되고 여기 있는 백엔드에도 저장된다는게 요점이다.
백엔드는 사용되고 있는 모든 session ID를 유지하는데 여기에 몇 가지 문제가 있다.
그건 다음 파트에서 다루기로 한다.
백엔드는 생성된 모든 session ID를 관리하는 곳이다.
만약 4명의 사용자가 있다면 session store에 4개의 session이 있는거다.
이제
session store에 대해서 이야기 해본다.
session store는 session을 저장하는 곳이다. 매번 코드를 저장하면 서버가 재시작되는데
session store는 사라져 버린다. 왜냐하면 이건 테스트를 위한 저장소이기 때문이다.
코드를 새로 저장하면 서버가 재시작 되고 session store도 재시작 된다.
그래서 현재의 cookie는 유효하지 않게 된다. 새로고침을 하면 현재의 cookie가 아닌
새로운 cookie가 들어오게 된다. 왜냐하면 완전히 다른 cookie store이기 때문이다.
다음 파트에서 이 부분을 고쳐볼건데 cookie store를 MongoDB와 연결 할거다.
홈페이지에서 새로고침하면 동일한 cookie를 받게 된다.
왜냐하면 백엔드가 session store안에 이 session Id를 저장하고 있기 때문이다.
그래서 session과 cookie는 다르다.
cookie를 사용해서 어떤 브라우저를 위한 session ID인지 알수 있다.
다음으로 할건 사용자가 로그인 하면 이게 usercontrller에서 발생하는데
몇가지 정보를 req.session에 덧붙일거고 매우 중요한 부분인데 req.session은
브라우저랑 시크릿모드에 있는거랑 다르다. 그래서 req.session은 서로 다른 브라우저에서 다르게 보일거다.
한번 보도록 한다. 예를 들어 여기에 req.session을 console.log하면
middlewares.js에서
export const localsMiddleware = (req, res, next) => {
console.log(req.sessionID);
res.locals.loggedIn = Boolean(req.session.loggedIn);
res.locals.siteName = "Wetube";
res.locals.loggedInUser = req.session.user;
next();
};각기 다른 걸 보게 된다. 시크릿 모드의 session ID와 일반 모드의 session ID가 다른걸 볼수 있다.
JFYtvxHaSl5Nr4drpZoV2i4N2uip_1OA
GET / 304 165.473 ms - -xcJGg-kLwAvYybcdLp_MljPPy4purDYJ
GET / 304 43.062 ms - -서로 다른 session ID를 가지고 있는거다. 그래서 같은 코드라도 브라우저마다 다른 결과를 내는거다.
그래서 말했다시피 브라우저마다 req.session이 다르기 때문에 몇몇 정보를
req.session object에 덧붙이는 거다.
왜냐하면 이건 object이니깐 session이 object니까 원하는 아무거나 추가할수 있다.
여기에는 두가지를 추가하는데 사용자가 로그인하면 loggedIn을 true로 하고
userController.js에서
req.session.loggedIn = true;
req.session.user = user;
return res.redirect("/");
};DB에서 찾은 사용자의 데이터를 user에 넣어주는 거다.
이제 req.session안에 들어 간다. 그래서 req.session.user를 controller 어디서나 사용 할수 있는 거다.
이게 req.session안에 있어서 그렇다.
다음으로 loggedInUser.name을 추가했고 loggedIn을 변수로 넣었는데
base.pug에서
body
header
h1=pageTitle
nav
ul
li
a(href="/") Home
if loggedIn
li
a(href="/logout") Log Out
li
a(href="/my-profile") #{loggedInUser.name} Profile
else
li
a(href="/join") Join
li
a(href="/login") Login이 변수를 render하지는 않았다. render function을 실행 할때 이 변수를 보내질 않았다는 거다.
왜냐하면 localsMilddelware를 만들었기 때문이다.
이제
locals에 대해 이야기해 본다.
locals는 뭐든 할수 있는 object이다.
middlewares.js에서
export const localsMiddleware = (req, res, next) => {
res.locals.loggedIn = Boolean(req.session.loggedIn);
res.locals.siteName = "Wetube";
res.locals.loggedInUser = req.session.user;
next();
};추가를 해도 되고 제거를 해도 되고 이 object안에 원하는 뭐든 넣어도 된다.
그리고 template이 locals object에 접근 할수 있다고 확신해도 된다.
pug랑 express에서 이미 설정 되어 있다.
그래서 여기 보이는 3가지를 locals object에 넣는다면 pug template 어디에서든 접근 할수 있다.
import나 render하지 않아도 된다.
locals 안에 넣기만 하면 pug template 에서 쓸수 있다.
