템플릿 엔진

서버와 클라이언트의 상호작용은
동적 컨텐츠를 생성합니다. 

 

 

What ?

템플릿 엔진

서버 / 클라이언트 애플리케이션에서 사용되는 도구입니다.

 

정적 템플릿(HTML, 텍스트 파일 등)과 동적 데이터(서버 데이터)를 결합해 최종 출력물을 생성합니다.

 

동적 데이터 생성 방식과 실행되는 위치에 따라 서버 템플릿 엔진과 클라이언트 템플릿 엔진으로 나눕니다.

 

 

---

 

 

 

서버 템플릿 엔진

💡 정의

서버에서 파일을 동적으로 생성할 수 있도록 돕는 도구입니다.

 

동적 데이터를 서버에서 처리되어 템플릿에 바인딩되고

완성된 결과물이 클라이언트에 전달됩니다.

 

속도가 매우 빠르고, 작성하기가 편하지만

클라이언트에서의 동적인 처리는 어렵다

  💡 동적 데이터 생성과정

1. 사용자가 결과물을 요청합니다.

 

2. 서버는 요청에 맞는 데이터를 가져오고 처리합니다.

 

3. 서버 템플릿 엔진이 서버에서 데이터를 템플릿에 삽입합니다.

 

4. 서버에서 완성된 결과물을 클라이언트로 전송합니다.

 

5. 클라이언트는 전달받은 정적 결과물을 그대로 렌더링하여 사용자에게 보여줍니다.

 

  💡 특징

 

1.  검색 엔진 크롤러가 콘텐츠를 쉽게 인식해 SEO가 향상됩니다.

2. 클라이언트에서 추가적인 렌더링 작업 없이 바로 페이지를 표시해 속도가 빠릅니다.

3.  데이터 처리가 서버에서 이루어지기 때문에, 서버 부하가 클 수 있습니다.

 

 

---

 

클라이언트 템플릿 엔진

  💡 정의

클라이언트에서 템플릿을 렌더링하고,

서버는 데이터를 JSON 형식으로 보내는 방식입니다.

 

클라이언트는 받은 데이터를 템플릿 엔진에 전달하여 최종 결과물을 생성합니다.

동적으로 DOM을 그리게 해주는 역할을 한다.

즉, 데이터를 받아 DOM 객체에 동적으로 그려주는 프로세스를 담당한다.

동적 콘텐츠를 생성하거나 UI를 업데이트하는 역할

  💡 동적 데이터 생성과정

 

1. 사용자가 결과물을 요청합니다.

 

2. 서버는 빈 템플릿을 클라이언트에 전달하고 필요한 데이터를 클라이언트에 전달합니다.

 

3. 클라이언트는 받은 데이터를 템플릿 엔진을 사용하여 템플릿에 삽입하고, 그 결과를 동적으로 렌더링합니다.

 

4. DOM을 업데이트하여 동적으로 콘텐츠를 사용자에게 제공합니다.

 

  💡 특징

1. 클라이언트가 많이 처리하므로 클라이언트의 성능에 영향을 받을 수 있습니다.

 

2. 클라이언트 측에서 렌더링하므로, 검색 엔진 크롤러가 콘텐츠를 제대로 인식하지 못할 수 있습니다.

 

3. 사용자의 상호작용에 빠르게 반응하는 동적인 UI를 구현할 수 있습니다.

 

---

 

비교

구분	서버 템플릿 엔진	클라이언트 템플릿 엔진
요청 수신	클라이언트의 요청을 서버에서 수신	클라이언트에서 서버로 데이터를 요청
데이터 처리 위치	서버에서 데이터를 처리 및 준비	서버에서 데이터를 받아 클라이언트에서 처리
템플릿 로딩	서버에서 템플릿 파일 로딩	클라이언트에서 템플릿 파일 로딩
템플릿 렌더링	서버에서 템플릿과 데이터를 결합	클라이언트에서 템플릿과 데이터를 결합
응답 전송	서버에서 렌더링된 결과물을 클라이언트에 전송	클라이언트가 생성한 결과물을 DOM에 반영
UI 업데이트	클라이언트가 생성한 결과물을 DOM에 반영	클라이언트에서 결과물을 렌더링해 UI를 즉시 업데이트
장점	서버에서 데이터 처리 보안 용이	클라이언트에서 빠른 UI 업데이트 서버 부하 감소
단점	서버 부하 증가 서버 사이드 렌더링 처리 필요	초기 로딩 시간 길어짐 보안 문제 발생 가능
사용	Thymeleaf JSP Jinja2	Mustache.js React.js Vue.js

 

---

 

 

How ?

템플릿 엔진

템플릿 엔진은 서버 템플릿에서 클라이언트 템플릿으로 그 후 DOM에 

 

 

 

 

 

 

---

 

 

Where ?

템플릿 엔진

   📌  React.js

React

 

 

   📌 타임리프 (Thymeleaf)

타임리프 (Thymeleaf)

 

---