Handlebars - 반복적인 부분을 출력하고 싶을 때, 코드를 깔끔하게

목록 형태의 데이터를 받았을 때,,

HTML 태그를 포함해, 데이터를 반복적으로 표시해야하는 경우가 있습니다.

예로, DB로부터 List 데이터를 받아 목록 형태로 만들고 싶을 때가 있죠.

순수 java script, jQuery만 사용하면,, 코드가 지저분해지기 쉬운데요.

코드를 한번 깔끔하게 만들어봅시다.

위 코드에서 id가 replies인 ul 태그 안에 넣어보겠습니다.

현재는 간단한 상황을 예로 든 것이라 괜찮지만,

출력할 정보가 많아질수록 가독성이 떨어지고 지저분한 코드가 만들어집니다.

이를 조금 보완하기 위해,, jQuery에서 템플릿을 제공하는데요,

제일 많이 쓰이는 Mustache를 기반으로 작성된 Handlebars 템플릿을 사용해보겠습니다. 

템플릿이라는 말 그대로, 공장에서 제품을 생산해내는 '틀'을 생각하시면 됩니다.

자 그럼, 이제 Handlebars를 사용해 코드를 깔끔하게 만들어 봅시다.

우선, 아래와 같이 틀을 먼저 만들어줍니다.

실제론 태그 구분이 안되고 전부 일반 문자로 인식됩니다.

그리고 이렇게 만든 틀을 사용하기만 하면 됩니다.