wp-util #1: wp.template

오늘은 wp-util 스크립트를 소개하고자 한다. 경로는 /wp-includes/js/wp-util.js 이고, 이 스크립트 안에는 두가지 도구가 있는데, 하나는 wp.template, 나머지 하나는 wp.ajax이다. 간단하게 포스팅하는 것이 1일 1워프의 주제인데, 오늘 하루에 두가지를 다 포스팅하기는 내가 너무 힘들고 분량도 아까우므로 🙂 오늘은 그중 하나인 wp.template 만 알아보도록 하자.

wp.template은 underscore의 template을 워드프레스에서 좀 더 사용하기 편리하게 래핑한 객체이다. 프론트에서 동적으로 마크업을 생성해야 할 때, 그리고 그 마크업의 구조가 조금 복잡할 때, 그러나 그렇다고 리액트나 뷰 같은 프레임워크를 동원해야 할 만큼 큰 일이 되지는 않을 때 사용하기 적합하다.

약간 한 세대 지난 듯한 기술인 듯해도… 여러 상황에서 생각할 수 있는 옵션의 하나로 고려했으면 한다. (아직도 사용하는지는 모르겠지만) 엘리멘터나, 코어에서는 테마 미리 보기 화면 등에서 여전히 잘 사용되고 있다.

아무 대책없이 자바스크립트만을 이용해서 HTML 태그를 동적으로 찍어 본 경험이 있다면 알 것이다. 매우매우 불편하다. 이럴 때 이 wp.template을 사용하자. 훨씬 더 알아보기 괜찮다. 거창한 셋업도 필요하지 않고.

아래 간단한 샘플 코드를 통해 어떻게 하는 건지 간단하게 감을 잡아 보면 좋겠다.

<?php
wp_enqueue_script( 'wp-util' ); // Point #1
?>

<!-- HTML -->
<ul id="list"></ul> 

<!-- Point #2 -->
<script type="text/template" id="tmpl-sample">
<li>{{ data.text }}</li> <
</script>

<script>
// Point #3
(function ($) {
    var t = wp.template( 'sample' );
    $('#list').append(t({text: 'Hello!'}));
})(jQuery);
</script>Code language: HTML, XML (xml)

우선 Point #1, wp_enqueue_script( 'wp-util' ); 처럼 호출하여 wp-util 스크립트를 사용할 수 있도록 준비한다.

그리고 Point #2 처럼 HTML 코드를 ‘템플릿’으로 작성한다. <script> 태그의 type=”text/template” 이라는 속성이 특이하다. 이 안에 마치 HTML 태그를 사용는 것과 비슷한 콧수염 문법을 사용해 템플릿을 작성한다.

• 단순히 변수값을 호출하려면 {{ … }}
• 이스케이핑을 하지 않는 (위험한) 출력은 {{{ … }}}
• 자바스크립트 구문을 바로 사용하려면 <# … #>

그리고 Point #3 처럼 스크립트에서 템플릿을 읽어와 문맥을 객체 형태로 집어 넣어 출력한다. 여기서 주의할 점이, script 태그의 속성에서는 ‘tmpl-‘ 접두를 반드시 붙여야 하고, wp.template()의 인자로 적을 때는 그 접두를 생략한다.

더 자세한 사항은 wp.template() 문서를 참조하고, 다음포스팅에서 나머지 기능인 wp.ajax와 오늘의 wp.template과 같이 아주 간단한 예제 플러그인을 작성해 설명을 이어간다.