머스테치(Mustache)란?

머스테치(Mustache) 는 JSP와 같이 HTML을 만들어 주는 템플릿 엔진입니다. 또한 수많은 언어를 지원하는 가장 심플한 템플릿 엔진으로 java에서 이용할 때는 서버 템플릿 엔진, javascript에서 이용할 때는 클라이언트 템플릿 엔진으로 모두 사용 가능하다.
(루비, 자바스크립트, 파이썬, PHP, 자바, 펄, Go, ASP 등 지원)

 

• Mustache 템플릿 파일을 호출하려면 반드시 컨트롤러를 통해 호출해야 한다.
• 머스태시의 파일 위치는 기본적으로 scr/main/resources/templates이다.
• 머스태시의 파일 확장자는 .mustache이다. (.html파일 확장자를 .mustache로 생성하면 된다)

 

Template Engine?

템플릿 엔진은 "프로그램 로직" <-> "프리젠테이션" 계층을 분리하기 위한 수단으로 Controller -> View로 데이터를 던지면 어떻게 계층을 분리하여 쉽게 표현할지를 도와주는 도구다. 템플릿 엔진은 프리젠테이션 계층에서 로직을 쉽게 표현하고 개발의 유연성을 향상 시킴 & 유지보수 효율 향상시켜주는 역할을 한다.

 

 

 

Mustache 흐름정리

아직 정확한 흐름을 파악하진 못했다. 그래도 까먹기 전에 먼저 정리하고 나중에 확실하게 변경하자!

 

 

1. 표현하고자 하는 화면은 <div id="아이디1"></div>로 나뉘어져 있다.

{{> layouts/header}}
<div class="category">
	<div id="카테고리"></div>
	<div id="내용"></div>
	<div id="사이드바"></div>
</div>
<hr>
                
<script>
    $(function () {
       
    });
</script>
{{> requirements/import}}
{{> layouts/footer}}

layouts/header는 header 영역, layouts/footer는 footer 영역이다. 해당 영역들은 모든 페이지에 공통적으로 사용된다.

나머지 <div class="category"></div>는 각각 화면의 영역을 block단위로 나눈것을 랜더링을 통해 해당 아이디 값으로 화면이 띄워지게 만들어준다. 

 

2. view - presenters 

 * 기본 {@link PagePresenter}.

 * 데이터를 조합하여 웹페이지를 위한 view model을 생성하는 객체의 인터페이스.
 * 데이터를 조합하여 뷰 모델을 만들 필요가 없는 정적 페이지인 경우에 쓰인다.
 * 하나의 {@link PagePresenter}는 모든 개별 페이지와 1:1 대응한다. 

public interface PagePresenter<T> {
    PageId pageId();

    PageViewModel<T> present();
}

@Component
class PcCategoryBigPresenter implements PagePresenter<TestingViewModel> {
    private final PageId pageId = PageId.of("상위폴더", "해당페이지명", PageType.PC);

    @Override
    public PageId pageId() {
        return pageId;
    }

    @Override
    public PageViewModel<TestingViewModel> present() {
        return PageViewModel.of(new TestingViewModel("대카테고리 페이지"), List.of("big-block"));
    }

}

 

 

3. resources/templates/blocks/big-block/

resources/templates/blocks/ 폴더는 쉽게 말해서 각각의 화면을 block단위로 나눈 폴더다. 그 중에서 자주 사용하는 화면의 부분은 resources/templates/comm에 정리되어있다. 

 

대부분의 화면은 .js파일과 .mustache파일로 나뉘어져있는데 .mustache파일은 화면을 담당하는 파일이고 .js파일은 .musthache파일을 이전1번에 <div id="아이디명"></div>로 나뉘어져 있는 부분에 화면을 뿌려주는 역할을 담당한다. 

(렌더링을 통해)

 

requirements.txt파일은 띄우고자 하는 화면단을 위에서부터 아래로 순차적으로 작성하는 화면이다. 단, 작성 시 왠만한 영역은 .js파일과 .mustache파일을 둘다 작성해야한다.