참고 자료


Nomad Coders의 Youtube clone 강의를 참고하였습니다.

pug 공식문서




1. pug의 장점


  1. 반복되는 코드의 재사용이 가능하다 (partial, extend 기능)
  2. 코드가 간결하고 깔끔하다 (작성 속도 up!)




2. node.js 프로젝트에 pug 적용하기


우선 퍼그를 intall 한 후 server.js에 아래 설정을 해준다.

server.js (express 기준)


app.set("view engine", "pug"); //  View engine으로 pug를 사용하겠다.
app.set("views", process.cwd() + "/src/views"); // view파일이 있는 경로를 알려준다.




3. pug에서 html에 변수 넣기


변수는 #{}안에 넣어준다.


footer.pug

footer © #{new Date().getFullYear()} Wetube




4. partials include 하는 법


여러 화면에서 중복으로 사용되는 요소들은 partial로 만들어 필요할 때 include 해주면 편리하다.

home.pug

  doctype html
  html(lang="ko")
      head
          title Wetube
      body
          h1 Watch Video!
      include partials/footer.pug //  footer.pug를 include해주었다. 이때 include되어 home.pug에서 부분적으로 사용되는 footer를 partial이라고 한다.




5. templete 만드는 꿀 기능 - extend와 block


템플릿을 만들어두고 그것을 extend 하여 사용하면 반복되는 작업을 피할 수 있다.

base.pug (= 템플릿으로 사용할 html)

  doctype html
  html(lang="ko")
      head
          block head // 이 위치에 원하는 내용을 담을 수 있도록 block을 넣어주었다
      body
          block content // 222
      include partials/footer.pug

home.pug

  extends base.pug

  block head  // base.pug의 block 부분에 아래 내용이 들어가게 된다
      title Edit | Wetube

  block content  // 22222
      h1 Edit Video




6. pug 템플릿 화면에 출력하기 & 변수 전달하기


컨트롤러에서 res.render로 화면을 렌더해준다.
res.render(“불러올 view파일 이름”, {전달할 변수})

videoController.pug

  export const trending = (req, res) => res.render("home", { pageTitle: "Home" });