# 소개

# Handlebars란 무엇인가요?

Handlebars는 간편한 템플릿 언어입니다.

템플릿과 입력 객체를 사용하여 HTML 또는 다른 텍스트 형식을 생성합니다. Handlebars 템플릿은 일반 텍스트와 유사하며, Handlebars 표현식이 포함되어 있습니다.

template

<p>{{firstname}} {{lastname}}</p>

Handlebars 표현식은 {{와 일부 내용, 그리고 }}로 구성됩니다. 템플릿이 실행되면 이러한 표현식은 입력 객체의 값으로 대 체됩니다.

더 알아보기: 표현식

# 설치

Handlebars를 테스트하는 가장 빠른 방법은 CDN 에서 로드하여 HTML 파일에 포함시키는 것입니다.

<!-- Include Handlebars from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script>
  // compile the template
  var template = Handlebars.compile("Handlebars <b>{{doesWhat}}</b>");
  // execute the compiled template and print the output to the console
  console.log(template({ doesWhat: "rocks!" }));
</script>

::: 경고

이 방법은 작은 페이지와 테스트용으로 사용할 수 있습니다. 실제 운영 시스템을 대상으로 할 때 사용할 수 있는 여러 다른 방법 이 있습니다.

더 알아보기: 설치

:::

# 언어 기능

# 간단한 표현식

앞서 설명한 것처럼, 다음 템플릿은 두 개의 Handlebars 표현식을 정의합니다.

template

<p>{{firstname}} {{lastname}}</p>

입력 객체에 적용하면:

input

{
  firstname: "Yehuda",
  lastname: "Katz",
}

표현식은 해당 속성으로 대체됩니다. 결과는 다음과 같습니다:

output

<p>Yehuda Katz</p>

# 중첩된 입력 객체

때때로 입력 객체는 다른 객체나 배열을 포함합니다. 예를 들어:

input

{
  person: {
    firstname: "Yehuda",
    lastname: "Katz",
  },
}

이 경우, 점 표기법을 사용하여 중첩된 속성에 접근할 수 있습니다.

template

{{person.firstname}} {{person.lastname}}

더 알아보기: 표현식

일부 내장 헬퍼는 현재 컨텍스트를 중첩된 객체로 변경할 수 있습니다. 그런 다음 이 객체를 루트 객체처럼 접근할 수 있습니다.

# 평가 컨텍스트

내장 블록 헬퍼 each와 with는 현재 평가 컨텍스트를 변경할 수 있게 합니다.

with 헬퍼는 객체 속성으로 들어가서 해당 속성에 접근할 수 있게 합니다.

template

{{#with person}}
{{firstname}} {{lastname}}
{{/with}}

input

{
  person: {
    firstname: "Yehuda",
    lastname: "Katz",
  },
}

each 헬퍼는 배열을 반복하며, 각 객체의 속성에 간단한 Handlebars 표현식을 통해 접근할 수 있게 합니다.

template

<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

input

{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley",
  ],
}

더 알아보기: 내장 헬퍼

# 템플릿 주석

코드에서 주석을 사용하는 것처럼 Handlebars 코드에서도 주석을 사용할 수 있습니다. 일반적으로 일부 논리가 있기 때문에 이는 좋은 습관입니다.

주석은 결과 출력에 포함되지 않습니다. 주석을 출력에 포함하고 싶다면 HTML 주석을 사용하면 됩니다.

}} 또는 다른 Handlebars 토큰을 포함해야 하는 주석은 {{!-- --}} 구문을 사용해야 합니다.

template

{{! This comment will not show up in the output}}
<!-- This comment will show up as HTML-comment -->
{{!-- This comment may contain mustaches like }} --}}

# 커스텀 헬퍼

Handlebars 헬퍼는 템플릿의 어느 컨텍스트에서도 접근할 수 있습니다. Handlebars.registerHelper 메서드를 사용하여 헬퍼를 등록할 수 있습니다.

template

{{firstname}} {{loud lastname}}

preparationScript

Handlebars.registerHelper('loud', function (aString) {
    return aString.toUpperCase()
})

헬퍼는 현재 컨텍스트를 함수의 this 컨텍스트로 받습니다.

template

