-
Handlebars
: JavaScript를 위한 템플릿 엔진
: 템플릿과 데이터를 결합하여 HTML을 생성하는 데 사용
장점
: 간단하고 직관적인 문법
: 로직과 표현을 분리하여 유지보수성 향상, 깔끔한 코드 유지 가능
: 템플릿을 별도로 작성하고 필요할 때 재사용 가능, 동적 콘텐츠 표시에 유용
단점
: 간단하고 반복적인 작업에 적합하나, 복잡한 로직 & 조건 처리를 위해서는 다른 도구나 라이브러리 필요
: 대규모 데이터 & 복잡한 템플릿 처리 시에 성능이 저하될 수 있음.
예시
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Handlebars Example</title>
</head>
<body>
<!-- Handlebars 템플릿 정의 -->
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
<footer>
<p>Written by {{author}}</p>
</footer>
</div>
</script>
<!-- 템플릿을 표시할 위치 -->
<div id="output"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<script>
// Handlebars 템플릿 가져오기
var source = document.getElementById("entry-template").innerHTML;
// 컴파일된 Handlebars 템플릿 생성
var template = Handlebars.compile(source);
// 데이터
var context = {
title: "Handlebars Example",
body: "This is a simple example of using Handlebars templating engine.",
author: "John Doe"
};
// 템플릿에 데이터를 바인딩하여 HTML 생성 후 출력
var html = template(context);
document.getElementById("output").innerHTML = html;
</script>
</body>
</html>