[Underscore.js] 언더스코어 JS 템플릿 엔진 사용하기

언더스코어 JS(Underscore.JS) 템플릿 엔진 사용하기

Underscore.JS(이하 언더스코어)는 자바스크립트 유틸리티(여러 가지 편의를 도와주는) 라이브러리입니다. 언더스코어라는 이름이 의미하는 바와 같이 언더스코어는 모든 함수들을 _를 사용합니다. jQuery가 $를 사용하는 것과 같습니다.

언더스코어는 여러 가지 다양한 유틸성 함수들을 제공하기 때문에 수많은 자바스크립트 프로젝트에서 사용 중이며, 프로젝트 이외에도 여러 자바스크립트 프레임워크나 라이브러리에서 자체적으로 언더스코어를 기본으로 사용하기도 합니다.

그 중 언더스코어에 있는 기능 중 하나인 템플릿 엔진 기능을 사용해 보도록 하겠습니다. 언더스코어에는 Java 진영의 JSP와 같은 스크립트 템플릿 방식의 엔진을 제공합니다. 템플릿을 텍스트로 정의해 두고 <% %> 나 <%= %> 와 같은 특수 태그 안에 템플릿 관련 코드와 변수를 선언하고, JSON 객체를 넘겨 컴파일 하면 최종적인 결과 문자열이 반환되는 방식입니다.

백문이 불여일타라고 하였으니 소스를 보고 직접 키보드는 두드려 보도록 하겠습니다.

Underscore.JS 공식 홈페이지 - https://underscorejs.org/#template

jQuery 공식 홈페이지 - https://jquery.com/

먼저 편의를 위해 jQuery를 사용할 건데 jQuery와 Underscore.JS 라이브러리 파일을 공식 홈페이지에서 받습니다. CDN 주소를 구하여 <script> 태그 안에 정의해서 사용해도 무방합니다.

script 선언

본격적으로 HTML을 작성할 때 다운로드 받은 라이브러리 주소를 적어도 되고 CDN 주소를 넣어도 됩니다.

<!-- 스크립트 라이브러리 선언 -->
<script src="jquery-3.3.1.min.js"></script>
<script src="underscore-min.js"></script>

템플릿 문자열 작성

템플릿 문자열을 작성합니다. 템플릿을 작성할 때는 규칙이 있습니다. <%= 변수명 %>은 변수값을 출력하는 출력문입니다. <% %>는 반복문 같은 템플릿 전용 문법을 작성할 때 사용합니다. 자세한 문법은 언더스코어 공식 문서에 쉽고 자세하게 나와 있으니 참고합니다. <script> 태그에 type을 text/template으로 작성했는데, 브라우저는 이를 자바스크립트 소스가 아닌 단순 템플릿 문자열로 인식합니다.

<!-- 템플릿 문자열 작성 -->
<script type="text/template">
    <h1>
        <%= title %>
    </h1>
    <% items.forEach(function (item, index) { %>
        <p><%= item %></p>
    <% }); %>
</script>

추가적으로 <div> 같은 요소에 따로 템플릿 문자열을 작성한 이후 jQuery로 text를 추출해도 되지만 태그를 인식 안 하는 등의 불편함이 있을 수 있습니다.

템플릿 함수를 생성하고 컴파일하기

_.template(템플릿 문자열) 함수를 사용하면 템플릿 함수가 반환됩니다. 그리고 반환된 템플릿 함수에 변수가 담긴 JSON 객체를 넘겨주어 컴파일하면 최종 결과물이 리턴됩니다.

<!-- 템플릿 문자열 작성 -->
<script type="text/template">
    //jQuery로 템플릿 문자열 셀렉트
    var templateText = $('script[type="text/template"]').text();

    //템플릿 문자열로 템플릿 함수 생성
    var template = _.template(templateText);

    //데이터를 JSON 객체로 넘겨주고 템플릿 컴파일
    var result = template({
        title: "underscore",
        items: ["aaaa", "bbb", "cccc"]
    });

    //컴파일된 결과를 jQuery로 body에 삽입
    $('body').html(result);
</script>

최종 소스

위 과정들을 종합하면 최종 소스는 다음과 같습니다.

브라우저로 소스를 실행하니 다음과 같이 보여집니다.