[Node.js] Template Engine

Template Engine

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

Express.js의 템플릿 엔진

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

pug

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

pug 문법

// index
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
        
--- 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 하여 사용할 수 있음
• 일반적인 텍스트 파일도 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');
app.locals.pretty = true;

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

• app.set을 이용해 템플릿이 저장되는 디렉터리를 지정하고, 어떤 템플릿 엔진을 사용할지 지정할 수 있음
• app.locals.pretty = true는 pug로 출력되는 html값을 가독성있게 정리.
• res.render 함수는 app.set에 지정된 값을 이용해 화면을 그리는 기능을 수행함
• render 함수의 첫 번째 인자는 템플릿의 이름, 두 번째 인자는 템플릿에 전달되는 값
  javascript

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

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

// <h1>Express</h1>

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

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

$ express --view=pug myapp

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