Pug는 Node.js 환경에서 사용되는 템플릿 엔진 중 하나로, HTML을 보다 간결하게 작성할 수 있게 해주는 도구입니다. Pug를 사용하여 서버 사이드에서 HTML을 동적으로 생성하고 클라이언트에게 전송할 수 있습니다. 아래는 Pug의 기본 구조와 사용 방법에 대한 설명입니다.
1. Pug 설정하기
Express 애플리케이션에서 Pug를 템플릿 엔진으로 설정하기 위해, 다음과 같이 app.set 메서드를 사용합니다.
app.set("view engine", "pug");
이 설정은 Pug 파일을 템플릿으로 사용하겠다는 의미입니다. Pug 파일들은 기본적으로 현재 작업 중인 폴더(즉, Current Working Directory, CWD) 내의 views 디렉토리 안에 위치해야 합니다. CWD는 Node.js 프로세스가 시작되는 디렉토리를 말합니다.
2. Pug 파일 렌더링하기
Express에서 Pug 파일을 렌더링하기 위해서는 다음과 같은 형태의 함수를 라우트 핸들러로 사용합니다.
(req, res) => {
res.render("pug파일 이름", { pageTitle: "페이지 제목" });
}
여기서 res.render 메서드는 첫 번째 인자로 지정된 Pug 파일을 HTML로 변환하여 클라이언트에게 전송합니다. 두 번째 인자는 Pug 템플릿에 전달할 데이터 객체입니다.
3. Pug 파일 구조
base.pug (기본 템플릿)
doctype html
html(lang="ko")
head
title #{pageTitle} | Wetube
link(rel="stylesheet", href="http://unpkg.com/mvp.css")
body
header
nav
ul
li
a(href="/videos/upload") Upload Video
li
a(href="/") Home
li
a(href="/search") Search
h1=pageTitle
main
block content
include partials/footer.pug
- extends base.pug: 다른 Pug 파일에서 이 구문을 사용하면 base.pug의 구조를 상속받습니다.
- block content: 이 블록 안에 페이지별 내용을 삽입합니다.
- #{var} 또는 =var 문법을 사용하여 변수 값을 출력할 수 있습니다.
Mixin 사용하기
Mixin은 Pug에서 반복되는 HTML 코드를 재사용하기 위한 기능입니다. 아래는 비디오 목록을 표시하는 데 사용할 수 있는 mixin의 예시입니다.
mixin video(video)
div
h4
a(href=`/videos/${video.id}`)= video.title
p= video.description
ul
each hashtag in video.hashtags
li= hashtag
small= video.createdAt
hr
Mixin 호출하기 (예: search.pug)
extends base
include mixins/video
block content
form(method="GET")
input(placeholder="Search by title", name="keyword", type="text")
input(type="submit", value="Search now")
div
each video in videos
+video(video)
위의 예제에서 +video(video)는 mixin을 호출하여 각 비디오 정보를 표시하는 HTML 코드를 생성합니다. each 문을 사용하여 videos 배열의 각 항목에 대해 mixin을 호출합니다.
Pug를 사용하면 HTML 문서를 보다 간결하고 효율적으로 관리할 수 있으며, 코드의 재사용성과 가독성을 높일 수 있습니다.