[템플릿 엔진] 템플릿 엔진 기초

1. 템플릿 엔진이란

• 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어
  • Template : 공통적인 프레임을 미리 제작한 것
• 웹 템플릿 엔진은 View Code(HTML)와 Data Logic Code(DB Connection)를 분리해주는 기능을 한다. 

2. 레이아웃 템플릿 엔진 VS 텍스트 템플릿 엔진

• 레이아웃 템플릿 엔진 : 중복되는 Include 코드를 사용하지 않고도 지정된 페이지 레이아웃에 따라 페이지 타일을 조합하여 완전한 페이지로 만들어준다.
  • Ex) Apache Tiles, StieMesh 등
• 텍스트 템플릿 엔진 : 템플릿 양식에 적절한 특정 데이터를 넣어 결과 문서를 출력한다.
  • Ex) Freemarker, Thymeleaf, JSP(Java Server Pages) 등
• 둘은 역할이 다르며 섞어서 사용하는 것이지 서로 베타적인 것은 아니다.

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

• 서버 사이드 템플릿 엔진
  • 서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 Template에 넣어 HTML을 그려서 클라이언트에 전달해주는 역할
  • HTML 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고 동적으로 생성되는 부분만 템플릿 특정 장소에 끼워 넣는 방식으로 동잘 할 수 있도록 해준다.
  • 순서
    1. 서버가 클라이언트의 요청을 받음
    2. 필요한 데이터를 가져온다
    3. 미리 정의된 Template에 해당 데이터를 넣는다.
    4. 서버에서 HTML을 그린다.
    5. 해당 HTML을 클라이언트에 전달
  • 종류
    • JavaScript Template Engine
      • EJS(Embedded JavaScript Templates), Jade(Pug), Handlebars 등
    • Java Template Engine
      • Fremarker, Thymeleaf, Groovy, Velocity, jade4j, Mustache, JSP 등
• 클라이언트 사이드 템플릿 엔진
  • HTML 형태로 코드를 작성할 수 있으며, 동적으로 DOM을 그리게 해주는 역할을 한다.
  • 데이터를 받아서 DOM 객체에 동적으로 그려주는 프로세스를 담당
  • 순서
    • 클라이언트에서 공통적인 프레임을 미리 Template으로 만들어둔다
    • 서버에서 필요한 데이터를 받는다
    • 데이터를 Template에 적절한 위치에 Replace하고 Dom객체에 동적으로 그려준다.
  • 종류
    • Mustache, Squirrelly, Handlebars
  • 필요성
    • Javascript 라이브러리로 렌더링이 끝난 뒤(즉, HTML DOM이 다 그려진 뒤)에 서버 통신 없이 화면 변경이 필요한 경우
    • 계속해서 페이지를 이동하여 서버 쪽으로 호출이 발생한다면 서버 사이드 템플릿 엔진을 이용하면되는데, 단일 화면에서 특정 이벤트에 따라 화면이 계속 변겨오디어야 하는경우