템플릿 엔진이란

템플릿 엔진이란?

지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어이다.

문자열을 기반으로 HTML을 생성하며, 데이터가 변경될 때마다 전체 페이지나 특정 부분을 다시 렌더링하기 위해 서버에 요청을 보낼 수 있다.

 

서버 사이드 템플릿 엔진

화면 생성을 서버에서 Java 코드로 문자열을 만든 후, 문자열을 HTML로 변환하여 브라우저에 전달하는 방식이다. DB나 API에서 가져온 데이터를 템플릿에 넣어 HTML을 만들고 이를 클라이언트에 전달해준다. 고정된 부분은 템플릿으로 만들어두고 동적으로 변화되는 부분만 템플릿에 끼워 넣는 방식이다.

 

서버 사이드 템플릿 엔진은 JSP, Thymleaf, Velocity, Freemarker가 있다.

(JSP는 명확하게 서버 템플릿 엔진은 아니지만, View의 역할만 하도록 구성할 땐 템플릿 엔진으로써 사용할 수 있다.)

 

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

웹 브라우저에서 동작하는 자바스크립트 기반의 템플릿 시스템이다. 클라이언트 템플릿 엔진을 사용하면 서버에서 JSON같은 데이터, DB에서 데이터를 받아서 브라우저 위에서 클라이언트 템플릿을 사용해서 HTML을 생성해준다. HTML 형태로 코드를 작성할 수 있으며 동적으로 DOM을 그리게 해준다. 즉 데이터를 받아 DOM 객체에 동적으로 그려주는 역할을 한다.

https://usefultoknow.tistory.com/entry/%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%97%94%EC%A7%84Template-Engine-%EC%9D%B4%EB%9E%80

 

클라이언트 사이드 템플릿 엔진은 Mustache, Squirrelly등이 있다.

DOM이란?
Document Object Model의 약자이다. 문서 객체 모델이란 뜻으로, 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식이다.
좁은 의미로 보자면 document 객체와 관련된 객체의 집합을 의미한다.

 

템플릿 엔진을 사용하는 이유?

1. 많은 코드를 줄일 수 있다.

템플릿 엔진을 사용하면 기존의 HTML에 비하여 간단한 문법을 사용한다. 

 

2. 재사용성이 높다.

웹 페이지는 똑같은 디자인의 페이지에 데이터만 바뀌는 경우가 많은데, 템플릿 엔진을 사용하면 데이터만 바꿔가며 많은 페이지를 낼 수 있으므로 효율적이다.

 

3. 유지보수에 용이하다

하나의 템플릿을 만들어 놓고 관리하는 것은 수백개의 비슷한 모양의 HTML페이지를 관리하는 것보다 효율적이다.

 

 

 

참고
1. https://usefultoknow.tistory.com/entry/%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%97%94%EC%A7%84Template-Engine-%EC%9D%B4%EB%9E%80
템플릿 엔진(Template Engine) 이란?템플릿 엔진이란 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어(또는 소프트웨어 컴포넌트)를 말합니다. * Template : 공통적인 프레임을 미리 제usefultoknow.tistory.com

2. https://code-lab1.tistory.com/211