웹 개발에 있어서 유용한 템플릿 라이브러리인 Handlebars.js에 대해 알아보겠습니다. 이 글을 통해 Handlebars.js의 기능과 사용 방법을 자세히 배워보세요.
1. Handlebars.js 소개:
Handlebars.js는 클라이언트와 서버 측에서 사용할 수 있는 인기있는 자바스크립트 템플릿 엔진으로, Mustache 템플릿 엔진을 확장한 버전입니다. HTML과 데이터를 구분하여 렌더링할 때, 뷰와 데이터를 쉽게 결합할 수 있도록 도와줍니다. Handlebars는 선언적인 방식으로 템플릿을 작성할 수 있으며, 동적 컨텐츠를 쉽게 표현할 수 있습니다. 이러한 특징 덕분에 코드의 재사용성이 높아지며, 유지 관리가 용이한 구조를 만들 수 있습니다.
2. Handlebars.js 설치 및 설정:
CDN을 사용하는 경우, 아래 코드를 HTML 파일의 <head> 태그 내에 추가합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>npm을 사용하여 설치하는 경우, 다음 명령어를 실행합니다.
npm install handlebars설치 후, 모듈을 가져오는 방식으로 사용할 수 있습니다.
const Handlebars = require('handlebars');3. 기본 사용법:
(1) HTML에서 템플릿 작성: <script> 태그에 type="text/x-handlebars-template" 속성을 추가하고, 템플릿 내용을 작성합니다.
<script id="sample-template" type="text/x-handlebars-template">
<p>Hello, {{name}}!</p>
</script>(2) 자바스크립트에서 템플릿 컴파일: 템플릿을 가져와서 Handlebars.compile() 함수를 사용하여 컴파일합니다.
const source = document.getElementById("sample-template").innerHTML;
const template = Handlebars.compile(source);(3) 자바스크립트에서 데이터 객체 생성: 템플릿에 적용할 데이터를 객체 형태로 생성합니다.
const data = { name: "John Doe" };(4) 컴파일된 템플릿에 데이터 적용: 컴파일된 템플릿에 데이터를 적용하여 결과 HTML을 생성합니다.
const resultHTML = template(data);(5) 결과 HTML 삽입: 결과 HTML을 웹 페이지에 삽입합니다.
document.getElementById("target").innerHTML = resultHTML;4. 표현식(Expression)과 도우미(Helper):
표현식은 중괄호 {{ }}로 감싸진 형태로 작성되며, 데이터 객체의 값을 가져옵니다. 예를 들어, {{name}}은 데이터 객체에서 name 속성의 값을 가져옵니다.
도우미는 Handlebars.js에서 제공하는 내장 함수로, 템플릿 내에서 사용할 수 있습니다.
if: 조건문을 사용할 수 있습니다.
{{#if isActive}}
<p>Active</p>
{{else}}
<p>Inactive</p>
{{/if}}each: 배열이나 객체를 반복하여 처리할 수 있습니다.
<ul>
{{#each items}}
<li>{{this}}</li>
{{/each}}
</ul>with: 특정 데이터 범위를 지정하여 해당 범위에서 데이터를 사용할 수 있습니다.
{{#with user}}
<p>{{name}} - {{age}}</p>
{{/with}}5. 블록 헬퍼(Block Helper):
블록 헬퍼는 사용자 정의 도우미와 함께 커스텀 로직을 수행하는 데 사용됩니다. 블록 헬퍼는 표현식 앞에 #을 사용하여 정의하며, 해당 블록의 범위를 지정할 수 있습니다.
예를 들어, 배열의 원소 개수가 0인지 확인하는 블록 헬퍼를 작성해봅시다.
Handlebars.registerHelper('isEmpty', function(arr, options) {
if (Array.isArray(arr) && arr.length === 0) {
return options.fn(this);
} else {
return options.inverse(this);
}
});이제 HTML 템플릿에서 이 블록 헬퍼를 사용할 수 있습니다.
{{#isEmpty items}}
<p>No items found.</p>
{{else}}
<ul>
{{#each items}}
<li>{{this}}</li>
{{/each}}
</ul>
{{/isEmpty}}6. 커스텀 헬퍼(Custom Helper) 작성:
사용자가 직접 커스텀 헬퍼를 작성하여 필요한 기능을 구현할 수 있습니다. 예를 들어, 문자열을 대문자로 변환하는 헬퍼를 작성해봅시다.
Handlebars.registerHelper('toUpperCase', function(str) {
return str.toUpperCase();
});이제 HTML 템플릿에서 이 헬퍼를 사용할 수 있습니다.
7. 프리컴파일(Precompiling) 사용법:
프리컴파일은 템플릿을 빌드 과정에서 미리 컴파일하여 클라이언트 측에서의 처리를 줄이는 기능입니다. 이를 통해 성능 향상과 파일 크기 절감을 도모할 수 있습니다. 프리컴파일을 사용하려면 먼저 Handlebars의 커맨드 라인 인터페이스(CLI)를 설치해야 합니다.
npm install -g handlebars이제 터미널에서 다음 명령어를 사용해 프리컴파일을 수행할 수 있습니다.
handlebars template.hbs -f output.js이렇게 생성된 output.js 파일을 웹 페이지에 포함시키면 프리컴파일된 템플릿을 사용할 수 있습니다. 프리컴파일된 템플릿은 Handlebars.templates 객체에 저장되며, 템플릿 이름은 파일 이름을 기반으로 합니다. 예를 들어, template.hbs를 프리컴파일한 경우, 웹 페이지에서 다음과 같이 사용할 수 있습니다.
const data = { name: "John Doe" };
const resultHTML = Handlebars.templates['template'](data);
document.getElementById("target").innerHTML = resultHTML;Handlebars.js의 기본 사용법과 표현식, 도우미, 블록 헬퍼, 커스텀 헬퍼, 프리컴파일 등에 대해 상세히 설명했습니다. 이러한 지식을 바탕으로, Handlebars.js를 활용하여 효율적인 웹 개발 작업을 수행할 수 있을 것입니다. 이제 여러분도 Handlebars.js로 웹 프로젝트를 진행하며 코드 재사용성과 유지 관리가 용이한 구조를 만들어보세요.
'개발 > js' 카테고리의 다른 글
| 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression) (0) | 2023.04.15 |
|---|---|
| JavaScript 에서 == 와 ===의 차이점 (0) | 2023.04.07 |
| 스크립트릿(scriptlet) (0) | 2023.04.05 |
| npm init과 npm install (0) | 2023.04.05 |
| Mustache 템플릿 엔진 사용법 (0) | 2023.04.04 |