What is Pug?

Node.js의 템플릿 엔진
HTML 구조를 관리하는 Templete 엔진, View 엔진.
pug 문법에 따라 HTML 을 작성하면 HTML로 바꿔줌.

Q) What is template engine?
템플릿 엔진은 동적인 데이터를 미리 구성해놓은 틀에 끼워 넣기 위해 사용됩니다.
예를 들면, 정보 조회 페이지는 기본적인 틀(HTML)은 같지만, 각 사용자마다 독립적인 데이터를 제공해야 합니다. 이러한 경우 기본적인 틀은 미리 작성해두고 사용자 별 데이터만 동적으로 집어넣어 응답한다면 Code-Effective 하지 않을까?

Pug 설치

npm install pug

설치가 완료되면 npm 프로젝트의 최상위 경로에 views 폴더를 생성해 주세요.

mkdir views

home.pug 파일 생성

views 폴더로 이동해서 home.pug 파일을 생성하고 다음과 같이 입력합니다.
.pug 파일에서 태그 간의 상호 계층 구조는 들여쓰기로 표현되는데, 렌더링 과정에서 템플릿 엔진은 아래와 같이 간소화된 코드들을 HTML 태그들로 변환해줍니다.

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
    body 
        header 
            h1 Hello, World!!!

server.js 작성

import express from "express"

const app = express();

app.set("view engine", "pug"); // set which template engine to use
app.set("views", "./views"); // set the directory where your template files exist

app.get("/", (req, res) => {
    res.render("home");
})

app.get("/*", (req, res) => {
    res.redirect("/");
})

결과 확인

http://localhost:3000 (local server의 경우)를 요청하면 결과를 확인할 수 있습니다.