템플릿 엔진(Template Engine)

: 템플릿 양식(html)과 데이터 모델(DB)에 따른 입력 자료를 결합해서 문서를 출력하는 소프트웨어

• 웹사이트 화면을 어떤 형태로 만들지 도와주는 양식
• HTML과 DB connection을 분리해주는 역할을 한다.
• 서버 사이드 템플릿 엔진 / 클라이언트 사이드 템플릿 엔진

서버 사이드 템플릿 엔진

: Thymeleaf, JSP, Freemarker

• 서버에서 데이터를 미리 정의된 Template에 넣어 HTML을 완성시킨 후 클라이언트에 전달
• HTML 코드 안에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고 동적으로 생성되는 부분만 템플릿 특정 장소에 끼워 넣는 방식으로 동작할 수 있게 해준다.
• 주로 화면 이동이 많은 곳에서 사용

1. 클라이언트의 요청을 받는다.
2. 필요한 데이터 DB나 API에서 가져온다.
3. 미리 정의된 Template에 해당 데이터를 배치한다.
4. 서버에서 HTML(데이터가 반영된 Template)을 그린다.
5. 해당 HTML을 클라이언트에 전달한다.

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

: react, vue.js, Mustache, Squirrelly, Handlebars

• 브라우저 위에서 html 형태로 화면을 생성하고, 서버에서 받은 json, xml형식의 데이터를

여기서 동적인 화면으로 만드는 것

• 주로 단일 화면에서 화면이 변경되는 경우에 사용

1. 클라이언트에서 공통적인 프레임을 미리 Template로 만든다.
2. 서버에서 필요한 데이터를 받는다.
3. 데이터를 Template에 배치하고 DOM 객체에 동적으로 그려준다.

Spring boot에서 자동 설정을 지원하는 템플릿 엔진

: FreeMarker, Groovy, Thymeleaf, Mustache

Jsp

• Spring boot가 자동 설정을 지원하지 않음
• 서블릿의 형태로 변환되어 실행
• view에 비즈니스 로직이 포함되어 복잡해짐
• WAR패키징만 가능함 → 웹서버나 WAS 필요함
• WEB-INF 디렉토리에서 사전 정의된 구조 사용

Thymeleaf

• 서블릿 변환 X → 비즈니스 로직이 완전히 분리됨
• JAR / WAR 패키징 모두 가능
• WAS 없이 브라우저에 직접 띄울 수 있음
• 페이지 생성에 필요한 정보를 태그의 속성으로 넣어 페이지의 프로토타입 제공 가능
• Spring boot 에 최적화된 템플릿 엔진

Mustache

• 여러 언어를 지원하는 심플한 템플릿 엔진
• 루비, js, 파이썬, php, 자바 등 대부분의 언어를 지원
• 자바에서는 서버 템플릿 엔진으로, 자바스크립트에서는 클라이언트 엔진으로 사용됨
• 로직 코드 사용 불가능, View와 서버의 역할이 명확히 분리
• 화면 역할에 충실한 템플릿 엔진
• 로직을 나누어가지며 유지보수하기 쉬움

---

참고자료
https://velog.io/@hi_potato/Template-Engine-Template-Engine
https://imgzon.tistory.com/97
https://suzyalrahala.tistory.com/39
https://yjh5369.tistory.com/entry/thymeleaf-vs-jsp
스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - 이동욱 저자