노마드코더 유튜브 클론 챌린지 6일차 TIL

---

🔍Pug

HTML을 간단하게 표현할 수 있는 node express의 view engine이다.

1. html을 보다 간결한 문법으로 작성할 수 있고
2. 상속을 이용해 코드의 재활용이 가능하다.

---

📌Pug 사용하기

index.js

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

app의 view engine을 pug로 설정하고,
views의 경로를 설정해준다.

controller.js

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

res.render() 로 home.pug 파일을 렌더링할 수 있고, 동시에 title이라는 변수의 값을 파라미터로 넣어줄 수 있다.

base.pug

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

대부분의 템플릿 파일에서 반복되는 구조들을 매번 작성하지 않고, 베이스 파일 하나에 작성 후 다른 파일에서 상속받아 재활용할 수 있다.

#{} 을 이용하여 컨트롤러 파일에서 렌더링 시 파라미터를 받을 수 있다.

block을 이용하여 코드를 추가할 수 있는 빈 공간을 형성할 수 있다. 추후에 베이스파일을 상속받는 다른 파일들은 block에 각기 다른 내용을 채울 수 있다.

부분적으로 반복되는 코드 또한 따로 파일을 형성해 작성 후, include해줄 수 있다.

home.pug

extends base.pug
block content
    h1 Home!

extends를 이용하여 베이스 파일을 상속받을 수 있고,
block의 내용을 작성할 수 있다.

---

✅ 현재 작업중인 디렉토리는 서버를 기동하는 파일이 있는 디렉토리를 말한다.
✅ 기본적인 css 디자인 link(rel="stylesheet" href="https://unpkg.com/mvp.css")

---

pug를 쓰면 코드가 훨!!씬!!깔끔해 질 수 있다