템플릿 엔진

JunYoung7·2020년 10월 25일
0

템플릿 엔진(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을 작성하면 무슨 단점이 있는 것일까?

  1. 단일 화면에서 (Single page) 특정 이벤트에 따라 화면이 계속 변하는 경우에는, 클라이언트javascript 파일에 HTML을 작성하여 렌더링 하는 경우가 많다.
  2. HTML DOM이 다 그려지고 난 뒤에, 서버와 통신없이 화면 변경이 필요하다면 클라이언트 쪽에서 해줘야 한다.

=> html을 javscript안에 작성하게 되면, IDE에서 문법적 오류, 오타가 발생해도 알아차리기 어렵기 떄문에 클라이언트 사이드 렌더링 엔진이 필요하다.

템플릿 엔진 예시 ) Mustache, Squirrelly, Handlebars.js....

추가적으로 클라이언트 사이드 렌더링의
장점, 단점에 대해 생각해보자

장점 : 앱처럼 사용할 수 있다. Url이 바뀌어도 html을 다시 내려받지 않고 클라이언트에서 알아서 그림.
단점 : 서비스 사이즈가 커질수록 코드가 많아지면, bundle.js 크기가 커지게 된다. 그리고 그 크기가 커지면 커질수록 파일을 로드하는 시간이 커진다. 로드하는 시간이 오래 걸리면 첫 화면이 오래 걸리게 된다.

profile
JunYoung7의 프로그래밍 발자취

0개의 댓글