템플릿 엔진(Template Engine)이란

서버의 데이터를 클라이언트에 효과적으로 보여주는 중간 매개체
코드가 간결해지고, 재사용성이 높아지며, 유지보수가 용이해진다

PUG

PUG 이란?

많이 사용되는 NodeJS의 템플릿 엔진
들여쓰기를 하는 것이 특징이다

express에서 적용하기

설치

먼저 NPM에서 설치를 한다

npm install pug

설정

아래의 express 문서에서 app.set() 파트를 보면 설정 할 수 있는 값들이 설명되어 있다

http://expressjs.com/ko/api.html#app.set

문서를 읽어보면 view engine 이라는 property가 있는데 어떤 템플릿을 사용할지 설정한다

view engine 은 default값이 NULL이므로 app.set()을 이용하여 PUG으로 설정해야한다

app.set("view engine", "pug");

템플릿 파일 불러올 주소 변경

app.set("views", "템플릿 주소")

default 값으로는 views 폴더로 설정되어 있다

How to use

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Pug World</title>
</head>
<body>
    <main>
        <p>Welcome to the pug</p>
    </main>
</body>
</html>

PUG은 들여쓰기 문법을 사용하는데, 아래의 코드는 위의 HTML 코드를 PUG으로 바꾼 것이다

PUG

doctype html
html
    head
        title Pug World
    body
        main
            p Welcome to the pug

PUG이 훨씬 간결하고 가독성도 좋아진다

태그 없는 텍스트

PUG 에서는 텍스트를 태그 다음에 쓰지 않으면 에러가 나는데, 태그 없이도 텍스트를 작성 할 수 있다

doctype html
html
    body
        .without-tag
            | It's done

태그 대신 | 를 텍스트 앞에 붙이면 된다

.without-tag에서 태그명 없이 클래스 이름만 작성하면 <div> 태그로 인식한다

자바스크립트 사용

PUG 에서는 HTML과 다르게 자바스크립트를 실행 시킬 수 있다
#{ } 안에 자바스크립트 코드를 넣으면 된다

예제

  doctype html
html
    body
        h1 현재 시간 : #{ new Date().getHours() }시 입니다

확장 (extends - block)

PUG에서는 레이아웃 파일을 만들어 확장시킬 수 있다

layout.pug

doctype html
html
    head
        title PUG World
    body
        main 
            block content

main.pug

extends layout

block content
    h1 이 곳의 내용이 layout.pug 의 content 부분에 들어가게된다

main.pug 를 랜더링 한다면
layout.pug 안의 block content 부분에 main.pug의 block content 내용이 들어가 출력 될 것이다

Output
doctype html
html
    head
        title PUG World
    body
        main 
            h1 이 곳의 내용이 layout.pug 의 content 부분에 들어가게된다

컴포넌트 분할 (include)

PUG도 React 나 Vue 처럼 파일로 나누어 작성 할 수 있다

main.pug

doctype html
html
    head
        title PUG World
    body
        main 
            block content
        include ../partials/footer

footer.pug

  footer.footer
      p I'm footer

간단하게 include + 주소만 작성하면 footer가 include 위치에 작성된다

mixin

extends-block 이 바깥 코드를 재사용 한다면, mixin은 내부 코드를 재사용한다

mixin이란 반복되는 HTML 덩어리를 함수 형태로 만들어, 재사용 할 수 있게 만드는 PUG의 메서드이다

형태

  mixin 함수명(인자)
      반환될 HTML 코드

예제

renderNav.pug

  mixin renderNav( nav = {} )
      h1 Nav Item
      h3= nav.name

인자의 nav = {} 에서 = {}은 초기값 설정이다 (빈 객체를 초기값으로 설정)

main.pug

  include renderNav

  doctype html
  html
      body
          ul.navs
              li.nav 
                  +renderNav({ name : "start" })
              li.nav 
                  +renderNav({ name : "end" })

위 처럼 mixin 파일을 include 해서 + 기호를 앞에 붙여 사용하면 된다

output

  include renderNav

  doctype html
  html
      body
          ul.navs
              li.nav 
                    h1 Nav Item
                    h3 start
              li.nav 
                    h1 Nav Item
                    h3 end