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

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

템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 결합하여 원하는 결과 문서를 출력하는 소프트웨어(또는 컴포넌트)를 말합니다. 그중 웹 템플릿엔진(Web Template Engine)이란 웹문서가 출력되는 엔진을 말합니다. 

즉, 웹 템플릿 엔진은 웹 템플릿들과 웹 컨텐츠 정보를 처리하기 위해 설계된 소프트웨어입니다. 웹 템플릿 엔진은 view code(html)와 data logic code(db connection)을 분리해주는 기능을 합니다.

2. 텍스트 템플릿 엔진 

템플릿 양식에 적절한 특정 데이터를 넣어 결과 문서를 출력합니다. 텍스트 템플릿 엔진의 종류로는 Freemarker, Thymeleaf, JSP(Java Server pages) 등이 있습니다. 

 

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

 - 서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 Template에 넣어 html을 그려서 클라이언트에 전달해주는 역할을 합니다. 즉, HTML 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고, 동적으로 생성되는 부분만 템플릿에 소스 코드를 끼워넣는 방식으로 동작합니다. 

 

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

 - html 형태로 코드를 작성할 수 있으며, 동적으로 DOM을 그리게 해주는 역할을 합니다. 즉, 데이터를 받아서 DOM 객체에 동적으로 그려주는 프로세스를 담당합니다. 예를 들어 웹 페이지에서 여러 카테고리 탭중 한개를 선택 할때 같은 형식의 프레임에 내용만 바뀌어 변경되는 것을 볼 수 있습니다. 이런 공통적인 프레임을 미리 제작한 'template'라고 부릅니다. 클라이언트에서는 script타입을 template로 미리 만들어서 사용합니다.

- 과정

  (1) 클라이언트에서 공통적인 프레임(template)를 개발

  (2) 서버에서 필요한 데이터 요청

  (3) 데이터를 template의 적절한 위치에 replace 후 DOM 객체에 동적으로 그려줌

 - (ex) Mustache, Squirrelly, Handlebars

 

● 클라이언트 사이드 템플릿 엔진 필요성

 - Javascript 라이브러리로 랜더링이 끝난뒤 (즉, HTML Dom이 다 그려진 뒤)에 서버 통신 없이 화면 변경이 필요할 경우

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

3. 템플릿 엔진의 필요성

  (1) 대부분의 Template Engine은 HTML에 비해 간단한 문법을 사용함으로서 코드량을 줄일 수 있습니다.

  (2) 데이터만 바뀌는 경우가 굉장히 많으므로 재사용성을 높일 수 있습니다.

  (3) 유지 보수에 용이합니다.   

 

저는 서버에서는 필요한 데이터를 내려주는 API만 제작하고, 클라이언트쪽에서는 서버에 데이터를 요청하여 받아서 렌더링하는 방식을 자주 사용합니다. 이렇게하면 서버와 클라이언트가 분리되기 때문에 사용하는 기술에 대한 의존성도 줄일 수 있습니다. 하지만 BackOffice와 같이 고객에게 보여지지 않고, 빠르게 만들어야하는 부분은 Server Side Rendering을 선호하는 편입니다. 

REFERENCE

https://dlgkstjq623.tistory.com/304?category=786635

Template System 이란?