[템플릿 엔진] handlebars , handlebars로 HTML 파일 나누기 (중복제거)

handlebars 템플릿 엔진

참고 : 블로그. 감사합니다.

자바스크립트로 설명하고 있지만 큰 맥락을 이해하는 데에 도움이 되었다.

handlebars는 템플릿 엔진의 하나이다.

• mustache를 기반으로 구현되어 문법이 거의 같다.

• mustache와의 주요 차이점은 헬퍼가 존재한다는 것이다.

  • 헬퍼를 사용하면, 템플릿 엔진에 간단한 로직을 포함시킬 수 있다.
  • handlebars가 제공하는 헬퍼도 있고,
  • 사용자가 직접 헬퍼를 등록해 사용할 수도 있다.

handlebars 사용을 위한 설정 (스프링 부트, gradle)

• build.gradle

  • dependencies에 compile 'pl.allegro.tech.boot:handlebars-spring-boot-starter:0.3.2' 추가

• application.properties

  • handlebars.suffix=.html
    handlebars.cache=false

❗ 주의

템플릿에는 로직을 넣지 않는 것이 일반적이다. 로직을 넣으면 템플릿의 가독성이 떨어지고, 템플릿에서 오류가 발생했을 때 디버깅이 어렵다. 따라서 템플릿에 로직을 넣더라도 간단한 분기문, 배열, 반복문 정도만 사용하는 것이 좋다.

[handlebars] HTML 파일 나누기(중복제거)

handlebars 문서 참고했습니다.

HTML 파일에 중복이 많을 때 (header, footer 등) 다음과 같이 파일을 나누어 중복을 제거할 수 있다.

(handlebars를 활용한 방법)

다른 html파일과 중복되는 부분 (header, footer)의 중복을 제거한다.

기존 파일

<h1>header!</h1>
<p>put some messages</p>
<span>footer!</span>

먼저 중복되는 부분을 별도의 html파일로 만든다.

header.html

<h1>header!</h1>

footer.html

<span>footer!</span>

그리고 {{> 파일명}}으로 중복코드를 치환해주면 끝.

{{> header}}
<p>Home page</p>
{{> footer}}