[Pug] Pug에 대해서 간단하게 알아보자!

🎯 Pug에 대해서 간단하게 알아보자!

• 들여 쓰기 표현식을 이용해 가독성이 좋고 개발 생산성이 높다.
• HTML을 잘 모르더라도 문법적 실수를 줄일 수 있다.
• layout, include, mixin 등 강력한 기능 제공한다.

 

📝 기본 문법

html
    head
        title= title
    body
        h1#greeting 안녕하세요
        a.link(href="/") 홈으로

• HTML 닫기 태그 없이 들여 쓰기로 블록을 구분한다.
• = 을 이용해서 전달받은 변수 사용 가능하다.
• id나 class는 태그 뒤에 이어서 바로 사용한다.
• ()을 이용해서 attribute 사용

 

📕 each, if

each item in arr
    if item.name == 'new'
        h1 New Document
    else
        h1= `${item.name}`

• each ~ in 표현식으로 주어진 배열의 값을 순환하며 HTML 태그 생성
• if, else if, else를 이용해 주어진 값의 조건을 확인하여 HTML 태그 생성

 

📕 layout

--- layout.pug ---
html
    head
        title= title
    body
        block content <!-- 이 content 부분에 h1 Main Page 삽입된다. -->

--- main.pug ---
extends layout 
block content
    h1 Main Page

• block을 포함한 템플릿을 선언하면 해당 템플릿을 layout으로 사용할 수 있다.
• layout을 extends 하면 block 부분에 작성한 HTML 태그가 포함된다.
• 반복되는 웹사이트의 틀을 작성해 두고 extends 하며 사용

 

📕 include

---title.pug---
h1= title

---main.pug
extend layout
block content
    include title
    div.content
        안녕하세요
    pre
        include article.txt

• 자주 반복되는 구문을 미리 작성해 두고 include 하여 사용.
• layout은 바깥쪽에서 틀을 만들고 가져다 쓴다고 한다면, include는 하나의 조각을 만들어서 사용한다.
• 일반적인 텍스트 파일도 include 하여 템플릿에 포함 가능.

 

📕 mixin

--- listItem.pug ---
mixin listItem(title, name)
    tr
        td title
        td name

--- main.pug ---
include listItem
table
    tbody
        listItem('제목', '이름')

• mixin을 사용하여 템플릿을 함수처럼 사용할 수 있게 선언할 수 있다.
• include는 값을 지정할 수 없지만 mixin은 파라미터를 지정하여 값을 넘겨받아 템플릿에 사용할 수 있다.

 

📝 Express.js와 pug의 연동하기

// --- app.js ---
app.set('views', path.join(__dirname, 'views')); // 템플릿 위치 선언
app.set('view engine', 'pug'); // pug 선언

// --- request handler ---
res.render('main', { // views 디렉토리 안에 main.pug render
    title: 'Hello Express', // 템플릿에 전달되는 값
});

• app.set을 이용해서 템플릿이 저장되는 디렉터리를 지정하고, 어떤 템플릿 엔진을 사용할지 지정할 수 있다.
• res.render 함수는 app.set에 지정된 값을 이용해 화면을 그리는 기능을 수행한다.
• render 함수의 첫 번째 인자는 템플릿의 이름, 두 번째 인자는 템플릿에 전달되는 값이다.

 

📝 Express.js의 app.locals

// --- app.js ---
app.locals.appName = "Express"

// --- main.pug ---
h1= appName

// <h1>Express</h1>

• Express.js의 app.locals를 사용하면 render 함수에 전달되지 않은 값이나 함수를 사용할 수 있다.
• 템플릿에 전역으로 사용될 값을 지정하는 역할을 한다.

 

📝 express-generator 사용 시 템플릿 엔진 지정하기

express --view=pug 폴더이름

• express-generator는 기본적으로 jade라는 템플릿 엔진을 사용한다.
• jade는 pug의 이전 이름으로, 최신 지원을 받기 위해선 템플릿 엔진을 pug로 지정해야 한다.
• --view 옵션을 사용하여 템플릿 엔진을 지정할 수 있다.