(JS) 백엔드와 브라우저 간의 상호 작용(세션, 브라우저, 쿠키)

세션과 브라우저

• 세션: 백엔드와 브라우저 사이에 수행된 활동을 기억합니다.
• 브라우저: Google, Chrome, Brave, Safari, …

백엔드와 브라우저 간의 상호 작용 이해

로그인 페이지에서 HTTP 요청을 할 때 “로컬호스트:4000/로그인”

요청이 처리되고 완료됩니다. `res.redirect(“/”)` 사후 로그인 컨트롤러

그때부터 (연결이 끊어지는 즉시) 백엔드인 브라우저는 아무 것도 할 수 없습니다.

백엔드가 HTML 코드를 렌더링하는 즉시 연결을 종료합니다. (연결되지 않은 상태: stateless)

그래서! 백엔드에서 사용자를 기억합니다. 사용자가 로그인할 때 사용자에게 텍스트(세션 ID)를 제공합니다.

브라우저에서 사용자는 모든 요청과 함께 이 텍스트를 백엔드로 보내야 합니다.

미들웨어 익스프레스 세션

브라우저와 백엔드가 상호 작용할 때 Express에서 세션을 처리하는 미들웨어: Express 세션

Express에서 세션을 처리하기 위한 미들웨어 “Express-Session”은 요청이 백엔드로 전송될 때 쿠키를 보냅니다.

export const localsMiddleware = (req, res, next) => {
  //   if (req.session.loggedIn) { // req.sesstion.loggedIn = true라면 (if문 안에는 true/false 질문이다. 기본이 true)
  //     res.locals.loggedIn = true; // 요청이 들어왔는데 로그인 되어있다면(req.session.loggedIn=true) 응답도 true
  //   } // 이를 짧게 쓴다면
  res.locals.loggedIn = Boolean(req.session.loggedIn); // 이렇게 된다.
  res.locals.siteName = "Wetube";
  res.locals.loggedInUser = req.session.user;
  next();
};

<서버.js>

참고: 먼저 라우터를 초기화해야 합니다!

이제 업데이트할 때마다 백엔드(localhost)에 요청을 보낼 때마다.

세션 미들웨어는 웹사이트를 방문하는 모든 사람을 기억합니다.

import express from "express";
import morgan from "morgan";
import session from "express-session"; // 사이트로 들어오는 모두를 기억하는 미들웨어
import MongoStore from "connect-mongo";

import rootRouter from "./routers/rootRouter";
import userRouter from "./routers/userRouter";
import videoRouter from "./routers/videoRouter";
import { localsMiddleware } from "./middlewares";

const app = express();
const logger = morgan("tiny");

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

// express-session 모듈로부터 주어진 미들웨어 -> 하는 일: 브라우저가 backend와 상호작용 할 때마다
app.use(
  session({
    // 이 session라는 미들웨어가 브라우저에 cookie를 전송한다.
    secret: process.env.COOKIE_SECRET,
    resave: true,
    saveUninitialized: false,
    store: MongoStore.create({ mongoUrl: process.env.DB_URL }),
  })
);

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

export default app;

백엔드는 쿠키가 있는 브라우저를 어떻게 구분합니까?

현재 서버는 세션을 메모리에 저장합니다. (백엔드가 나중에 잊지 않도록 세션을 mongoDB와 연결해야 함)

“Express에서 세션을 처리하기 위한 미들웨어 “Express-Session”은 요청이 백엔드로 전송될 때 쿠키를 보냅니다.”

=> session이라는 미들웨어 덕분에

서버는 Value에 포함된 텍스트를 브라우저로 보내고 이 텍스트는 백엔드에서 세션 ID로 사용됩니다.

일종의 백엔드 메모리에 세션을 저장할 수 있는 DB를 만들었다.