템플릿 엔진이란 뭘까?

💡학습 목표

템플릿 엔진에 대한 개념을 말할 수 있다. SSR, CSR에 대한 개념을 설명할 수 있다.

 

템플릿 엔진이란?

• 템플릿 엔진(Template Engine)은 정적 파일(예: HTML, XML 등)을 동적으로 변환할 수 있는 도구입니다. 서버에서 데이터를 받아, 동적인 콘텐츠를 생성하기 위해 템플릿 파일에 변수나 표현식을 삽입해 처리하는 역할을 합니다. 이를 통해 서버가 클라이언트에 동적 웹 페이지를 응답할 수 있게 됩니다.

역할

• 동적 웹 페이지 생성: 서버에서 HTML 템플릿 파일을 가져와, 서버에서 처리된 데이터를 삽입하여 클라이언트에게 동적인 웹 페이지를 전송합니다.
• 코드 재사용성: 여러 웹 페이지에서 동일한 구조나 디자인을 사용하는 경우, 템플릿 엔진을 사용하면 공통된 레이아웃을 쉽게 재사용할 수 있습니다.

템플릿 엔진의 종류

• 서버사이드 템플릿 엔진(SSR): 서버에서 HTML을 렌더링하고, 데이터가 삽입된 HTML을 클라이언트에게 전송합니다. (Thymeleaf, JSP, Freemarker …)
• 클라이언트사이드 템플릿 엔진(CSR): 클라이언트(브라우저)에서 데이터를 받아, 템플릿을 렌더링하여 동적인 페이지를 생성합니다.(React, Vue.js)

SSR(Server-Side Rendering, 서버사이드 렌더링) 동작 원리

 

[1] HTML 템플릿 작성
    ⬇
    - HTML 파일에 변수나 표현식을 포함해 작성합니다.
      예: <h1 th:text="${message}">기본 메시지</h1>
    
[2] 서버에서 데이터 처리
    ⬇
    - 서버에서 필요한 데이터를 준비합니다.
      예: message = "안녕하세요 !"

[3] 템플릿 엔진으로 변환
    ⬇
    - 서버에서 데이터와 HTML 템플릿을 결합하여 동적 HTML을 생성합니다.
      예: <h1>안녕하세요, 학생님!</h1>
      
[4] 클라이언트로 전송
    ⬇
    - 최종적으로 데이터가 삽입된 완성된 HTML 파일을 클라이언트에게 전송합니다.