Node.js의 템플릿 엔진
HTML 구조를 관리하는 Templete 엔진, View 엔진.
pug 문법에 따라 HTML 을 작성하면 HTML로 바꿔줌.
Q) What is template engine?
템플릿 엔진은 동적인 데이터를 미리 구성해놓은 틀에 끼워 넣기 위해 사용됩니다.
예를 들면, 정보 조회 페이지는 기본적인 틀(HTML)은 같지만, 각 사용자마다 독립적인 데이터를 제공해야 합니다. 이러한 경우 기본적인 틀은 미리 작성해두고 사용자 별 데이터만 동적으로 집어넣어 응답한다면 Code-Effective 하지 않을까?
npm install pug
설치가 완료되면 npm 프로젝트의 최상위 경로에 views 폴더를 생성해 주세요.
mkdir views
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!!!
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의 경우)를 요청하면 결과를 확인할 수 있습니다.