템플릿 엔진(Template Engine)
: 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성해서, 결과 문서를 출력하는 software(or software component)
그 중에서 웹 템플릿 엔진은 웹 문서가 출력되는 템플릿 엔진을 말한다. html과 data logic code를 분리해준다.
출처 : https://gmlwjd9405.github.io/2018/12/21/template-engine.html
서버 사이드 vs 클라이언트 사이드
Server side template engine
: 서버 측에서 DB, API로부터 가져온 정보를 미리 정의된 Template에 넣어서, 서버 측에서 html을 그려서 클라이언트에 내려준다.
<h1>Hello #{name}</h1>
// pug 예시이렇게 고정 부분은 템플릿으로 만들고 동적으로 변화되는 부분만 특정 장소, 이를 테면 위에 name 영역에 끼워넣는 방식으로 동작하게 해준다.
템플릿 엔진 예시 ) EJS(Embedded Javascript Templates), Jade(현재는 Pug)...
참고 URL : https://colorlib.com/wp/top-templating-engines-for-javascript/
Client side template engine
: 공통 형식의 프레임을 미리 'template'으로써 script 타입으로 생성해 놓은 뒤에, 동적으로 DOM을 그림으로써 웹 페이지의 변화를 나타낸다. 즉, 서버에서는 필요한 데이터만 받은 뒤에 데이터를 template의 적절한 위치에 replace하고 다시 DOM 객체에 동적으로 그려준다.
그러면 왜 클라이언트 사이드 템플릿 엔진이 필요할까? 그냥 javascript 파일안에 html을 작성하면 무슨 단점이 있는 것일까?
- 단일 화면에서 (Single page) 특정 이벤트에 따라 화면이 계속 변하는 경우에는, 클라이언트javascript 파일에 HTML을 작성하여 렌더링 하는 경우가 많다.
- HTML DOM이 다 그려지고 난 뒤에, 서버와 통신없이 화면 변경이 필요하다면 클라이언트 쪽에서 해줘야 한다.
=> html을 javscript안에 작성하게 되면, IDE에서 문법적 오류, 오타가 발생해도 알아차리기 어렵기 떄문에 클라이언트 사이드 렌더링 엔진이 필요하다.
템플릿 엔진 예시 ) Mustache, Squirrelly, Handlebars.js....
추가적으로 클라이언트 사이드 렌더링의
장점, 단점에 대해 생각해보자
장점 : 앱처럼 사용할 수 있다. Url이 바뀌어도 html을 다시 내려받지 않고 클라이언트에서 알아서 그림.
단점 : 서비스 사이즈가 커질수록 코드가 많아지면, bundle.js 크기가 커지게 된다. 그리고 그 크기가 커지면 커질수록 파일을 로드하는 시간이 커진다. 로드하는 시간이 오래 걸리면 첫 화면이 오래 걸리게 된다.
