mustache 기본 문법
Mustache는 간단하고 직관적인 템플릿 엔진으로, HTML 등의 템플릿에서 데이터를 삽입하거나 간단한 로직을 표현할 수 있습니다
- {{값}} 데이터 전달
- {{#값}} 조건문 혹은 반복문(컬렉션)
- {{^값}} 부정
- {{>파일명}} 부분 템플릿 (헤더랑 푸터 가져올 때 사용)
- {{#컬렉션}} -> 내부에 키 값이 없으면 출력할 때ㅡ {{.}} 으로 사용
- {{{ }}} 콧수염 태그 - 이스케이프 안됨
- 데이터 표시 (Interpolation): {{값}}
- 설명: 템플릿에 데이터를 삽입할 때 사용합니다.
만약 name에 "홍길동"이란 값이 전달되면, 결과는 <p>안녕하세요, 홍길동님!</p>가 됩니다.
- 섹션 (Sections): {{#값}}...{{/값}}
- 설명: 조건문이나 반복문을 구현할 때 사용합니다. 값이 참(또는 참 같은 값)이면 내부 내용을 렌더링합니다.
- 조건문 예시:
isMember가 true일 경우에만 메시지가 표시됩니다.
- 반복문 예시
items가 객체들의 배열이라면, 각 객체의 name과 price를 이용해 리스트를 만듭니다.
- 역섹션 (Inverted Sections): {{^값}}...{{/값}}
- 설명: 값이 거짓(또는 거짓 같은 값)이면 내부 내용을 렌더링합니다.
- 예시:
- 부분 템플릿 (Partials): {{>파일명}}
- 설명: 다른 템플릿 파일을 삽입할 때 사용합니다. 코드의 재사용성을 높여줍니다.
- 예시:
현재 템플릿에 header.mustache 파일의 내용을 포함합니다.
- 현재 값 출력: {{.}}
- 설명: 반복문 내에서 현재 아이템의 값이 키 없이 단순한 값일 때 사용합니다.
- 예시:
colors가 ["빨강", "초록", "파랑"]이라면, 각 문자열 값이 리스트 아이템으로 출력됩니다.
Mustache 추가 개념 정리
- 데이터 구조 이해하기: Mustache는 전달된 데이터 모델을 기반으로 렌더링합니다. 따라서 데이터 구조를 잘 이해하고 있어야 올바르게 템플릿을 작성할 수 있습니다.
- 로직 최소화: Mustache는 템플릿에서의 로직 사용을 최소화하여 뷰와 비즈니스 로직을 분리하는 데 도움을 줍니다.
- 부분 템플릿 활용: 공통되는 헤더나 푸터 등을 부분 템플릿으로 분리하면 코드의 재사용성과 유지보수성이 높아집니다.
- HTML 이스케이프: Mustache는 기본적으로 데이터 값을 HTML 이스케이프 처리합니다. 만약 이스케이프를 원하지 않는다면 {{{값}}} 또는 {{& 값}}을 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
{{> header}}
{{#isMember}}
<p>안녕하세요, {{name}}님!</p>
<ul>
{{#notifications}}
<li>{{.}}</li>
{{/notifications}}
</ul>
{{/isMember}}
{{^isMember}}
<p>로그인해 주세요.</p>
{{/isMember}}
{{> footer}}
</body>
</html>
IndexController
package com.example.demo._domain.blog.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class IndexController {
// 정적 파일을 --> 어떤 폴더에 넣어야 해 --> static 넣어야 한다.
// http://localhost:8080/index
@GetMapping({"/index" , "/index2"})
public String index1(Model model) {
// 뷰 쪽으로 내려줄 데이터를 만들어 보자.
String name = "길동";
int age = 22;
String email = "<b>a@naver.com</b>";
String password = "asd123";
model.addAttribute("name", name);
model.addAttribute("age", age);
model.addAttribute("email", email);
model.addAttribute("password", password);
// viewResolver 동작
// src/main/resources/templates/index.mustache 를 찾을 수 있도록 파일 생성
return "index";
}
}index.mustache
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<span>
여기 폴더 위치는 어떻게 될까요?
</span>
<p>이름: {{name}}</p>
<p>나이: {{age}}</p>
<p>이메일: {{{email}}}</p>
<p>패스워드: {{password}}</p>
</body>
</html>
실행 결과____
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<span>
여기는 정적 파일 home.html 입니다.
</span>
</body>
</html>