Javascript Template Engine - Handlebars.js 개념 및 사용 방법

Handlebars.js는 자바스크립트에서 사용하는 인기 있는 템플릿 엔진입니다. 

이것은 HTML과 자바스크립트를 분리하여 애플리케이션을 보다 유지 관리하기 쉽게 만들어 줍니다. 

Handlebars.js는 Mustache 템플릿 엔진의 확장이며, Mustache와 호환됩니다.

 

Handlebars.js의 기능

 

템플릿: Handlebars는 템플릿을 사용하여 동적 HTML을 생성합니다. 

템플릿은 HTML과 Handlebars 표현식을 포함하는 문자열입니다.

 

표현식: Handlebars 표현식은 {{expression}}와 같은 형태로 작성됩니다. 표현식은 HTML 파일 내에 삽입됩니다. Handlebars는 데이터 객체를 사용하여 표현식을 교체합니다.

블록 표현식: 블록 표현식은 {{#block}} ... {{/block}}와 같은 형태로 작성됩니다. 블록 표현식은 반복, 조건부 렌더링 등을 수행하는데 사용됩니다.

헬퍼: 헬퍼는 사용자 정의 함수로, 템플릿 내에서 호출할 수 있습니다. 헬퍼는 템플릿과 데이터 사이에서 추가적인 처리를 수행하는 데 사용됩니다.

파셜: 파셜은 재사용 가능한 템플릿 조각입니다. 여러 템플릿에서 공통적으로 사용되는 HTML을 파셜로 정의할 수 있습니다.

 

 

Handlebars.js 사용 방법

 

라이브러리 추가: Handlebars.js 라이브러리를 HTML 파일에 추가합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>

템플릿 작성: HTML 파일 내에 템플릿을 작성합니다.

<script id="template" type="text/x-handlebars-template">
    <h1>{{title}}</h1>
    <ul>
        {{#each items}}
            <li>{{this}}</li>
        {{/each}}
    </ul>
</script>

컴파일: 템플릿을 컴파일합니다.

var template = Handlebars.compile(document.getElementById('template').innerHTML);

렌더링: 컴파일된 템플릿에 데이터를 전달하여 HTML을 생성합니다.

var data = {
    title: 'My List',
    items: ['Item 1', 'Item 2', 'Item 3']
};
var html = template(data);

DOM에 삽입: 생성된 HTML을 DOM에 삽입합니다.

document.getElementById('output').innerHTML = html;

여기서는 기본적인 Handlebars.js의 사용 방법에 대해 설명했습니다. 

Handlebars.js는 더 많은 기능을 제공하므로, 공식 문서를 참조하여 더 많은 정보를 얻을 수 있습니다.

 

---

참고자료

---

https://blog.naver.com/PostView.nhn?blogId=dktmrorl&logNo=222247946319&parentCategoryNo=&categoryNo=44&viewDate=&isShowPopularPosts=false&from=postView 

[JavaScript] Handlebars.js 개념 및 사용 방법

 

 

https://programmingsummaries.tistory.com/381

[JavaScript] 예제로 확인하는 handlebars.js 사용 방법