JavaScript 활용팁
2016.02.15 / 02:05
Handlebars 템플릿 엔진
devon
추천 수 282
발생일: 2013.06.24
문제:
문제:
자바스크립트 템플릿 엔진 중의 하나인 `Handlebars`에 대한 간단한 소개이다.
팀에서 어떤 템플릿 엔진을 쓸 지 정하지 않았을 무렵에,
내가 개인적으로 좋아하는 핸들바를 추천하기 위해 메모해뒀던 것이다.
지금 팀에서는 `Mustache`를 쓰고 있지만,
난 여전히 개인 프로젝트에는 핸들바를 즐겨쓴다. ㅎㅎ
해결책:
템플릿 엔진 선택 가이드
자바스크립트 템플릿 사용 가이드:
소개:
Mustache를 기반으로 구현한 자바스크립트 템플릿 엔진
두 개의 브레이스 {{ }} 를 사용해 변환하며, '헬퍼' 개념으로 자유롭게 값을 컨트롤 할 수 있음.
간단 사용법:
- {{title}} 과 같은 형태로 표현
- 반복 등의 기본적인 헬퍼가 존재함.
{{#each userlist}}
{{user}}
{{/each}}
- 자유롭게 헬퍼를 등록해서 처리할 수 있음
Handlebars.registerHelper('addComma number', function (number) {
var added = // 숫자에 컴마 추가
return added;
});
장점:
- precompile 할 수 있으며, precompile 했다면 런타임 코드만 추가하면 된다. (Gzip 및 압축 전, 10K)
- JADE와 같은 문법에 비해 친숙하면서도 가독성이 높다.
- Ember, YUI 및 여러 프로젝트에서 채택해서 사용하고 있다. 안정성을 기대해도 좋다.
- 언더스코어나 마이크로 템플릿은 빠르지만, 핸들바는 다양하게 활용할 수 있다는 장점이 있다.
- 헬퍼를 자유롭게 추가할 수 있다.
헬퍼의 예로는, URL을 링크 태그로 표현한다던가, 숫자에 컴마를 추가하는 등을 떠올리면 된다.
- Grunt 등으로 빌드 자동화에 precompile 과정을 포함시키기 쉽다.
팁:
- 헬퍼는 컴파일한 함수를 호출하기 전에만 추가하면 된다.
- each 헬퍼로 반복할 때 @index 와 @key 값으로 인덱스와 키를 참조할 수 있다.
- {{log}} 블럭으로 템플릿 출력 시 로깅할 수 있다.
- {{! }} 블럭으로 주석을 표기할 수 있다.
- 괄호를 3개 사용하면 HTML 요소는 자동으로 이스케이프됨. {{{body}}}
사용시 고려사항:
- 템플릿에는 로직 코드를 넣지 않는 것이 좋다.
템플릿을 알아보기 어려울 뿐만 아니라 컴파일한 템플릿에서 오류가 발생하면 디버깅하기 어렵기 때문이다.
단, true/false 정도의 분기나, 단순한 배열 반복문 정도는 괜찮다고 본다.
또한 템플릿 문법에서 제공하는 거라면 가독성 측면에서도 더 효율적이라는 생각이다.
템플릿 작성 가이드:
- 한 템플릿이 200라인을 넘지 않게 한다.
- 템플릿 내에 반복, 분기 이외의 로직 코드를 넣지 않는다.
- 파일은 xx에 추가하면, 파일명 이름은 xx 형태로 한다.
- 템플릿의 이름은 xx 형태로 만든다.
- 어떤 템플릿이 서브 템플릿이라면 xx 형태의 이름으로 추가한다.
내지는 서브템플릿임을 알릴 수 있는 방법을 제시한다??
핸들바에서 함수 사용하기
우리는 템플릿 내에서 객체의 메서드를 호출하는 방식으로 처리하려고 한다.
하지만, 핸들바의 저자는 템플릿 출력에는 문자와 숫자만 사용하는 걸 생각하며,
대시 헬퍼를 사용하는 것을 권장한다.
핸들바의 디자인과는 어긋나지만 컴파일러를 수정해서 함수를 사용할 수 있다.
실제로 Ember 등의 프로젝트에서 컴파일러를 수정한 확장본을 사용하고 있다.