Pug Recap

간략하게 pug의 장점에 대해서 알아 보겠다.

• pug는 깔끔하다.

• 지저분하게 HTML을 쓰지 않는다. (반복적인 사용을 안하게 해준다.)

• 파이썬 처럼 깔끔한 코드를 쓸수 있게 해준다.

• 태그를 닫는걸 신경 쓰지 않아도 된다.

• 모든 탭과 띄어쓰기로 구분이 된다.

• express에게 렌더링하고 user에게 보내준다.

• res.reder를 이용한다.

• pug파일의 이름을 정해준다.

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

• import를 할 필요 없다.

• express에서 이미 찾게 설정이 되어 있다.

app.set("views", process.cwd() + "/src/views");

express에게 Website의 views는 "wetube/src/views"에 있다는 거다.

footer을 반복적으로 사용하고 싶지 않았기에

footer.pug를 만들어 줬다.

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

그리고 각 페이지 pug를 만든 다음

include partials/footer.pug

추가해줘서 번거러움을 줄여 줬다.

footer만 update해주면 전체 적으로 적용이 된다.

그다음은 html의 전체적으로 반복되는 부분을 손을 봤다.

base.pug 파일을 만든 다음

doctype html

html(lang="en")

body

block content

include partials/footer.pug

block 을 이용하여 빈 block을 만들어 준다음

각 각의 pug 파일에 적용 해주었다.

extends base.pug

(다른.pug가 base.pug가 되게 해주는 거다.)

block content

이 뒤에 다르게 적용 하고 싶은 걸 각각 대입해주면 된다.

block이란 베이스 템플릿 , 베이스 파일을 다른 파일에다

지정한 공간을 비운 상태로 가져오는 걸 말한다.

그래서 비워진 공간에다 다른 걸 넣을수 있다.

확장한 파일과 커뮤니케이션 할수 있게 해준다.

원하는 만큼 block을 가질수 있다.

가끔씩 block 전체를 쓰는게 아닌 템플릿의 일부분만 바꾸고 싶을때

변수를 만들어서 지정할수 있다.

각 페이지 의 Ttitle부분만 바꾸고 싶었다.

base.pug파일에 만들어 준다.

head

title #{pageTitle} | Wetube

viedoContorller.js

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

export const see = (req, res) =>res.render("watch", { pageTitle: "Watch Videos" });

export const edit = (req, res) =>res.render("Edit", { pageTitle: "Edit Videos" });

res.render 함수는 2가지 인수를 가지고 있다.

첫번째 인수는 파일의 이름이다.

두번째 인수는 원하는 만큼의 변수를 가질 수 있는 오브젝트이다.

footer랑 block으로 대입 해준거랑은 다르게 한 이유는

전체가 아닌 일부분만 바꿔야 되는 상황이 였기에 그랬다.