템플릿 엔진

Dear·2025년 8월 25일

TIL

목록 보기
68/74

💙 템플릿 엔진(Template Engine)

HTML 같은 뷰 파일 안에서 동적으로 데이터를 넣어 웹 페이지를 생성해주는 도구

서버에서 전달한 데이터(모델)를 HTML 구조에 끼워 넣어서 최종적으로 브라우저에 전달할 수 있게 해준다.

동작 방식

  1. 템플릿 파일 작성
    HTML에 ${변수} 또는 {{변수}} 같은 문법을 넣어 데이터가 들어갈 자리를 지정한다.
  2. 서버에서 데이터 전달
    컨트롤러나 서버 로직에서 템플릿 엔진에 데이터(모델)를 전달한다.
  3. 템플릿 엔진이 HTML 생성
    지정한 위치에 변수를 치환해서 완성된 HTML을 만든다.
  4. 브라우저로 전송
    완성된 HTML이 사용자 브라우저에 보여진다.

서버에서 Java 코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환하여 브라우저로 전달한다.

💙 대표적인 템플릿 엔진

서버 사이드(Java)

  • Thymeleaf (Spring Boot 기본 권장)
  • JSP (과거 표준, 점점 덜 사용됨)
  • Freemarker
  • Mustache

프론트엔드(JavaScript)

  • Handlebars
  • EJS
  • Pug

💙 장점

  • HTML과 데이터를 깔끔하게 분리

  • 반복문, 조건문 등 로직 일부 지원

  • 재사용 가능한 UI 조각(템플릿 조각) 가능

    💙 단점

  • 서버에서 HTML을 매번 만들어야 하므로, 데이터만 보내는 API 방식보다 느릴 수 있음

  • 클라이언트 측에서 동적으로 페이지를 바꾸는 데 한계가 있음

profile
친애하는 개발자

0개의 댓글