handlebars - server 와 client 동시에 사용하기

hbs 파일에 {{}} 이런거 써두면 서버에서 먼저 읽어서 변환 시켜 버리기 때문에 클라이언트에서 사용 할 수 없다. 이럴 때 어떻게 할지 해결 방법

escape

단순히 {{ 앞에 \ 를 넣어서 escape 시켜서 사용 한다. 단순한 방법으로 사용 할 수 있다. 다만 코드가 좀 지저분 해 지는 단점이 있다.

아래와 같은 handlebars 템플릿 코드가 있으면

{{body}}

아래와 같이 바꿔 주면 된다.

\{{body}}

precompile

코드는 깔끔해지긴 하지만 클라이언트 사이드 템플릿이 변경 되면 매번 컴파일 해 줘야 되는 불편함이 있다. 처음보는 사람인 경우 직관적으로 이해하기 어렵다.

npm install handlebars -g

handlebars client-template1.handlebars -f templates.js

<script src="templates.js"></script>

var html = Handlebars.templates["client-template1"](context);

한쪽 포기

그냥 서버사이드는 jade 나 다른 템플릿 엔진 사용하고 handlebars 는 클라이언트만 사용 하는 방법

선택

취향이나 상황에 따라 다르겠지만 일단 escape 방식을 선택 했다. 이유는 조금 지저분 해 지기는 하지만 직관적으로 왜 그랬는지 이해하기 좋기 때문이고 추가 작업이 필요 없기 때문이다.

precompile 은 속도 변에서 좀 더 유리한 점이 있겠지만 직관적으로 이해하기 어렵고 선작업이 필요 하기 때문에 불편하다. 이렇게 짠 코드를 누군가가 갑자기 유지 보수 해야 된다고 생각하면 좀 끔찍할 거 같다.

참고

Node.js with Handlebars.js on server and client

http://stackoverflow.com/questions/10037936/node-js-with-handlebars-js-on-server-and-client

Using Handlebars helpers on both client and server 2014.03.16

http://www.codyrushing.com/using-handlebars-helpers-on-both-client-and-server/

Handlebars (for Java) 서버, 클라이언트 동시에 사용하기 2014.08.31

http://blog.javarouka.me/2014/08/handlebars-for-java_31.html