[Javascript template] javascript template engine/자바스크립트 템플릿 엔진/maven test 환경

자바스크립트 템플릿 엔진

ajax로 요청하여 데이터를 가져오고 JSON 형태로 데이터를 받아

html 템플릿을 생성 및 분리하고 그 코드를 받아 html을 동적으로 생성하여 그려주고자 한다.

 

말이 어려운가? 그렇다면 이 자바스크립트 템플릿 엔진을 왜 사용하고자 했을까???? 라는 질문에

서부터 이 포스팅을 시작하려고 한다.

 

1. 왜 사용할까?

필자는 기존에 다음과 같이, AJAX 통신으로 DATA 응답을 받아 UI를 구성하는 html을 조각을 생성한 후 특정 영역에 삽입하는 식으로 Javascript를 통해 동적인 UI를 처리하고 있었다.

여기서 조금 걸리는 점(?) 은

DOM 조작에 있어 시간소비 및 UI의 공통적인 서비스가 쉽지 않다는 단점이 있으며

소스작성자가 아닌 사람의 view에서는 가독성 문제에 따라 유지보수 & 관리 & 디자인변경 등에

있어 어려움이 있을 수 있다.

 

이런 점들을 보완하기 위해 자바스크립트 템플릿 엔진을 사용하고자 한다.

 

2. 자바스크립트 템플릿 엔진(javascript template engine)이란?

그렇다면 자바스크립트 템플릿 엔진이란 무엇일까?

모델과 뷰를 분리하는것. 즉 순수한 정보와 표현정보를 분리하고 이 둘을 합쳐 결과값을 만

들어 내도록 도와주는 도구를 뜻한다.

 

3. 템플릿 엔진(template engine) 종류

(1) Top 10 Templating Engines for JavaScript To Improve and Simplify Your Workflow 2016

: https://colorlib.com/wp/top-templating-engines-for-javascript/

(2) 15 JavaScript Template Engines

: https://codegeekz.com/15-javascript-template-engines-for-developers/

 

템플릿 엔진에는 Mustache, doT, Jade, Handlebars, Dust 등 여러 템플릿 엔진이

있음을 확인 할 수 있다. 필자는 그 중 Mustache와 Handlebars을 test 해보고자 한다.

 

4. TEST 환경

*STS에서 maven 프로젝트 생성해서 test 했다.

(1) servlet-context.xml

<resources mapping="/resources/**" location="/resources/" />

<resources mapping="/js/**" location="/js/" />

 

(2) mustache.js 및 handlebars.js download

<< mustache.js >>

-download link : https://cdnjs.com/libraries/mustache.js/#

-cdn url : https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.js

 

<< handlebars.js >>

-download link : http://handlebarsjs.com/

-cdn url : https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js

(3) js import

webapp/resource 아래 js 디렉토리 생성 후, 필요한 lib 들을 넣어주고

test할 xxxxxx.jsp에서 {contextRoot}/resources/js~경로로 import 해준다.

기본 jquery와 test할 자바템플릿엔진 js를 import 해준다. (필자는 cdn으로..)

포스팅이 너무 길어져 분리했다...........

Mustache -----------> http://mkil.tistory.com/271

Handlebars ---------> http://mkil.tistory.com/272