[스프링부트 blogV1] 11. 글 상세보기 mustache로 그림 그리기

Dec 30, 2024

[스프링부트 blogV1] 11. 글 상세보기 mustache로 그림 그리기

Contents


<!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>
    <li>
      <a href="#">글쓰기</a>
    </li>
  </ul>
</nav>
<hr> <!--줄긋기-->
<section>
  <div>
    번호 : {{model.id}} <br>
    제목 : {{model.title}} <br>
    내용 : {{model.content}} <br>
    작성일 : {{model.createdAt}} <br>
  </div>
</section>

</body>
</html>

mustache 주요 문법

변수 출력: {{variable}}: 변수를 출력한다. 예를 들어, {{name}}은 name이라는 변수의 값을 출력한다.

조건문 {{#condition}} ... {{/condition}}: condition이 true일 때만 내부 내용을 렌더링한다. {{^condition}} ... {{/condition}}: condition이 false일 때만 내부 내용을 렌더링한다.

리스트 반복 {{#list}} ... {{/list}}: list의 각 항목에 대해 내부 내용을 반복합니다. 예를 들어, {{#items}}<li>{{name}}</li>{{/items}}는 items 리스트의 각 항목에 대해 <li> 태그를 생성한다.

인덱스 사용 {{#list}} ... {{/list}} 블록 내에서 @index를 사용하여 현재 항목의 인덱스를 참조할 수 있다.

부모 참조 {{..}}: 부모 컨텍스트의 변수를 참조한다. 중첩된 템플릿에서 유용하다.

주석 {{! This is a comment }}: 주석을 추가할 수 있으며, 템플릿 렌더링 시 무시된다.

HTML 이스케이프 기본적으로 Mustache는 HTML 이스케이프를 수행합니다. 만약 HTML을 그대로 출력하고 싶다면, {{{variable}}}를 사용한다. 이 경우 variable의 값을 HTML로 해석.

기본값 제공 {{variable}}에서 variable이 존재하지 않거나 false일 경우, 기본값을 제공할 수 있다. 예: {{variable | defaultValue}}.

See more posts

[스프링부트 blogV1] 11. 글 상세보기 mustache로 그림 그리기

mustache 주요 문법

More articles

[스프링부트 blogV1] 12-1) util만들기

[스프링부트 blogV1] 12. 상세페이지에 데이터 연결하기

[스프링부트 blogV1] 10. 글 목록 보기 DTO 만들기

[스프링부트 blogV1] 9. 글 목록 보기 - 뷰 렌더링