[NOMAD CODERS_Wetube] View with PUG 2

결과물

Routes middleware를 추가하여 템플릿 파일에서 객체에 접근할 수 있도록 했다.

---

목적

• header.pug가 라우트의 객체에 접근할 수 있도록 한다.
• middlewares.js 미들웨어를 추가하여 템플릿 파일에서 미들웨어 내 객체를 사용할 수 있도록 한다.

code

middlewares.js

import routes from "./routes";

export const localsMiddleware = (req, res, next) => {
	res.locals.siteName = "Wetube";
	res.locals.routes = routes;
	next();
};

미들웨어 작성 시, next()함수는 다음 미들웨어를 실행시키도록 한다.

res.locas 는 로컬변수 응답을 포함하는 객체, 정보를 내보내는데 쓰인다. 해당 함수는 메인 레이아웃에서 변수처럼 불러서 사용 가능하다.

해당 함수 내에 작성하는 변수들은 Globaly하다.

main.js

doctype html
html
    head
        <script src="https://kit.fontawesome.com/7c8c424c87.js" crossorigin="anonymous"></script>
        title | #{siteName}
    body
        header
            include ../partials/header
        main
            block content
        include ../partials/footer

header.js

header.header
    .header__column
        a(href=routes.home)
            i.fab.fa-youtube
    .header__colunm
        ul 
            li
                a(href=routes.join) Join
            li
                a(href=routes.login) Log In

footer.js

footer.footer
    .footer__icon
        i.fab.fa-youtube
    span.footer__text #{siteName} #{new Date().getFullYear()}© 

middlewares.js에서 작성한 변수를 사용하려면 #{변수명}을 입력한다.

app.js

import express from "express";
import morgan, { format } from "morgan";
import helmet from "helmet";
import cookieParser from "cookie-parser";
import bodyParser from "body-parser";
import { localsMiddleware } from "./middlewares";
import userRouter from "./routers/userRouter";
import videoRouter from "./routers/videoRouter";
import globalRouter from "./routers/globalRouter";
import routes from "./routes";
const app = express();

app.set("view engine", "pug");
app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(helmet());
app.use(morgan("dev"));

app.use(localsMiddleware);
app.use(routes.home, globalRouter);
app.use(routes.users, userRouter);
app.use(routes.videos, videoRouter);

export default app;

미들웨어는 위에서부터 아래로 실행되기 때문에 그 위치가 매우 중요하다.

app.use(localsMiddleware);이 app.use(routes.home, globalRouter) app.use(routes.users, userRouter) 보다 위에 위치해야만 해당 미들웨어가 아래의 routes에 접근할 수 있다.

---

배운점

1.  미들웨어는 위에서 아래로, 레이어 형식으로 실행되기 때문에 순서가 중요하다. 
2. Import함수는 보통 알파벳 순서대로 작성한다.
3. 미들웨어 작성 시, next()함수를 실행시켜 그 다음 미들웨어를 실행시킬 수 있도록 한다.

에러

미들웨어 작성 시 next함수를 호출하지 않으면 화면은 무한로딩되며 get --ms--에러가 발생한다.