[참고] Mustache란?

박은서's avatar
Jan 29, 2026
[참고] Mustache란?

1️⃣ Mustache란?

MustacheLogic-less Template Engine
템플릿(HTML) 안에 비즈니스 로직을 넣지 않도록 강제하는 데이터 바인딩 전용 템플릿 엔진
  • HTML을 기반으로
  • 서버에서 전달한 데이터(model)를
  • 치환(render) 해서
  • 최종 HTML을 생성

2️⃣ 왜 이름이 Mustache인가

문법이 콧수염처럼 생겼기 때문
{{title}}
{{ }} 모양이 콧수염(mustache)처럼 보여서 붙은 이름

3️⃣ Mustache의 핵심 철학 (⚠️아주 중요)

1) Logic-less

Mustache 템플릿은
❌ if / else
❌ for / while
❌ 계산 로직
❌ 메서드 호출
✔ 값이 있으면 출력
✔ 리스트면 반복
✔ 객체면 필드 접근
➡️ 모든 판단은 Controller에서 끝내고, View는 “보여주기만” 하라!

4️⃣ Mustache의 기본 동작 원리

Template (HTML + {{placeholder}}) + Model (Map<String, Object>) ↓ Rendered HTML
⬇️
template.execute(model, resp.getWriter());
➡️ 이 한 줄이 바로 그 작업

5️⃣ Mustache 기본 문법

[참고] Mustache 템플릿 문법 가이드

1) 변수 출력

<h1>{{title}}</h1>
req.setAttribute("title", "Hello");
⬇️ 결과
<h1>Hello</h1>

2) 객체 접근

req.setAttribute("user", user);
<p>{{user.name}}</p> <p>{{user.email}}</p>
Mustache는 getter 기반으로 접근
getName() → name

3) 조건부 출력 (if처럼 보이지만 아님)

{{#isLogin}} <p>환영합니다</p> {{/isLogin}}
req.setAttribute("isLogin", true);
  • 값이 truthy → 내부 렌더링
  • false / null → 렌더링 안 됨
if 문이 아니다
❗ 판단은 이미 끝난 상태여야 함

4) 리스트 반복

<ul> {{#items}} <li>{{name}}</li> {{/items}} </ul>
req.setAttribute("items", itemList);
  • List / 배열이면 자동 반복
  • 각 요소가 현재 컨텍스트가 됨

5) Map 처리

req.setAttribute("data", Map.of("title", "Hello"));
  • 예시
    • View 클래스의 model.putAll(map); 덕분에 → <h1>{{title}}</h1> 가능

6) HTML Escape

{{content}}
➡️ HTML escape 됨
{{{content}}}
➡️ escape 안 함 (주의)

6️⃣ Mustache가 “서블릿 실습”에 적합한 이유

1) HTTP 개념에 집중 가능

  • 요청 → 데이터 준비 → 응답
  • 뷰에 로직이 없어서
  • request / response 흐름이 명확

2) MVC 분리가 강제됨

  • Controller: 판단
  • Model: 데이터
  • View: 출력
이게 흐트러지지 않음.

3) Spring MVC로 자연스럽게 이어짐

return "home";
Spring에서 위의 한 줄 뒤에 숨어 있는 것
  • ViewResolver
  • Mustache / Thymeleaf
  • Model

7️⃣ 실습 코드와 Mustache의 연결 정리

1) ViewResolver

  • .mustache 파일 로드
  • Mustache 컴파일
  • View 생성

2) View

  • request attribute → model(Map)
  • Mustache 실행
  • HTML 응답 생성

3) Controller (Servlet)

  • 요청 처리
  • 데이터 판단
  • req.setAttribute()

8️⃣ Mustache의 장점과 단점

1) 장점

  • 단순함
  • 로직 분리 강제
  • 여러 언어에서 동일 문법
  • 학습 부담 적음

2) 단점

  • 복잡한 화면 구성에 한계
  • 조건 분기가 많으면 Controller가 비대해짐
  • 실무에선 Thymeleaf / React 등으로 이동하는 경우 많음
Share article