본문 바로가기

Youtube Clone/ExpressJS

Pug

  • Pug는 view engine으로, HTML 파일들을 쉽게 만들 수 있게 도와준다.
    • .html 파일에서는 [<p>Hello</p>]라고 써야하는 것을 .pug 파일에서는 [p Hello] 라고 쓰면 됨
    • .pug파일은 자동으로 .html으로 변환되어 서버에 반영된다.
    • npm install pug
    • express의 view engine을 pug로 바꾼다. - app.js에 app.set("view engine", "pug"); 추가
    • 앞으로 pug 파일들을 /views에 저장한다.

main.pug, 뒤에 오는 내용은 text로 인식

  • Pug를 이용하면 반복 작업을 줄일 수 있다.
    • 모든 페이지는 header, footer, HTML head 태그, css link를 필요로 한다.
    • /views/layout 안에 main.pug를 만들고, 공통적인 양식을 여기에 저장
    • 다른 pug 파일에서 extends layouts/main.pug 라고 쓰면 이 레이아웃을 사용할 수 있다.
    • 페이지마다 달라지는 내용은 block content 부분에 추가하면 된다.

home.pug

  • 서버에서 응답으로 res.send로 텍스트를 전송하는 대신 이런 템플릿을 보여주려면 res.render를 사용.
    • res.render("home")은 views/home.pug를 표현하겠다는 뜻

res.render를 이용해 html으로 응답

 

'Youtube Clone > ExpressJS' 카테고리의 다른 글

Local2Global  (0) 2019.09.18
Partials  (0) 2019.09.18
Router 쪼개기  (0) 2019.09.17
Router  (0) 2019.09.17
Middlewares  (0) 2019.09.17