소개
Handlebars란 무엇인가요?
Handlebars는 간편한 템플릿 언어입니다.
템플릿과 입력 객체를 사용하여 HTML 또는 다른 텍스트 형식을 생성합니다. Handlebars 템플릿은 일반 텍스트와 유사하며, Handlebars 표현식이 포함되어 있습니다.
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 표현식을 정의합니다.
입력 객체에 적용하면:
표현식은 해당 속성으로 대체됩니다. 결과는 다음과 같습니다:
중첩된 입력 객체
때때로 입력 객체는 다른 객체나 배열을 포함합니다. 예를 들어:
이 경우, 점 표기법을 사용하여 중첩된 속성에 접근할 수 있습니다.
일부 내장 헬퍼는 현재 컨텍스트를 중첩된 객체로 변경할 수 있습니다. 그런 다음 이 객체를 루트 객체처럼 접근할 수 있습니다.
평가 컨텍스트
내장 블록 헬퍼 each와 with는 현재 평가 컨텍스트를 변경할 수 있게 합니다.
with 헬퍼는 객체 속성으로 들어가서 해당 속성에 접근할 수 있게 합니다.
each 헬퍼는 배열을 반복하며, 각 객체의 속성에 간단한 Handlebars 표현식을 통해 접근할 수 있게 합니다.
템플릿 주석
코드에서 주석을 사용하는 것처럼 Handlebars 코드에서도 주석을 사용할 수 있습니다. 일반적으로 일부 논리가 있기 때문에 이는 좋은 습관입니다.
주석은 결과 출력에 포함되지 않습니다. 주석을 출력에 포함하고 싶다면 HTML 주석을 사용하면 됩니다.
}} 또는 다른 Handlebars 토큰을 포함해야 하는 주석은 {{!-- --}} 구문을 사용해야 합니다.
커스텀 헬퍼
Handlebars 헬퍼는 템플릿의 어느 컨텍스트에서도 접근할 수 있습니다. Handlebars.registerHelper 메서드를 사용하여 헬퍼를 등록할 수 있습니다.
헬퍼는 현재 컨텍스트를 함수의 this 컨텍스트로 받습니다.
블록 헬퍼
블록 표현식을 사용하면 현재 컨텍스트와 다른 컨텍스트로 템플릿의 섹션을 호출하는 헬퍼를 정의할 수 있습니다. 이러한 블록헬 퍼는 헬퍼 이름 앞에 #를 붙여 식별하며, 동일한 이름의 닫는 머스태시 /가 필요합니다. HTML 목록을 생성하는 헬퍼를 살펴 보겠습니다:
이 예제는 HTML 목록을 생성하기 위한 list라는 이름의 헬퍼를 만듭니다. 헬퍼는 첫 번째 매개변수로 people을 받고, 두 번 째 매개변수로 options 해시를 받습니다. options 해시는 fn이라는 속성을 포함하며, 이를 일반 Handlebars 템플릿을 호출 하듯이 호출할 수 있습니다.
템플릿이 실행되면 다음과 같이 렌더링됩니다:
블록 헬퍼는 더 많은 기능을 가지고 있으며, if 헬퍼가 사용하는 else 섹션을 생성할 수도 있습니다.
블록 헬퍼의 내용을 options.fn(context)로 호출할 때 이스케이프되므로 Handlebars는 블록 헬퍼의 결과를 이스케이프하지 않 습니다. 이스케이프할 경우 내부 콘텐츠가 이중으로 이스케이프되기 때문입니다.
HTML 이스케이프
원래 HTML을 생성하기 위해 설계되었기 때문에 Handlebars는 {{expression}}이 반환하는 값을 이스케이프합니다. 값이 이스케 이프되지않도록 하려면 "트리플 스태시"인 {{{를 사용하세요.
두 번째 줄의 특수 문자는 이스케이프됩니다:
Handlebars는 Handlebars.SafeString을 이스케이프하지 않습니다. 자체 HTML을 생성하는 헬퍼를 작성하는 경우, 일반적으로 new Handlebars.SafeString(result)를 반환하고 싶을 것입니다. 이러한 상황에서는 매개변수를 수동으로 이스케이프해야 합니 다.
이 코드는 전달된 매개변수를 이스케이프하지만, 응답을 안전한 것으로 표시하므로 Handlebars는 "트리플 스태시"를 사용하지 않 더라도이를 이스케이프하지 않습니다.
경고
Handlebars는 JavaScript 문자열을 이스케이프하지 않습니다. 인라인 이벤트 핸들러와 같은 JavaScript를 생성하는 데 Handlebars를 사용하면 크로스 사이트 스크립팅 취약성이 발생할 수 있습니다.
부분 템플릿
Handlebars 부분 템플릿은 공유 템플릿을 생성하여 코드 재사용을 허용합니다. registerPartial 메서드를 사용하여 부분 템플 릿을 등록할 수 있습니다:
다음의 템플릿과 입력은
다음과 같은 결과를 제공합니다:
내장 헬퍼
Handlebars는 if 조건문과 each 반복자와 같은 다양한 내장 헬퍼를 제공합니다.
API 레퍼런스
Handlebars는 애플리케이션과 헬퍼를 위한 다양한 API와 유틸리티 메서드를 제공합니다.