Templatee Engine, Mustache 문법

참고 사이트 : https://taegon.kim/archives/4910

 

 

Mustache

Mustache는 제어 구조를 가진, 가장 문법이 간단하고 많은 언어를 지원하는 Template Engine이며, Mustache를 기반으로 확장한 Template Engine도 몇가지 있는 데, 대표적으로는 Handlebars와 Hogan.js가 있다.

 

 

변수의 사용

아래의 데이터를 이용해 Mustache에서 변수를 사용하는 방법을 알아보자

// Data
{
  "name" : "Chris",
  "company" : "<b>Github</b>"
}

 

Mustache에서는 {{ }}에 변수 이름을 {{ name }}와 같이 입력하여 사용하는 데, 문자열은 자동으로 HTML 이스케이프가 되어 출력이 되지만 이스케이프가 되지 않은 문자열을 출력하고 싶다면 {{{ }}}를 이용한다.

 

// mustache
* {{name}}
* {{age}}
* {{company}}
* {{{company}}}

// 결과
* Chris
*
* <b>Github</b>
* <b>Github</b>

 

 

단순한 객체가 아닌, 객체 안에 객체가 있거나 다른 형태의 데이터가 아래와 같이 있으면 기존의 Javascript에서 객체의 키를 이용해 Value에 접근 한 것과 같이 .을 이용하여 접근한다.

 

// 예시 데이터
{
  "name" : "Chris",
  "company" : {
    "name" : "Github",
    "address" : {
      "country" : "USA"
    }
  }
}

 

// mustache
Country : {{company.address.country}}

// 결과
Country : USA

 

 

섹션 (section)

section 문법은 조건문이나 반복문 대신에 사용 하며, {{#변수명}}으로 시작하고 {{/변수명}}으로 끝이난다. 변수가 배열이면 반복문으로 그렇지 않으면 조건문으로 사용이 되는 데, [0, false, null, '']은 거짓으로 평가 되어 section의 내용으로 출력이 되지는 않는다.

 

조건문

변수의 값이 배열이 아니면 조건문으로 사용이 되는 데, 배열이라고 하더라도 빈 배열은 거짓 조건문과 마찬가지로 취급 되기에 section의 내용이 출력 되지 않는다.

 

// 데이터
{
  "person" : false
}

 

위의 데이터에서 person이 false이기에 "출력 안됩니다"는 출력이 되지 않는 것을 알 수 있다.

 

// mustache
출력됩니다.
{{#person}}
  출력안됩니다.
{{/person}}

// 결과
출력됩니다.

---

데이터가 객체 형식 일떄는 아래와 같이도 사용이 가능한데, section 안에서는 변수의 속성, 즉 객체의 속성을 변수와 같이 사용이 가능하다.

 

// 데이터
{
  "person" : {"name" : "Jon"}
}

 

// mustache
{{#person}}
  {{name}}
{{/person}}

// 결과
Jon

 

 

반복문

변수의 값이 배열일 경우에는 조건문이 아닌 반복문이 실행된다.

// 데이터
{
  "repo" : [
    { "name" : "resque" },
    { "name" : "hub" },
    { "name" : "rip" }
  ]
}

 

// mustache
{{#repo}}
  <b>{{name}}</b>
{{/repo}}

// 결과 
<b>resque</b>
<b>hub</b>
<b>rip</b>

 

반전 섹션

섹션과 반대되는 조건에서만 출력되는 블럭으로, 논리 연산자의 부정 연산자와 비슷하다. 즈 사용된 없는 변수거나 변수의 값이 false, 0과 비슷한 값이거나 빈 배열이면 출력하는 데 {{^변수}} {{/변수}}의 형식으로 작성한다.

 

// 데이터
{
  "repo": []
}

// mustache
{{#repo}}
  <b>{{name}}</b>
{{/repo}}
{{^repo}}
  저장소가 없네요. -_-
{{/repo}}

// 결과
저장소가 없네요. -_-

 

 

주석

{{ ! 내용 }} !을 {{ }} 안에 넣어주면서 주석 처리가 가능하다.

<h1>Today{{! 여기는 안 나옵니다. }}</h1>

 

<h1>Today</h1>

 

부분템플릿

부분템플릿(Partials)은 외부 파일을 템플릿의 일부로 불러올 수 있는 기능으로서 {{> 파일이름}}과 같이 사용합니다.

부분 Template, Partials는 외부 파일을 Template의 일부로 불러올 수 잇는 기능으로 {{ > 파일 이름}}과 같이 사용한다.

// base.mustache
<h2>Names</h2>
{{#names}}
  {{> user}}
{{/names}}

// user.mustache
<strong>{{name}}</strong>

 

위 코드는 사실 다음과 같은 하나의 템플릿 코드로 봐도 무방하다.

<h2>Names</h2>
{{#names}}
  <strong>{{name}}</strong>
{{/names}}

 

 

구분자 설정

템플릿 태그를 시작하는 {{와 }}를 다른 구분자로 바꿀 수 있습니다. 구분자를 변경할 때는 {{=여는구분자 닫는구분자=}}와 같이 사용합니다. 다음은 구분자를 일시적으로 <% %>로 변경했다가 다시 {{ }}로 바꾸는 템플릿 코드입니다.

 

Template Tag인 {{ }}를 다른 구분자로 변경할 수도 있다. 구분자를 변경할 때는 {{=여는 구분자 닫는구분자=}}와 같이 사용한다.

// <% %>로 구분자 태그 변경
{{=<% %>=}}
* <% ERB_스타일_태그 %>

// {{ }}로 구분자 태그 변경
<%={{ }}=%>
* {{ 원래_템플릿_코드 }}

위 템플릿 코드는 두 번째 줄({{=<% %>>=}})과 네 번째 줄(<%={{ }}=%>)에서 구분자를 각각 <% %>와 {{ }}로 바꾸고 있습니다. TeX처럼 중괄호 두 개가 특수한 의미를 가지는 템플릿을 다룰 때 유용하다고 합니다.