Chapter 04. 머스테치로 화면 구상하기

서버 템플릿 엔지과 머스테치 소개

템플릿 엔진

템플릿 엔진이란, 지정된 템플릿 양식과 데이터가 합쳐저 html 문서를 출력하는 소프트웨어를 의미한다.

 

아래의 코드르 보자.

<script type = "text/javascript">
 
$(document).ready(function(){
    if(a=="1"){
    <%
        System.out.println("test");
    %>
    }
});

 

서버 템플릿 엔진

종류 - JSP, Freemarker

역할 - 서버 템플릿 엔진은 서버에서 구동된다. 서버 템플릿 엔진을 이용한 화면 생성은 서버에서 Java코드로 문자열을 만든뒤, 이 문자열을 html로 변환하여 브라우저로 전달한다. 즉, 브라우저에서는 화면에 띄우기만 하면 된다.

 

클라이언트 템플릿 엔진

종류 - React, Vue

역할 - 반면, 자바스크립트는 브라우저 위에서 작동한다. 앞에서 작성된 자바 스크림트 코드가 실행되는 장소는 서버가 아닌 브라우저이다. 즉, 브라우저에서 작동될때는 서버 템플릿 엔진의 손을 이미 벗어나서 제어할 수 없다. 그래서 서버에서는 Json, Xml형태로 데이터를 전달해주고 클라이언트에서 이것을 조립하여 브라우저에 보여준다.

머스테치란?

머스테치는 수많은 언어를 지원하는 가장 심플한 템플릿 엔진이다.

JSP, Freemarker는 인텔리제이 얼티메이트(유료) 버전에서만 공식 지원하는 반면, 머스테치는 커뮤니티(무료) 버전에서도 플러그인을 제공하기 때문에 개발자들이 사용하기 좋다.

기본 페이지 만들기

src/main/resources/templates에 index.mustache 파일을 만들어준다.

다음과 같이 코드를 작성한다.

머스테치 스타터 덕분에 컨트롤러에서 문자열을 반환할 때 앞의 경로와 뒤의 파일 확장자는 자동으로 지정된다.

앞의 경로 src/main/resources/templates가 되고

뒤의 파일 확장자는 .mustache가 붙게 된다.

즉, 여기서는 "index"를 반환하기 때문에 => src/main/resources/templates/index.mustache로 전환되어 View Resolver에 의해 처리된다.

 

src/test/java/com/jungahshin/blog/springboot/web/IndexControllerTest 파일에 다음과 같은 코드를 작성해줍니다.

Application.java의 main메소드를 실행한 후, http://localhost:8080/ 으로 접속하면 다음과 같은 화면이 보인다.

게시글 등록 화면 만들기

HTML만 사용하기에는 살짝 멋이 없기 때문에 Bootstrap을 이용하여 화면을 구상한다.

프론트엔드 라이브러리를 사용하는 방법에는 2가지 방법이 있다.

1. 외부 CDN을 사용

2. 직접 라이브러리를 받아서 사용 (일반적)

보통 1번의 방식은 현업에서 자주 사용되지 않는다. 이유는, 외부 CDN을 사용하게 되면 서비스가 외부에 의존하게 되어 외부CDN에 문제가 생기면 서비스에도 지장이 가기 때문이다.

 

여기에서는 부트스트랩과 제이쿼리를 일일히 파일에 추가하는 방식보다는, 머스테치 화면 어디에서나 많이 쓰이기 때문에

레이아웃 방식으로 추가한다.

 

레이아웃 방식이란? index.mustache에 바로 추가하는 것이 아니라 공통영역을 별도의 파일로 분리하여 필요한 곳에서 가져다 쓰는 방식이다.