템플릿 엔진은 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어 또는 소프트웨어 컴포넌트를 말한다. 특히, 웹 템플릿 엔진은 웹 문서가 출력되는 템플릿 엔진을 말한다.
즉, 웹 템플릿 엔진은 지정된 템플릿 양식과 데이터가 합쳐져서 HTML 문서를 출력하는 소프트웨어를 말한다. 이후 웹 템플릿 엔진을 템플릿 엔진으로 부르겠다.
[그림 1] 서버 사이드 템플릿 엔진
서버 사이드 템플릿 엔진은 서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 템플릿(Template)에 넣어 HTML 문서를 만들어 클라이언트에 전달해주는 역할을 한다. 즉, HTML 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고 동적으로 생성되는 부분만 템플릿의 특정 부분에 끼워 넣는 방식으로 동작한다.
이러한 서버 사이드 템플릿 엔진으로는 JSP, Thymeleaf, Velocity, Freemarker 등이 있다.
[그림 2] 클라이언트 사이드 템플릿 엔진
클라이언트 사이드 템플릿 엔진은 HTML 형태로 코드를 작성할 수 있으며 동적으로 DOM을 그리게 해주는 역할을 한다.
즉, 데이터를 받아 DOM 객체에 동적으로 그려주는 프로세스를 담당한다. 예를 들어, 웹 페이지 내에 여러 카테고리 중 하나를 선택할때마다 같은 형식의 프레임에 내용만 바뀌어 변경되는 경우가 있다. 이때 클라이언트는 매번 템플릿을 입력하거나 바꾸기보다는 Script 타입을 템플릿으로 미리 만들어 사용하며 안의 내용을 replace 하는 식으로 동작한다.
DOM이란?
이러한 클라이언트 사이드 템플릿 엔진으로는 Mustache, Squirrelly 등이 있다.
템플릿 엔진을 사용하면 기존의 HTML에 비하여 간단한 문법을 사용한다. 따라서 코드를 훨씬 간결하게 작성할 수 있다.