템플릿 엔진(Template Engine)

템플릿 엔진 (Template Engine)
템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어
뷰 코드 (HTML)과 데이터 로직 코드 (DB Connection)을 분리하는 역할

템플릿 엔진의 필요성

• HTML에 비해 간단한 문법으로 코드 수 감소
• 같은 페이지에 데이터만 바뀌는 경우에 활용하여 재사용성 높음
• 하나의 템플릿으로 여러 페이지를 렌더링하는 경우가 있어 유지보수 용이

 

렌더링 주체에 따른 구분

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

 

서버 사이드 템플릿 엔진

• 서버에서 구동되는 템플릿 엔진
• 서버에서 데이터를 미리 정의된 템플릿에 넣어서 HTML을 생성하여 클라이언트에 전달

 

** 동작 과정

1. 클라이언트에서 요청 수신
2. 서버에서 데이터를 획득 (DB or API)
3. 템플릿에 데이터를 배치
4. 데이터가 반영된 템플릿으로 HTML을 생성
5. 생성된 HTML을 클라이언트에 전달

 

대표적인 서버 사이드 템플릿 엔진 ≫ JSP, Thymeleaf, Velocity, Freemarket

 

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

• 브라우저 위에서 동작하는 템플릿 엔진
• 브라우저에서 화면을 생성하기 때문에 서버에서는 데이터만 전달하고 클라이언트에서는 템플릿에 데이터를 혼합하여 화면 생성

 

** 동작 과정

1. 클라이언트에서 공통적인 프레임을 템플릿으로 생성
2. 서버에 데이터 요청
3. 데이터를 템플릿에 배치하고 DOM 객체를 동적으로 그림

 

대표적인 클라이언트 사이드 템플릿 엔진 ≫ Mustache, Handlebars