안녕하세요. 린치핀소프트 한광희입니다.

제 체감으로는 웹개발의 프론트단(frontend)에 있어서 AJAX의 기술의 활용과 SPA(Single Page web Application)성격의 웹 사이트가 점점 더 많이 대두됨에 따라 HTML와 같은 DOM(Document Object Model,문서 객체 모델)의 조작의 로직을 구성하고 만드는데 작업을 많이 기울이게 되는것 같습니다. 이에 따라 UI/UX 측면에서 사용자 친화적인 화면을 만드는데 더 집중해야 되는 필요성과 더불어 현재 화면에 데이터를 갱신하고 추가하는 작업에 있어 기존 서버단에서 구성하던 로직을 클라이언트에서 효과적으로 구성하는 필요성이 떠올랐습니다.

저희도 웹 개발 초기 DOM의 조작에 있어 많은 부분을 jQuery 라이브러리로 수행하였는데, jQuery로 확실히 충족하지 못하는 요구를 JsRender 템플릿 프레임워크를 사용함으로서 많은 부분을 보완할 수 있었습니다.

screenshot-2016-04-07 20-57-48

보통 사용하게 되는 영역은 템플릿 엔진이 필요하게 되는 상황과 동일한 상황에서 차용됩니다. 예를 들어 기존 테이블에 대량의 데이터를 추가/삭제/갱신하거나 테이블 자체를 삭제하고 새로운 테이블을 추가하는 등의 작업등 정형화된 템플릿안에 데이터를 갱신/추가해야 할때 사용하고 있습니다. 보통 이런작업은 AJAX를 통해 데이터를 JSON이나 XML형식으로 서버로부터 데이터를 수신하고 해당 데이터를 JsRender 템플릿을 이용하여 기존 HTML,DOM에 추가하는 양상으로 개발합니다.

 

JsRender 템플릿의 일반적인 사용은 다음과 같습니다.

1.템플릿(HTML 과 JsRender에서 제공하는 템플릿 태그)을 정의합니다.

2.템플릿에 사용할 데이터를 로드합니다.

3. JsRender의 제공 함수로 템플릿에 데이터를 렌더링 하여 HTML 을 출력합니다.

4. 렌더링에 의해 출력된 HTML을 알맞는 위치에 삽입합니다.

 

 

소스코드 예시

<div id="result"></div>

<!-- 템플릿을 기술합니다 -->
<script id="theTmpl" type="text/x-jsrender">
<div>
 <em>Name:</em> {{:name}}
 {{if showNickname && nickname}}
 (Goes by <em>{{:nickname}}</em>)
 {{/if}}
</div>
</script>
<!-- 템플릿 기술 종료 -->

<script>
var data = [
 {
 "name": "Robert",
 "nickname": "Bob",
 "showNickname": true
 },
 {
 "name": "Susan",
 "nickname": "Sue",
 "showNickname": false
 }
];
// 변수 data 에 템플릿에 렌더링 될 데이터를 배열로 정리 합니다.
// 데이터의 갯수만큼 해당 템플릿에 의해 HTML에 생성됩니다.

var template = $.templates("#theTmpl");
// script 이름 "#theTmpl" 템플릿을 읽어들입니다.

var htmlOutput = template.render(data);
// .render() 함수를 호출하여 data를 매개변수로 전달한후 해당 함수가 HTML을 출력합니다/

$("#result").html(htmlOutput);
// 출력된 HTML을 원하는 위치에 추가합니다.
</script>

템플릿 정의에 대한 예시 소스코드는 위와 같습니다. 템플릿은 <script></script> 태그로 감싼 뒤 해당 태그안에 HTML태그와 JsRender용 템플릿 태그로 기술합니다. 이때 주의할 점은 <script>태그에 해당 템플릿을 식별할수 있는 ID와 “type=’text/x-jsrender'”를 지정해야 합니다.

 

JsRender 는 몇가지 알아두어얄 할 템플릿 문법을 제공합니다.

1.조건문 예시(if 구문)

nickname 값이 존재하면 Nickname : {{:nickname}} 구문을 실행하고 값이 존재하지 않으면 No nickname… 구문을 출력합니다.

{{if nickname}}
  Nickname: {{:nickname}}
{{else}}
  No nickname...
{{/if}}

 

2.데이터의 출력

렌더링 된 데이터에서 name KEY(키)값을 찾아서 해당 키값의 value를 출력합니다

{{:name}} 

 

3. HTML 이스케이프 출력

HTML Injection 예방을 위해서 {{>}} 문법을 사용하면 html이 이스케이프 되어 출력됩니다.

{description: <span class="hljs-string">"A <b>very nice</b> apartment"</span>}
<span class="hljs-template_tag">{{><span class="hljs-expression">description</span>}} </span>

 

4. For 반복문

{{for}} 구문을 사용하여 바인딩 된 데이터를 기준하여 반복문을 실행합니다.

<b>{{:title}}</b>
<ul>
{{for members}}
<li>{{:name}} lives in <b>{{:address.city}}</b></li>
{{/for}}
</ul>

 

이와 같이 자바스크립트와 HTML을 이용하여 클라이언트 영역에서 데이터를 처리하고 템플릿을 차용해야 하는 상황이라면 JsRender 템플릿 프레임워크를 사용하는 방법도 추천드립니다.