최근 자바스크립트에서도 MVC 모델이 주목을 받으면서, AngularJS가 주목을 받고있다.
하지만 대부분의 웹사이트는 이러한 MVC 모델로 설계되지 않아 개발 상에서 적용이 힘든 경우가 많다.
개발자의 능력이 점점 세분화되어 감에 따라 협업과 소스 관리의 용이함을 위해서는
개발 요소에 대한 분리(MVC의 경우, 모듈, 뷰, 컨트롤러이다)가 진행되면 많은 도움이 된다.
이 포스트에서는 MVC 모델 대신 우리에게 '템플릿'으로 더 많이 알려진 방식을 사용하는 프레임워크
JSrender, JSviews에 대해 알아보자
클라이언트 사이드 자바스크립트에서 MVC 프레임워크를 사용할 수 없는 환경에서
템플릿(뷰)를 분리하고자 할 때 유용하게 활용할 수 있을 것이다.
1. JSrender, JSview 살펴보기
JSrender는 아래와 같은 상황을 개선하기 위해 만들어졌다. (제이쿼리 AJAX 예제)
$.ajax((
dataType: "json",
url: "load.aspx",
success: function(data) {
$(selector).append('<li>' + data.one + '</li>');
}
});
스크립트 안에 들어있는 HTML 태그를 템플릿 형태로 분리함을 목적으로 한다.
그리하여 분리된 템플릿은 아래와 같은 모양을 가진다.
<li>{{:one}}</li>
물론 위 예시는 템플릿을 별도의 파일로 분리하였을 때 예시이다. 분리하지 않을 때는 아래처럼 선언한다.
<script id="theTmpl" type="text/x-jsrender">
<li>{{:one}}</li>
</script>
선언을 하면 이를 뿌려줄(Rendering)할 메소드 또한 필요한데, 사용법에서 자세히 살펴보도록 하자.
2. 사용법
1) 템플릿을 파일로 분리하지 않을 때
JSrender, JSviews에서 제시된 기본 예제는 템플릿 파일이 분리되지 않은 예제이다. 확인해보자.
<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
}
];
var template = $.templates("#theTmpl"); <!-- 템플릿 선언 위치 지정 -->
var htmlOutput = template.render(data); <!-- 렌더링 진행 -->
$("#result").html(htmlOutput); <!-- 렌더링 결과 뿌려줌 -->
</script>
템플릿을 파일로 분리하지 않을 때 기본 사용법은 이렇다. 그렇다면 파일을 분리하고자 한다면?
2) 템플릿을 별도의 파일로 분리할 때
템플릿을 별도의 파일로 분리하고자 할 때의 예제이다. 제이쿼리에서는 when-done 메소드를 지원하는데
이를 이용하여 템플릿을 적용하는 예제이다.
// 템플릿 로드 함수
var renderExternalTmpl = function(item) {
var file = relative_path + '/ajax/' + item.name + '.tmpl.html';
$.when($.get(file))
.done(function(tmplData) {
$.templates({ tmpl: tmplData });
$(item.selector).html($.render.tmpl(item.data));
});
}
$.ajax((
dataType: "json",
url: "load.aspx",
success: function(data) {
renderExternalTmpl({ name: 'comment', selector: "#result", data: data });
}
});
이렇게하면 외부 파일을 템플릿으로 사용하여 불러오는 것이 가능해진다.
3) 루프(FOR)를 돌려야 할 때
루프를 돌려야할 때는, 받은 JSON 데이터가 아래의 형식을 만족하여야 한다.
{ "title": "alphabets", "list": [
{ "code: "ab", "fruit": "apple"},
{ "code": "cd", "fruit": "banana"},
{ "code": "ab", "fruit": "kiwi"}
]}
템플릿 파일에서 아래처럼 적용하면 루프도 가능해진다.
{{for list}}
<li>code: {{:code}}, fruit: {{:fruit}</li>
{{/for}}
4) 루프 내 외부 변수(External/Parent Variable) 선언이 필요할 때
루프 내에서 사용할 변수도 선언 가능하다. 아래처럼 하면 된다.
부모 변수에 대한 접근이 필요하다면, 아래처럼 부모 변수를 넣어주면 된다.
{{for list ~num=num}}
<li>code: {{:code}}, fruit: {{:fruit}</li>
{{/for}}
3. 실제 사용해보기
코드 작성을 완료 한 후 AJAX 성공 시 템플릿이 적용되도록 했으므로, AJAX 실행 후 정상 출력되는지 확인한다.
4. 참고 사이트
https://msdn.microsoft.com/en-us/magazine/hh975379.aspx
http://jsreport.net/learn/jsrender
http://www.jsviews.com/#jsrender
http://stackoverflow.com/questions/10413894/store-a-jsrender-template-in-a-separate-js-file