안녕하세요 오늘은 웹 개발에 있어 템플릿 엔진이 무엇인지 알아보겠습니다 🧑🏼💻
✏️ 템플릿 엔진(Template Engine) 이란?
웹 개발 관점에서 템플릿 엔진이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어를 이야기 합니다.
동적인 웹페이지를 구성함에 있어 요청과 관련된 다양한 데이터가 필요합니다.
이때, 데이터를 끼워넣을 틀을 만들어 놓으면 페이지 구성을 효율적으로 할 수 있겠죠? 🤔
웹 템플릿 엔진은 View Code(HTML) 과 Data Logic Code(DB) 를 분리시킵니다.
마치 MVC 패턴과 비슷하게 각각의 역할을 나누어 View 에서는 Controller 에서 넘어온 데이터를 틀에 끼워 넣어 클라이언트에게 알맞은 웹 페이지를 제공합니다 🎁
웹 템플릿 엔진은 '서버 사이드 템플릿 엔진'과 '클라이언트 사이드 템플릿 엔진'으로 나눌 수 있습니다.
✏️ 서버 사이드 템플릿 엔진(Server Side Template Engine)
서버 사이드 템플릿 엔진이란 서버쪽에서 템플릿 구성을 하는 방식이라고 생각하시면 이해가 편합니다 🙆🏻
서버에서 DB 혹은 API 에서 가져온 데이터를 미리 정의된 Template에 넣어 HTML 을 그려서 클라이언트에게 전달해주는 역할을 합니다 🔨
이미 정의되어 있는 HTML 코드에 동적으로 생성되는 부분만 템플릿 특정 장소에 끼워넣는 방식으로 동작합니다.
💡 동작 과정
1) 클라이언트(브라우저) 요청을 서버로 보낸다.
2) 서버는 요청을 받아 데이터 처리를 한다.
3) 미리 정의된 Template에 필요한 데이터를 넣는다.
4) 서버에서 데이터가 들어간 HTML을 그린다.
5) HTML을 클라이언트에게 전달한다.
대표적인 서버 사이트 템플릿 엔진으로는 JSP, Thymeleaf, FreeMarker가 있습니다 👨💻
✏️ 클라이언트 사이드 템플릿 엔진(Client Side Template Engine)
HTMl 형태로 코드를 작성할 수 있으며 동적으로 DOM 을 그리게 해주는 역할입니다.
DOM(Document Object Model) 이란 웹 페이지의 기본 형태인 문서를 객체화한 모델입니다.
즉, 브라우저가 서버로부터 받은 웹 문서(ex HTML)를 랜더링 하여 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM 이라고 합니다 💡
< DOM Tree 구조 >
객체화된 DOM 구조를 통해 동일한 웹 페이지라도 다양하게 표현 할 수 있습니다.
이때 클라이언트 사이드 템플릿 엔진은 DOM 객체에 동적으로 그려주는 프로세스를 담당합니다.
💡 동작 과정
1) 클라이언트에서 공통적인 프레임을 미리 Template으로 만든다.
2) 필요한 데이터를 서버로부터 받는다.
3) 데이터를 Template에 끼워넣고 DOM 객체에 동적으로 그려준다.
대표적인 클라이언트 템플릿 엔진으로는 Mustache, Squirrelly 가 있습니다.
✏️ 템플릿 엔진의 필요성
- 많은 코드를 줄일 수 있습니다.
- 기존 HTML 비해서 간단한 문법을 사용합니다.
- 재사용성이 높습니다.
- 보통 웹페이지는 비슷한 템플릿을 가집니다. 데이터만 바뀌는 경우가 많기에 템플릿을 사용하면
재사용성이 높습니다.
- 보통 웹페이지는 비슷한 템플릿을 가집니다. 데이터만 바뀌는 경우가 많기에 템플릿을 사용하면
- 유지보수에 용이합니다.
- 하나의 템플릿을 만들어 여러 페이지를 렌더링 할 수 있습니다.
참고
[Template Engine] 템플릿 엔진(Template Engine)이란
[Web] Servlet과 JSP의 차이와 관계
스프링 부트와 AWS로 혼자 구현하는 웹 서비스[책]
