JS TEMPLATE ENGINE 의 개념과 Handlebars 사용법

안녕하세요

오늘은 js template engine에 대한 소개를 해보려고 합니다.

js template engine이란?

템플릿 엔진의 등장 배경

웹에는 서버, 클라이언트가 있습니다.

기존에는 서버에서 데이터 베이스의 데이터를 가져온 뒤 HTML로 만들어 클라이언트에게 보내주었습니다.

하지만 이 방식은 페이지의 일부만 변경해도 전체 페이지를 다시 그려야 하는 문제가 있었습니다.

이를 보완하기 위해 Ajax가 등장했고, 변경이 필요한 부분만 재가공하여 보여주는 것이 가능해졌습니다.

보통 js, Jquery를 사용하는 경우 HTML에 가공된 데이터를 보여주는데,

조금의 실수라도 있는 경우, 페이지가 보이지 않거나 이상하게 보입니다.

이 때문에 사람 친화적인 문법을 가지고

서버에서 받아온 데이터를 효과적으로 보여줄 중간매체로서 js template engine이 등장하게 되었습니다.

템플릿 엔진의 장점

1.많은 코드를 줄일 수 있습니다.

HTML에 비해 간단한 문법을 사용합니다.

2.재사용성이 높습니다.

똑같은 디자인 페이지에 보이는 데이터만 바뀔 때,
template engine 문법으로 만들고 데이터를 바꿔주기만 하면 됩니다.

3.유지보수에 용이합니다.

template engine을 사용하면 동일한 template을 사용한다는 전제하에
template에 넘겨주는 데이터만 수정하면 됩니다.

템플릿 엔진 작동 흐름

1.클라이언트에서 공통적인 프레임을 미리 template으로 만든다.
2.서버에서 필요한 데이터를 받는다.
3.데이터를 template의 적절한 위치에 replate하고 DOM 객체에 동적으로 그립니다.

 

템플릿 엔진 HANDLEBARS

다양한 종류의 템플릿 중 PUG와 HANDLEBARS, EJS 중 어떤 템플릿 사용할지 고민이 되었습니다.

템플릿 종류는 아래 링크를 참고했습니다.
https://colorlib.com/wp/top-templating-engines-for-javascript/

• EJS는 JSP 태그와 비슷해 혼동 가능성이 있어 제외하였습니다.
• PUG는 HTML 기반의 프로그램에서 더 잘 쓰이지만 제가 진행중인 프로젝트는 JSP 기반이므로 제외하였습니다.

HANDLEBARS의 장점

HANDLBARS 템플릿 문법이나 설명은 이 링크를 참조하세요.
https://handlebarsjs.com/guide/#what-is-handlebars

• JSP 태그와 혼동되지 않는 표현식을 사용합니다. {{#id}}, {{변수명}}
• 표현식이 간결합니다.
• 엔진 적용이 다른 템플릿 엔진에 비해 쉽습니다.

HANDLEBARS 적용방법

1.HANDLEBARS 공식 사이트 접속
https://handlebarsjs.com/installation/#npm-or-yarn-recommended

2. Installation > Downloading Handlebars > Latestrelease > compiler + runtime 다운로드

3. 다운로드한 js 파일 프로젝트에 넣어주기

페이지에 공통으로 쓰일 파일이므로 js 폴더 최상위 경로에 해당 파일을 넣어주었습니다.

<script src="<%=request.getContextPath()%>/js/handlebars-v4.7.7.js"></script>

js파일을 jsp에서 쓰기 위해 위 코드를 추가하여 연결해주었습니다.

HANDLEBARS 사용법

핸들바를 사용하기 위해서는 다음 스크립트가 필요합니다.

• template에 변수 선언
• 핸들러 함수에 key, value값 지정
• 해당변수에 값을 넣으면 넣은 값이 출력

 

---

예제1 값 불러오기

//TEMPLATE
{{> helloHandlebars }}

/PREPARATION-SCRIPT
Handlebars.registerPartial('helloHandlebars', '{{name}}');

//OUTPUT
{ name: "홍길동" }

 

---

예제2 LIST 요소 만들기

//TEMPLATE
{{#list people}}{{firstname}} {{lastname}}{{/list}}

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

//INPUT
{
  people: [
    {
      firstname: "Yehuda",
      lastname: "Katz",
    },
    {
      firstname: "Carl",
      lastname: "Lerche",
    },
    {
      firstname: "Alan",
      lastname: "Johnson",
    },
  ],
}

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

 

---

예제3 배열요소와 text 함께 불러오기

//TEMPLATE
{{#each animals}}
  {{>animal animal=.}}
{{/each}}

//PREPARATION-SCRIPT
Handlebars.registerPartial(
    "animal", 
    "{{animal.name}} is {{animal.age}} years old.\n"
)

//INPUT
{
  animals: [
    { name: "TURTLE", age: 120 },
    { name: "BEAR", age: 10 },
    { name: "RABBIT", age: 2 },
  ],
}

//OUTPUT
TURTLE is 120 years old.
BEAR is 10 years old.
RABBIT is 2 years old.