Express.js와 Template Engine - Pug

템플릿 엔진이란?

템플릿 엔진은 SSR을 구현하는 방법으로, 데이터를 서버에서 조합하여 작성된 HTML을 HTTP응답으로 전송하는 기능이다.

• 서버에서 클라이언트로 보낼 HTML의 형태를 미리 템플릿으로 저장
• 동작시에 미리 작성된 템플릿에 데이터를 넣어서 완성된 HTML 생성
• 템플릿 엔진은 템플릿 작성 문법과 작성된 템플릿을 HTML로 변환하는 기능을 제공

 

 

Express.js의 템플릿 엔진

• EJS - html과 유사한 문법의 템플릿 엔진
• Mustache - 간단한 데이터 치환 정도만 제공하는 경량화된 템플릿 엔진
• Pug - 들여쓰기 표현식을 이용한 간략한 표기와 레이아웃을 등 강력한 기능을 제공

 

📝 Pug

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

 

✔ Pug 문법 소개

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

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

✔ each, if 문법 사용

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

• each ~in 표현식으로 주어진 배열의 값을 순환하며 HTML 태그를 만들 수 있음 - ex) arr 변수 안에서 item 값을 하나 씩 순환
• if, else if, else를 이용해 주어진 값의 조건을 확인하여 HTML 태그를 만들수 있음

 

✔ layout 기능

// layout.pug
html
  head
    title = title
  body
    block content
    
  // main.pug
extends layout
block content
  h1 Main Page

• block을 포함한 템플릿을 선언하면 해당 템플릿을 layout으로 사용할수 있음
• layout을 extends 하면 block부분에 작성한 HTML 태그가 포함됨
• 반복되는 웹사이트의 틀을 작성해 두고 extends 하며 개발하면 매우 편리한 기능

 

✔ include 구문

// title.pug
h1 = tilte

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

• 자주 반복되는 구문을 미리 작성해 두고 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('view', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// request handler
res.render('main', {title:'Hello Express',});

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

 

📝 Express.js의 app.locals

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

// main.js
h1 = appName

//<h1>Express</h1>

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

 

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

express --view=pug myapp

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