스프링부트 공부기록(7) - 머스테치(Mustache) 화면 구성하기

1. 🤍서버 템플릿 엔진이란?

• 템플릿 엔진이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어를 이야기함.
• JSP, Freemarker - 서버 템플릿 엔진 / 리액트, 뷰 - 클라이언트 템플릿 엔진
• 서버 템플릿 엔진은 서버에서 구동됨.
• 서버 템플릿 엔진을 이용한 화면 생성은 서버에서 Java 코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환하여 브라우저로 전달함. 
• 반대로 자바스크립트는 브라우저 위에서 작동하기 때문에 뷰,리액트를 이용한 SPA는 브라우저에서 화면을 생성함. 서버에서는 Json, Xml 형식의 데이터만 전달하고 클라이언트에서 조립합.

2.  

3. 🤍머스테치란?

• 머스테치는 루비, 자바스크립트, 파이썬, PHP, 자바 등 현존하는 대부분 언어를 지원하는 가장 심플한 템플릿 엔진임.

자바 진영에서는 JSP, Freemarker, Thymeleaf 등 다양한 서버 템플릿 엔진이 존재함. JSP는 스프링부트에서 권장하지 않고 Thymeleaf는 적극적으로 밀고 있지만 문법이 어려움. 머스테치 장점은?

• 문법이 다른 템플릿 엔진보다 심플함.
• View 역할과 서버의 역할이 명확하게 분리됨.
• Mustache.js, Mustache.java 2가지 다 있어 하나의 문법만으로 클라이언트/서버 템플릿 모두 사용 가능함.
• 인텔리제이 커뮤니티 버전을 사용해도 플러그인을 사용할 수 있음!!🙋‍♂️

---

4. 1. 머스테치 플러그인 설치

 

5. 2. 머스테치 의존성 등록

 

스프링 공식 지원 템플릿 엔진이기 때문에 의존성 하나만 추가하면 추가 설정이 필요하지 않음.

      

      

      

    
    

      <java />
    
implementation('org.springframework.boot:spring-boot-starter-mustache')

 

6. 3. index.mustache 생성

 

• 첫 페이지를 담당하는 역할

      

      

      

    
    

      <java />
    
{{>layout/header}}
    <h1>스프링부트로 시작하는 웹 서비스</h1>
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <a href="/posts/save" role="button" class="btn btn-primary">글 등록</a>
            </div>
        </div>
        <br>
        <!-- 목록 출력 영역-->
        <table class="table table-horizontal table-bordered">
            <thead class="thead-strong">
                <tr>
                    <th>게시글 번호</th>
                    <th>제목</th>
                    <th>작성자</th>
                    <th>최종 수정일</th>
                </tr>
            </thead>
            <tbody id="tbody">
                {{#posts}}  <!-- posts라는 List를 순회하겠다.(=java의 for문) -->
                    <tr>
                        <td>{{id}}</td>
                        <td><a href="/posts/update/{{id}}">{{title}}</a></td>
                        <td>{{author}}</td>
                        <td>{{modifiedDate}}</td>
                    </tr>
                {{/posts}}
            </tbody>
        </table>
    </div>
{{>layout/footer}}