#5.4 Variables to Templates

Variables to Templates

• title같이 앞에 뒤에 내용이 반복되고 앞에가 변경되는 글일 경우 변수로 만들어 준다.

• #{pageTitle}변수는 js변수가 아니라 우리가 그 변수를 보내줘야한다.

• #{pageTitle}는 base를 extends한 모든파일(edit/watch/home)에 영향을 주는데 현재 해당 파일들의 title부분은 비어있다.

edit.pug

extends base.pug


block content
    h1 Edit Video!

base.pug

doctype html
html(lang="ko")
    head
        title #{pageTitle} | wetube
    body
        block content
        include partials/footer.pug

• 그렇다면 템플릿으로 어떻게 변수를 보낼까?
  • 어디서 템플릿을 렌더링하는지 생각해보자. 바로 컨트롤러다.

videoController.pug

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

//res.render("view이름", {템플릿에 보낼 변수: 값})
//home을 렌더링하고 쉼표를 쓰고 저 안에 템플릿으로 보내고 싶은 모든 변수를 작성

1. home파일을 렌더링 하면 home파일은 base.pug가 될거고
2. base.pug는 pageTitle을 찾을것임.
3. 우리는 videoController.pug에 있는 render안에 pageTitle을 전해줌
4. 새로고침을 하면 Home | wetue Title이 정상적으로 나오는 것을 확인할 수 있다. 하여, 일일히 pug파일마다 작성을 하지 않아도되는 편리함을 얻게되었다.