템플릿 엔진(Template Engine) 이란?

템플릿 엔진이란

템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어(또는 소프트웨어 컴포넌트)를 말합니다.

* Template : 공통적인 프레임을 미리 제작한 것입니다.

*웹 템플릿 엔진(Web Template Enging)이란? 웹 문서가 출력되는 템플릿 엔진을 말합니다. 즉, 웹 템플릿 엔진은  웹 템플릿들(Web Templates)과 웹 컨텐츠 정보(Content Information)를 처리하기 위해 설계된 소프트웨어입니다.

또한 웹 템플릿 엔진은 View Code(Html)와 Data Logic Code(Db Connection)를 분리해주는 기능을 합니다.

 

템플릿 엔진의 종류

레이아웃 템플릿 엔진 VS 텍스트 템플릿 엔진

• 레이아웃 템플릿 엔진
  중복되는 Include 코드를 사용하지 않고도 지정된 페이지 레이아웃에 따라 페이지 타일을 조합하여 완전한 페이지로 만들어줍니다.
  
  Ex) Apache Tiles, Sitemesh 등...
  
  
• 텍스트 템플릿 엔진
  템플릿 양식에 적절한 특정 데이터를 넣어 결과 문서를 출력합니다.
  
  Ex) Freemarker, Thymeleaf, JSP(Java Server Pages)등...

 

=> 둘은 역할이 다르며 섞어서 사용하는 것이지 서로 배타적인 것이 아닙니다.

 

 

서버 사이드 템플릿 엔진 VS 클라이언트 사이드 템플릿 엔진

• 서버 사이드 템플릿 엔진(Server Side Template Engine)

서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 Template에 넣어 Html을 그려서 클라이언트에 전달해주는 역할을 합니다.

 

즉, HTML 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고 동적으로 생성되는 부분만 템플릿 특정 장소에 끼워넣는 방식으로 동작할 수 있도록 해줍니다.

- 순서 -

1) 서버가 클라이언트의 요청을 받습니다.

2) 필요한 데이터(DB에서 가져오거나 API에서 가져오는 데이터)를 가져옵니다.

3) 미리 정의된 Template에 해당 데이터를 적절하게 넣습니다.

4) 서버에서 HTML(데이터가 반영된 Template)을 그립니다.

5) 해당 HTML을 클라이언트에 전달합니다.

 

Ex) Javascript Template Engine
EJS(Embedded JavaScript Templates), Jade(Pug), Handlebars(Handlebars.js) 등..

 

Ex) Java Template Engine

Freemarker, Thymeleaf, Groovy, Velocity, jade4j, Handlebars(Handlebars.java), Mustache, JSP 등...

 

 

• 클라이언트 사이드 템플릿 엔진(Client Side Template Engine)

HTML형태로 코드를 작성할 수 있으며, 동적으로 DOM을 그리게 해주는 역할을 합니다.

 

즉, 데이터를 받아서 DOM 객체에 동적으로 그려주는 프로세스를 담당합니다.

 

예를들어, 웹 페이지에서 여러 카테고리 중 탭을 선택할 때마다 같은 형식의 프레임에 내용만 바뀌어 변경되는 것을 볼 수 있습니다. 클라이언트에서는 이런 Template을 매번 입력하거나 바꿀 수 없으므로 Script 타입을 Template으로 미리 만들어 사용합니다. (안의 내용은 replace를 사용하여 바꿉니다.)

- 순서 - 

1) 클라이언트에서 공통적은 프레임을 미리 Template으로 만들어 둡니다.

2) 서버에서 필요한 데이터를 받습니다.

3) 데이터를 Template에 적절한 위치에 replace하고 DOM 객체에 동적으로 그려줍니다.

 

Ex) Mustache, Squirrelly, Handlebars(Handlebars.js)

 

 

 

* 클라이언트 사이트 템플릿 엔진의 필요성?

- Javascript 라이브러리로 렌더링이 끝난 뒤 (즉, HTML DOM이 다 그려진 뒤)에 서버 통신 없이 화면 변경이 필요한 경우에 필요합니다. 

 

- 계속해서 페이지를 이동하여 서버 쪽으로 호출이 발생한다면 서버 사이드 템플릿 엔진을 이용하면 되는데, 단일 화면에서 특정 이벤트에 따라 화면이 계속 변경되어야 하는 경우는 Javascript로 HTML을 렌더링 하는 경우가 많습니다.

 

- 클라이언트 사이드 템플릿 엔진을 쓰지 않고 Javascript안에 HTML 코드를 작성하는 경우 HTML 코드(문자열)의 오타를 찾기 어렵고(태그 하나가 빠지거나 등등), 렌더링 해야 할 코드가 늘어나면 늘어날수록 수정하기 어려워집니다.(DOM 형태를 파악하기 어렵습니다.)

 

 

 

[정리]

즉 단일 화면에서의 화면 변경에서는 서버 단을(서버 사이드 템플릿  엔진 등) 사용하지 않고 클라이언트 사이드 템플릿 엔진을 사용하고 계속해서 페이지를 이동하여야 한다면 서버 단을(서버 사이드 템플릿  엔진 등)을 사용합니다.

 

 

 

 

템플릿 엔진(Template Engine)의 필요성

1. 많은 코드를 줄일 수 있습니다.
   대부분의 Template Engine은 기존의 HTML에 비해서 간단한 문법을 사용합니다.
   
   
2. 재사용성이 높습니다.
   웹페이지 혹은 웹앱을 만들 때 똑같은 디자인의 페이지에 보이는 데이터만 바뀌는 경우가 굉장히 많습니다.
   
   
3. 유지보수에 용이합니다.
   하나의 Template을 만들어 여러 페이지를 렌더링하는 작업에는 또 다른 이점이 있습니다.