1. 템플릿 엔진이란?
- 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어이다.
- 웹 템플릿 엔진은 view code(HTML)와 data logic code(DB connection)를 분리해주는 기능을 한다.
- 서버 사이드 템플릿 엔진과 클라이언트 사이트 템플릿 엔진으로 구분할 수 있다.
2. 서버 사이드 템플릿 엔진이란?
1) 기본 정의
- 서버에서 구동되는 템플릿 엔진
서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 템플릿에 넣어
HTML 문서를 만들어 클라이언트에 전달해주는 역할을 한다.
즉, HTML 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들고,
동적으로 생성되는 부분은 템플릿의 특정 부분에 끼워 넣는 방식으로 동작한다. 2) 동작 과정
- 클라이언트 요청을 받는다.
- 필요한 데이터를 DB, API에서 가져온다.
- 미리 정의된 템플릿에 해당 데이터를 배치한다.
- 서버에서 HTML을 그린다.
- 해당 HTML을 클라이언트에 전달한다.
3) 예시 : JSP, Freemarker가 있음
3. 클라이언트 템플릿 엔진이란?
1) 기본 정의
- HTML 형태로 코드를 작성할 수 있으며 DOM을 그리게 해주는 역할
- 데이터를 받아서 DOM 객체에 동적으로 그려주는 프로세스를 담당
- 브라우저 위에서 작동하며 react, Vue.js등이 있다.
- 서버에서는 JSON, Xml 형식의 데이터만 전달하고 클라이언트에서 이를 혼합해 화면을 만든다.
- 예를 들어, 다 같은 형식의 프레임에 내용만 바뀌어 사용하는 경우 클라이언트가 매번 템플릿을 입력하거나 바꾸기 보다 Script 타입을 템플릿으로 미리 만들어 사용하며 안의 내용을 replace 하는 식으로 동작한다.
👉 DOM 이란?
DOM은 Document Object Model의 약자로, 직역하면 문서 객체 모델이다.
넓은 의미의 DOM은 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다.
좁은 의미의 DOM은 document 객체와 관련된 객체의 집합을 의미할 수도 있다. 2) 동작 과정
- 클라이언트에서 공통적인 프레임을 미리 템플릿으로 만든다.
- 서버에서 필요한 데이터를 받는다.
- 데이터를 템플릿에 배치하고 DOM 객체에 동적으로 그려준다.
4. 템플릿 엔진을 사용하는 이유?
1) 많은 코드를 줄일 수 있다.
- 기존 HTML에 비해 간단한 문법을 사용한다.
2) 재사용성이 높다.
- 똑같은 페이지에 데이터만 바뀌는 경우 템플릿 엔진을 사용하면 템플릿을 만들어놓고 데이터를 바꾸면서 수많은 페이지를 만들어 낼 수 있어서 효율적이다.
3) 유지보수에 용이하다.
- 하나의 템플릿을 만들어 여러 페이지를 랜더링할 수 있다.
참고 자료
개인 공부 정리