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

템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어(소프트웨어 컴포넌트)를 말한다.

 

템블릿 엔진이 왜 나왔을까??

웹이라는 세계에서 서버, 클라이언트(브라우저)가 있습니다.
기존 방식에서는 서버에서 데이터베이스의 데이터를 가져온 뒤 HTML로 만들어 클라이언트에게 보내주었습니다.
but! 이방식은 페이지의 일부만 변할 때에도 전체 페이지를 다시 그려야하는 이슈가 발생합니다. (비효율적...)

이때문에 Ajax가 나왔고 프론트엔드단에서는 해당 필요한 데이터부분만 재가공하여 보여주면 되었습니다.
하지만 문제는 끝난것은 아니였습니다. 데이터를 가공하는 손이 많이가는 것입니다.

보통 Jquery를 사용하거나 javascript를 사용하여 HTML에 가공된 데이터를 보여주는데 조금의 실수라도하면 페이지가 보이지 않거나 이상하게 보입니다.

이 때문에 사람들은 쉬운 표현으로 서버에서 받아온 데이터를 효과적으로 보여줄 중간매체를 원하게 되었고 이역할을 하는것이 템플릿 엔진입니다!

 

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

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

(대부분의 Template Engine는 기존의 HTML에 비해서 간단한 문법을 사용한다)

2. 재사용성이 높다.

(똑같은 디자인의 페이지에 보이는 데이터만 바뀔때 Template Engine 문법으로 만들어 놓고 데이터를 바꿔주면 렌더링 해주면 된다.)

3. 유지보수에 용이하다.

(Template Engine을 사용하면 동일한 Template를 사용하다는 전제하에 Tempate와 넘겨주는 데이터만 수정하면 끝입니다.)

 

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

 

Server Side Template Engine

 - JSP, Freemarker

과정

1. 클라이언트의 요청을 받아서 필요한 데이터를 (DB에서 가져오거나 API에서 가져오거나)가져온다.

2. 미리 정의된 Template에 해당 데이터를 적절하게 넣는다.

3. 서버에서 HTML(데이터가 반영된 Template)을 그린다.

4. 해당 HTML을 클라이언트에 전달한다.

 

Client Side Tempalte Engine

 - Vue, React

과정

1. 클라이언트에서 공통적인 프레임을 미리 template으로 만든다.

2. 서버에서 필요한 데이터를 받는다.

3. 데이터를 template을 적절한 위치에 replate하고 DOM 객체에 동적으로 그려준다.