본문 바로가기
스프링부트와 AWS로 혼자 구현하는 웹서비스

스프링 부트 서버 템플릿 엔진과 클라이언트 템플릿 엔진 차이 (feat. 머스테치 사용법)

by 초이사 2023. 3. 1.

이 글은 '스프링부트와 AWS로 혼자 구현하는 웹 서비스 - 이동욱(jojoldu)'을 공부하며 작성한 글로 생략된 내용은 책을 구매해서 확인하는 것을 권장합니다.

참고 소스코드 깃허브 https://github.com/jojoldu/freelec-springboot2-webservice

http://www.yes24.com/Product/Goods/83849117

 

스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - YES24

가장 빠르고 쉽게 웹 서비스의 모든 과정을 경험한다. 경험이 실력이 되는 순간!이 책은 제목 그대로 스프링 부트와 AWS로 웹 서비스를 구현한다. JPA와 JUnit 테스트, 그레이들, 머스테치, 스프링

www.yes24.com

 

이 글은 4장에 해당하는 내용 중 서버템플릿 엔진과 클라이언트 템플릿 엔진, 스프링부트에서의 머스테치 사용법에 대해 정리하고자 한다.

 

템플릿 엔진

지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어 (-> 웹 사이트의 화면 구성을 어떤 형태로 만들지 도움을 주는 양식)  ex) JSP(View의 역할만 하도록 구성), Freemarker, React 등

  • 서버 템플릿 엔진 : 서버에서 자바 코드로 문자열을 만들고 이를 HTML로 변환해 브라우저로 전달한다.
  • 클라이언트 템플릿 엔진: 소스 코드가 실행되는 장소는 서버가 아닌 브라우저로, 서버에서는 Json, Xml 형식의 데이터만 전달하고, 브라우저에서 HTML을 생성한다.

 

머스테치(mustache)

수많은 언어를 지원하는 가장 심플한 템플릿 엔진

루비, 자바스크립트, 파이썬, PHP, 자바, 펄, Go, ASP 등 현존하는 대부분 언어 지원 -> 자바에서 사용시 서버 템플릿 엔진으로, 자바스크립트에서 사용시 클라이언트 템플릿 엔진으로 사용 가능

  • 자바에서 진영에서의 템플릿 엔진 단점
    • JSP, Velocity: 스프링부트에서 권장하지 않는 템플릿 엔진
    • Freemarker: 템플릿 엔진으로는 과한 기능 지원 -> 높은 자유도로 숙련도가 낮다면 Freemarker안에 비즈니스 로직이 추가될 수 있음
    • Thymeleaf: 스프링 진영에서 권장하고 있는 템플릿 엔진, HTML 태그에 속성으로 템플릿 기능을 사용하는 방식으로 어렵게 느껴질 수 있음.
  • 머스테치 장점
    • 문법이 비교적 심플
    • 로직 코드 사용 불가 -> View의 역할과 서버의 역할이 명확하게 분리된다.
    • Mustache.js와 Mustache.java 1가지가 모두 존재 -> 하나의 문법으로 클라이언트/서버 템플릿 엔진 모두 사용가능

* 템플릿 엔진이 너무 많은 기능을 제공하면 API,템플릿 엔진, 자바스크립트가 서로 로직을 나눠갖게 되어 유지보수하기가 어려워질 수 있다.

 

 

 

스프링 부트 프로젝트에서 머스테치 사용하기

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

- 인텔리제이 커뮤니티 버전에서도 플러그인 사용 가능 (JSP와 Thymeleaf는 얼티메이트 버전만 공식 지원)

- 플러그인 사용시 문법 체크, HTML 문법 지원, 자동완성 등이 지원

 

Help -> FindAction(단축키 shift + ctrl + A) -> Plugins 검색 -> MarketPlace -> mustache install하기

아래 이미지처럼 설치를 완료한다.

머스테치 플러그인 설치완료

 

2. 프로젝트 build.gradle에 머스테치 스타터 의존성 등록 

//머스테치
implementation('org.springframework.boot:spring-boot-starter-mustache')

의존성 하나만 추가하면 다른 스타터 패키지처럼 추가설정 없이 설치가 끝난다.

 

머스테치의 기본파일 위치는 src/main/resources/templates이다.

-> 여기에 머스테치 파일을 두면 자동으로 로딩한다.

 

 

기본 페이지 만들기 (머스테치 파일 인식하고 실행하는지 테스트)
index.mustache 생성 (src/main/resources/templates)

<!DOCTYPE HTML>
<html>
<head>
	<title>스프링 부트 웹서비스</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    
</head>
<body>
	<h1>스프링 부트로 시작하는 웹서비스</h1>
</body>
</html>

 

IndexController 생성 (com.project.webservice.web)

- index와 매핑할 url 작성

@Controller
public class IndexController {

    @GetMapping("/")
    public String index() {
        return "index";
    }

}

return "index"는 머스테치 스타터로 인해 index.mustache로 전환되어 View Resolver가 처리한다.

 

IndexControllerTest 생성 (테스트 폴더에 위치 com.project.webservice.web)

@ExtendWith(SpringExtension.class)
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
public class IndexControllerTest {

    @Autowired
    private TestRestTemplate restTemplate;

    @Test
    public void 메인페이지_로딩() {
        //when
        String body = this.restTemplate.getForObject("/", String.class);
		
        //url 호출시 페이지에 "스프링 부트로 시작하는 웹 서비스" 포함되어 있는지 검증
        //then
        assertThat(body).contains("스프링 부트로 시작하는 웹서비스");
    }
}

테스트 통과 후

Application을 실행해 localhost:8080에 접속하면 정상적으로 화면이 노출되는 것을 확인할 수 있다.

 

 

저작자표시 비영리 변경금지 (새창열림)

'스프링부트와 AWS로 혼자 구현하는 웹서비스' 카테고리의 다른 글

스프링 시큐리티와 OAuth2.0으로 로그인 구현하기 - 구글 로그인  (0) 2023.03.06
스프링 부트 게시글 등록 및 전체 조회 목록, 수정, 삭제 화면 구현  (0) 2023.03.01
스프링 부트 JPA Auditing 생성/수정시간 자동화  (0) 2023.02.25
스프링 부트 Spring Data JPA 적용 및 등록,수정,조회 API 작성하기  (0) 2023.02.24
스프링 부트에서 테스트 코드 작성하기  (0) 2023.02.24

관련글

댓글

티스토리툴바