#2 - Pug로 뼈대 만들기

Pug란 무엇인가?

#1에서는 노드와 관련된 필수 개념들에 대해 배웠다.

나는 그 과정에서 이런 의문이 들었다.

res.send()를 사용해서 브라우저에 간단한 텍스트를 보여줄 수 있다면 html파일은 어떻게 보여줄 수 있을까?

 

그것은 res.render()와 함께 Pug를 사용하면된다.

 

express에는 다양한 view engine이 존재하는 데, 그 중 가장 유명한 view engine(또는 template engine)이 Pug라고 한다.

 

view: MVC(Model, View, Controller) 중 하나로 클라이언트에게 보여지는 부분을 말한다.
template: header나 footer와 같이 대부분의 페이지에서 중복되는 부분을 template이라고 한다.

 

 

 

Pug 시작하기

설치

npm install pug

설정

app.set("view engine", "pug"); (view engine을 pug로 하겠다는 것. app.js파일에 추가)

 

 

views라는 폴더를 만들고 그 안에 pug파일들을 만들어보자.

 

// layouts/main.pug
doctype html
html
  head
    title Wetube
  body
    header
      h1  Wetube
    main
      block content	// ...?
    footer
      span &copy Wetube

 

보다 시피 html보다 간략하다. 단, 주의할 점은 들여 쓰기로 부모와 자식을 구분한다는 점이다.

음.. 다른 건 대충 다 알겠는데 block content는 뭐시여..?

 

pug는 block content를 사용해서 중복을 쉽게 제거할 수 있다.

header와 footer는 대부분의 페이지에서 보여지므로 그대로 놔두고 페이지마다 변하는 main 부분에 block content를 넣는다.

 

그리고 아래처럼 페이지마다 block content에 대한 내용만 코딩해주는 것이다.

 

// home.pug
extens layouts/main

block content
	h1 This is Home

 

 

 

Pug 사용하기

//videoController.js
export const home = (req, res) => res.send('home');
export const search = (req, res) => res.send('search');

//userController.js
export const join = (req, res) => res.send('join');
export const login = (req, res) => res.send('login');
export const logout = (req, res) => res.send('logout');

이렇게 res.send로 단순 텍스트만 보여줬던 컨트롤러를 바꿔야한다.

 

 

//videoController.js
export const home = (req, res) => res.render('home');
export const search = (req, res) => res.render('search');

//userController.js
export const join = (req, res) => res.render('join');
export const login = (req, res) => res.render('login');
export const logout = (req, res) => res.render('logout');

이렇게 send를 render로 바꾸면 인자와 같은 이름을 가진 pug파일을 찾아 렌더링한 후, 화면에 보여준다.

 

그리고 globerRouter.js 와 같이 라우터에서 routes.js의 내용을 사용하기 위해서는 routes.js를 import하고 사용했지만 pug파일은 js파일이 아니기 때문에 우리가 만든 routes.js를 사용하려면 미들웨어를 만들어야한다.

//localMiddleware.js
import routes from "./routes";

const localMiddleware = (req, res, next) => {
  res.locals.routes = routes;
  next();
};

export default localMiddleware;


//app.js
...(생략)
app.use(localMiddleware);

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

이렇게 미들웨어를 만들어서 routes를 저장해주고 Router들을 연결하기 전에 미들웨어 사용을 선언해줘야한다.

 

위와 같이 모든 pug파일에서 사용할 수 있는 방법이 있는 것처럼, 각 pug파일에서 사용할 수 있는 자신만의 변수도 만들 수 있다. 그 방법은 아래와 같이 Controller에 사용하고자 하는 변수를 인자로 넣어주면 된다.

//videoController.js
export const home = (req, res) => res.render('home', title:{"Home"});

 

이렇게 만든 변수들은 pug파일에서 아래와 같이 사용할 수 있다.

pug별 변수는 #{}안에 변수명을 넣어서 사용하고, 공통 변수는 routes.videos와 같이 사용한다.