[기술정리] Mustache 문법

이나겸

Dec 01, 2024

Contents

Mustache 특징 Mustache 문법 기본 HTML Escape Section (조건 및 반복)Partial 주석 Spring Boot와의 통합

💡

Mustache

Java 및 Spring Boot에서 사용되는 간단하고 직관적인 템플릿 엔진

특징

로직이 없는 템플릿

템플릿 파일에 비즈니스 로직을 포함하지 않고 데이터를 표시하는 데만 집중

Spring Boot에서 Mustache를 사용하면 HTML 파일을 템플릿으로 활용해 동적인 웹 페이지를 생성 가능

Mustache 문법 기본

변수 출력

{{variable}} : 변수의 값 출력

이 경우 name의 변수의 값이 여기에 출력됨


<p>{{name}}</p>

{{{variable}}} : HTML을 이스케이프하지 않고 출력


{{{htmlContent}}}

기본 값 처리

{{variable}}가 존재하지 않을 경우 빈 문자열 출력

기본 값 설정하려면 {{variable or "default"}} 사용 가능

HTML Escape

기본적으로 Mustache는 HTML을 이스케이프 처리하여 XSS 공격 방지

HTML 예시


<p>{{safeHtml}}</p>

데이터 예시 (json 데이터)


{
  "safeHtml": "<script>alert('hello');</script>"
}

출력 예시


<p>&lt;script&gt;alert('hello');&lt;/script&gt;</p>

Section (조건 및 반복)

조건부 렌더링

{{#variable}} : 값이 참일 경우 렌더링

{{/variable}} : 섹션 닫기


{{#isLoggedIn}}
    <p>Welcome, {{name}}!</p>
{{/isLoggedIn}}

반대 조건 (값이 없을 때)

{{^variable}} : 값이 없을 경우 렌더링


{{^isLoggedIn}}
    <p>Please log in.</p>
{{/isLoggedIn}}

조건부, 반대 조건 렌더링 예제

로그인을 안 하면 로그인과 회원가입이 보이고

로그인을 하면 글쓰기와 로그아웃이 보임


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>blog</title>
</head>
<body>

<nav>
    <ul>
        <li>
            <a href="/">홈</a>
        </li>
        {{#sessionUser}} <!-- if (로그인 했을때) -->
            <li>
                <a href="/board/save-form">글쓰기</a>
            </li>
            <li>
                <a href="/logout">로그아웃</a>
            </li>
        {{/sessionUser}}
        {{^sessionUser}} <!-- else (로그인 안했을때) -->
            <li>
                <a href="/login-form">로그인</a>
            </li>
            <li>
                <a href="/join-form">회원가입</a>
            </li>
        {{/sessionUser}}
    </ul>
</nav>

<hr>

반복

리스트 데이터 반복 렌더링

이 경우 item은 리스트이고, {{.}}는 현재 반복 요소를 의미


{{#items}}
    <li>{{.}}</li>
{{/items}}

Partial

템플릿 분할

{{> partial}} : 다른 템플릿 파일을 포함

HTML에서의 include


{{> header}}
<p>Main content here.</p>
{{> footer}}

주석

{{! comment }}


{{! This is a comment }}

Spring Boot와의 통합

Spring Boot에서 Mustache를 사용하려면 Mustache Starter를 의존성에 추가해야함

의존성 추가

build.gradle 파일 또는 pom.xml 파일


implementation 'org.springframework.boot:spring-boot-starter-mustache'

템플릿 파일 위치

기본적으로 Mustache 템플릿은 src/main/.resources/templates 디렉토리에 위치해야 함

템플릿 확장자는 .mustach로 지정