jQuery Template과 jsRender로 만드는 동적 HTML 생성

기존 동적 HTML 생성에 대한 문제점

Ajax로 가져온 데이터에 대하여 html을 동적으로 그려주기 위해서는 일반적으로 문자를 더해서 html에 요소에 끼워 넣는 방식을 사용한다. 아래의 코드를 봐보자. <div>와 <img> 요소를 strHtml에 더해서 사용한다.

var strHtml = "";
$.ajax({
	type: 'POST',
	success: function (data) {
		strHtml += '<div>' + data.name + '<div>';
        strHtml += '<img src="' + data.path + '" alt="' + imgalt + '">';
        $("#test").html(strHtml);
    },
    error: function (request, textStatus, errorThrown) {
	}
});

이러한 방식의 문제점은 html의 요소를 문자로 다루기 때문에 홑따옴표와 쌍따옴표가 너저분하게 깔려있어서 알아보기도 힘들고 코딩하기는 더더욱힘들며 그 여파로 유지보수가 굉장히 힘들다라는 단점이 있다. 이 스파게티 소스는 종지부에는 본인이 만든 것도 헷갈리게 되는 현상이 발생한다.

또 다른 단점으로는 아무래도 문자를 통째로 넣고 빼고 하는 것이다보니 처리 속도가 느리다.

Java든 Javascript든 문자를 직접적으로 계산하고 자르고 연산하는 과정은 항상 느리다라는 점을 기억해야한다.

동적 HTML을 위한 Template 라이브러리

위의 문제를 해결하기 위해선 Template 라이브러리를 사용해야한다.

Template - 어떤 것을 만들 때 안내 역할을 하는, 사용상의 형식.

Template 라이브러리는 동적 html을 그리기 위해 어떠한 형식을 미리 만들어두어 사용하는 것이라고 볼 수 있다.

프론트엔드 진영에서 대표적으로 인기 있는 Vue와 React 프레임워크에서는 이미 Template 기능을 포함하고 있다.

Vue에서는 Vue Template이라고 불리는 기능이 있으며 new Vue() 형식으로 사용할 수 있다.

React 역시 JSX로 Template 기능을 이용할 수 있다.

하지만 위의 프레임워크가 아닌 바닐라 js를 사용하거나 사용하는 프레임워크 자체에서 Template 기능을 지원하지 않을 때는 Template 라이브러리 사용하는 것이 개발 측면에서 생산성 향상을 도모할 수 있다.

JQuery Template(지원 중단)

2010년대 대표적인 Template 라이브러리로 JQuery Template이 있었다.

초기에는 마이크로소프트에서 만든 JQuery Template이 있었지만 공식적으로 지원을 중단하였고 그 이후에 깃헙에서 오픈소스로 제공되는 JQuery Template 마저 공식적으로 지원을 중단하였다.

지원을 중단했다는 얘기는 사용할 수는 있으나 특정 문제가 발생했을 시 오픈 소스에 대한 관리자가 존재하지 않는다는 문제점이 생긴다.

그게 뭐가 문제냐? 추후 이슈 발생 시 도움을 받을 수 없다. 열심히 개발하고 있는데, 다 뒤짚어 엎을 순 없지않은가. 그래서 관리자가 없는 오픈소스는 사용하는 것을 매우 권장하지 않는다고 한다.(특히 마이크로소프트 Jquery Template은 관리자도 없을 뿐더러 사용 시 에러에 대한 이슈가 그대로 남아있다고 한다.)

이처럼 오픈소스를 선택할 때는 현재 오픈소스를 운영하고 있는 사람이 존재하는가, 이슈를 처리해 줄 커뮤니티가 존재하는 지 등 여러 요소를 따져보고 사용하는 것이 중요하다.

오픈소스가 관리되지 않는다면 오픈소스로서 활용될 수 없다고 보는 편이다.

특정한 라이브러리에 대한 테크니컬 리더가 존재하지 않는 이상 이슈 발생 시 처리가 굉장히 곤란해지기 때문이다.

단순히 나만 사용하는 라이브러리를 만들어서 해당 기술이 편하다고 해서 적용해버리면 먼 미래에 사용할 개발자들이 올바르게 사용하지 못하는 상황이 생길 수도 있다는 것이다.

그것은 더 이로운 미래를 위해 좋은 환경을 제공해주자라는 오픈소스의 철학에서 벗어나게 된다.

JRender(지원 중)

현재로서 가장 사용하기 적절하며 최신의 Template 라이브러리는 JRender다.

2022년 12월 지금도 관리가 되고 있으며 오픈소스로서 사용하기에 알맞다고 볼 수 있다.

사용방법 1

아래의 예시는 공식 가이드 문서에 존재하는 샘플이다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
  <!-- JsRender 최신버젼 -->
  <script src="https://www.jsviews.com/download/jsrender.js"></script>
</head>
<body>
    <div id="result">
    	<!-- 1. template으로 사용할 영역을 아래의 script 태그로 감싸준다. -->
		<script id="myTmpl" type="text/x-jsrender">{{:name}}</script>
    </div>
  <script>
    var tmpl = $.templates("#myTmpl"); // 2. template 스크립트 영역을 컴파일한다.
    var data = {name: "Jo"};           // 3. Ajax로 데이터를 가져오온다.
    var html = tmpl.render(data);      // 4. render() 메소드를 통해 template에 데이터를 넣는다.
    $("#result").html(html);           
  </script>
</body>
</html>

출력

사용방법 2

위의 코드를 좀 더 줄이고 반복된 객체 형태로 데이터가 들어있을 경우 사용하는 예시는 아래와 같다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
  <!-- Load JsRender latest version, from www.jsviews.com: -->
  <script src="https://www.jsviews.com/download/jsrender.js"></script>
</head>
<body>
<div >
<table border="1">
<tbody id="result">
	<script id="myTmpl" type="text/x-jsrender">
	<tr>
		<td>{{:name}}</td>
		<td>{{:age}}</td>
		<td>{{:"Hi ! " + name}}</td>
	</tr>
	</script>
</tbody>
</table>
</div>
  <script>
    var data = [
     {name: "Kim", age: 34}, 
     {name: "Lee", age: 31}
 ];   
for(var i in data){
     var html = $.templates("#myTmpl").render(data[i]);
     $("#result").append(html);
}
  </script>
</body>
</html>

출력

그 외

이외에도 공식 가이드 문서에는 템플릿에 if문, for문 등에 대한 기능도 많이 소개하고 있는데 개인적으로는 html 영역에는 html만 사용하고 로직 처리는 javascript 영역에서 하는 것이 더 깔끔하다고 생각한다.

또 그만큼 러닝커브도 존재하기에 개인적으로는 사용을 권장하고 싶지는 않다.

'📜 Js' 카테고리의 다른 글

[Javascript] for...in 보다는 Object.keys 사용하기 (0)	2023.11.24
자바스크립트 배우기 좋은 사이트 (0)	2023.01.02
[JavaScript] 변수에 대한 불변성 정리(const, defineProperty) (0)	2022.12.18
[JavaScript] 프로토타입 쓰는 이유, 목적 그리고 사용법 (0)	2022.12.18
React를 이용한 다른 색깔 찾기 게임 Clone Coding (0)	2022.02.05