[SpringBoot] Mustache를 이용하여 화면 만들기

 

 

* 부트스트랩, 제이쿼리 이용하기

 

• 외부 CDN을 사용
  • 외부 서비스에 의존하게 되어 CDN 서비스 하는 곳에 문제가 생길 경우 같이 문제가 생길 수 있다

 

• 직접 라이브러리를 받아서 사용
  • npm/bower/yarn/grunt/gulp/webpack 등

 

• CDN을 이용하여 레이아웃 방식으로 추가하기
  • 공통 영역을 별도의 파일로 분리하여 필요한 곳에서 가져다 쓰는 방식

 

layout 구조

 

• 페이지 로딩 속도를 높이기 위해 css는 header, js는 footer에 위치
  • js 용량이 클수록 body 실행이 늦어지기 때문에 body 하단에 두어 화면을 불러온 후 호출
  • css는 화면에 적용해야 하기 때문에 head에 위치하는 것이 좋다.

 

 

- index.mustache

{{>layout/header}}

    <h1>스프링 부트로 시작하는 웹 서비스</h1>

{{>layout/footer}}

* {{> }}는 현재 파일 기준으로 다른 파일을 가져온다.

 

 

 

---

 

 

글목록 화면

{{>layout/header}}

    <h1>스프링 부트로 만든 게시판</h1>
    <div class="col-md-12 ms-3">
        <div class="row">
            <div class="col-md-6 m-10">
                <a href="/posts/save" role="button" class="btn btn-primary">글 등록</a>
            </div>
        </div>
        <hr>
        <!-- 글목록 출력 영역 -->
        <table class="table table-bordered">
            <thead class="thead-strong">
                <tr>
                    <th>게시글번호</th>
                    <th>제목</th>
                    <th>작성자</th>
                    <th>최종수정일</th>
                </tr>
            </thead>
            <tbody id="tbody">
            {{#posts}}
                <tr>
                    <td>{{id}}</td>
                    <td>{{title}}</td>
                    <td>{{author}}</td>
                    <td>{{modifiedDate}}</td>
                </tr>
            {{/posts}}
            </tbody>
        </table>
    </div>

{{>layout/footer}}

 

• {{#posts}}: posts라는 List를 순회, 반복문
• {{id}} 등 변수명: List에서 뽑아낸 객체의 필드 사용
• {{#post.id}}: 객체 필드 접근 점(.)으로 구분