{{#each people}}
   {{print_person}}
{{/each}}

preparationScript

Handlebars.registerHelper('print_person', function () {
    return this.firstname + ' ' + this.lastname
})

# 블록 헬퍼

블록 표현식을 사용하면 현재 컨텍스트와 다른 컨텍스트로 템플릿의 섹션을 호출하는 헬퍼를 정의할 수 있습니다. 이러한 블록헬 퍼는 헬퍼 이름 앞에 #를 붙여 식별하며, 동일한 이름의 닫는 머스태시 /가 필요합니다. HTML 목록을 생성하는 헬퍼를 살펴 보겠습니다:

preparationScript

Handlebars.registerHelper("list", function(items, options) {
  const itemsAsHtml = items.map(item => "<li>" + options.fn(item) + "</li>");
  return "<ul>\n" + itemsAsHtml.join("\n") + "\n</ul>";
});

이 예제는 HTML 목록을 생성하기 위한 list라는 이름의 헬퍼를 만듭니다. 헬퍼는 첫 번째 매개변수로 people을 받고, 두 번 째 매개변수로 options 해시를 받습니다. options 해시는 fn이라는 속성을 포함하며, 이를 일반 Handlebars 템플릿을 호출 하듯이 호출할 수 있습니다.

템플릿이 실행되면 다음과 같이 렌더링됩니다:

output

<ul>
<li>Yehuda Katz</li>
<li>Carl Lerche</li>
<li>Alan Johnson</li>
</ul>

블록 헬퍼는 더 많은 기능을 가지고 있으며, if 헬퍼가 사용하는 else 섹션을 생성할 수도 있습니다.

블록 헬퍼의 내용을 options.fn(context)로 호출할 때 이스케이프되므로 Handlebars는 블록 헬퍼의 결과를 이스케이프하지 않 습니다. 이스케이프할 경우 내부 콘텐츠가 이중으로 이스케이프되기 때문입니다.

더 알아보기: 블록 헬퍼

# HTML 이스케이프

원래 HTML을 생성하기 위해 설계되었기 때문에 Handlebars는 {{expression}}이 반환하는 값을 이스케이프합니다. 값이 이스케 이프되지않도록 하려면 "트리플 스태시"인 {{{를 사용하세요.

template

raw: {{{specialChars}}}
html-escaped: {{specialChars}}

두 번째 줄의 특수 문자는 이스케이프됩니다:

output

raw: & < > " ' ` =
html-escaped: &amp; &lt; &gt; &quot; &#x27; &#x60; &#x3D;

Handlebars는 Handlebars.SafeString을 이스케이프하지 않습니다. 자체 HTML을 생성하는 헬퍼를 작성하는 경우, 일반적으로 new Handlebars.SafeString(result)를 반환하고 싶을 것입니다. 이러한 상황에서는 매개변수를 수동으로 이스케이프해야 합니 다.

preparationScript

Handlebars.registerHelper("bold", function(text) {
  var result = "<b>" + Handlebars.escapeExpression(text) + "</b>";
  return new Handlebars.SafeString(result);
});

이 코드는 전달된 매개변수를 이스케이프하지만, 응답을 안전한 것으로 표시하므로 Handlebars는 "트리플 스태시"를 사용하지 않 더라도이를 이스케이프하지 않습니다.

::: 경고

Handlebars는 JavaScript 문자열을 이스케이프하지 않습니다. 인라인 이벤트 핸들러와 같은 JavaScript를 생성하는 데 Handlebars를 사용하면 크로스 사이트 스크립팅 취약성이 발생할 수 있습니다.

:::

# 부분 템플릿

Handlebars 부분 템플릿은 공유 템플릿을 생성하여 코드 재사용을 허용합니다. registerPartial 메서드를 사용하여 부분 템플 릿을 등록할 수 있습니다:

preparationScript

Handlebars.registerPartial(
    "person", 
    "{{person.name}} is {{person.age}} years old.\n"
)

다음의 템플릿과 입력은

template

{{#each persons}}
  {{>person person=.}}
{{/each}}

input

{
  persons: [
    { name: "Nils", age: 20 },
    { name: "Teddy", age: 10 },
    { name: "Nelson", age: 40 },
  ],
}

다음과 같은 결과를 제공합니다:

output

  Nils is 20 years old.
  Teddy is 10 years old.
  Nelson is 40 years old.

더 알아보기: 부분 템플릿

# 내장 헬퍼

Handlebars는 if 조건문과 each 반복자와 같은 다양한 내장 헬퍼를 제공합니다.

더 알아보기: 내장 헬퍼

# API 레퍼런스

Handlebars는 애플리케이션과 헬퍼를 위한 다양한 API와 유틸리티 메서드를 제공합니다.

더 알아보기: API 레퍼런스

표현식(Expressions) →