SpringMVC 🌱 View Template에 대한 이해와 사용법

Doridam·2023년 6월 7일

Spring Thymeleaf ViewTemplate freemarker groovy template mustache springMVC

Spring🌱 & Boot 🌼

목록 보기

12/12

View

SpringMVC의 View. View의 역할은 사용자에게 UI를 제공하거나 입력을 받고, 처리한 결과값을 보여주는 역할을 하는것에 있다. 대표적으로 FrontframeWork를 사용해서 RestAPI로 구현하거나 SSR(Server Side Rendering)인 Template Engine을 사용한다. 대표적으로 사용되는 Template Engine은 Thymeleaf, Apache Freemarker, Mustache, Groovy Templates 등이 있다.

Template Engine

Template Engine은 동적인 데이터를 바탕으로 HTML등의 템플릿을 생성하는 역할을 한다. Server측에서 랜더링 되기 때문에 SSR(Server Side Rendering)이라 하며 서버측의 코드와 HTML 문법을 조합하여 최종 결과물을 클라이언트에게 전달하게 된다.

Thymeleaf

Spring에서 권장하는 Template Engine. HTML 기반의 템플릿을 작성하며, thymeleaf의 문법을 사용하여 동적인 데이터를 랜더링한다. HTML파일로 작성되기 때문에 랜더링을 하지 않더라도 마크업된 템플릿을 확인 할 수 있고 if, each 와 같은 로직도 지원한다.

사용법

1. dependency 추가

※ 테스트 환경 : SpringBoot 2.7.12 / IntelliJ IDE / Windows 10
// gradle의 경우 build.gradle에 추가
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
/
// maven 의 경우 pom.xml 에 추가
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
위에 해당하는 dependency를 각각 빌드툴에 맞게 추가한다.

2. application.properties에 ViewResolver 관련 설정 추가
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
templates 폴더 내부에 확장자가 .html인 파일로 ViewResolver를 지정하는 내용이다. 만약 다른 경로로 지정한다면 수정 후 저장한다. 파일을 resources>templates에 저장하면 자동으로 ViewResolver가 자동으로 파일의 경로를 잡아주기 때문에 Controller의 return 값에는 파일명만 적으면 된다.

3. 태그 라이브러리 선언
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
HTML 파일 상단에 th로 thymeleaf의 태그 라이브러리를 선언한다.

4. 태그를 사용하여 동적 데이터를 바인딩한다.

Server 측 코드 GetMapping을 통해 test라는 변수명으로 "테스트입니다." 값을 넣어 testView라는 이름의 View 파일로 전달한다.
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>TEST</title>
</head>
<body>
    <h1 th:text="${test}"></h1>
</body>
</html>
th:text="${test}" model.addAttribute를 통해 전달된 test가 값이 바인딩되도록 SpringEL인 ${변수명}을 사용해 템플릿을 작성했다.

th:text 문법을 사용해서 h1 태그를 작성하지 않았음에도 "테스트입니다."라는 값이 나온것을 확인하였다.
Server에서 렌더링시 값이 바인딩된 것을 볼 수 있다.
또한 여러가지 문법을 사용하여 Style에 적용하거나 value에 적용하는등 다양하게 사용할 수 있다.
기본 문법

변수 선언 : ${변수명}

변수 값 출력: [[변수명]]

조건문 :
<div th:if="${조건식}">
  조건이 참일 때 보여지는 내용
</div>
<div th:unless="${조건식}">
  조건이 거짓일 때 보여지는 내용
</div>
반복문
<ul>
  <li th:each="item : ${컬렉션}">
    [[item]]
  </li>
</ul>
속성값 설정
<a th:href="@{경로/URL}">링크</a>
<img th:src="@{이미지_경로}" alt="이미지">
인클루드 (다른 템플릿을 포함)
<div th:include="템플릿_파일명 :: 섹션_이름"></div>
링크를 통해 다른 문법을 확인할 수 있다.

Apache Freemarker

Apache Freemarker 같은 경우 Apache 재단에서 관리하는 오픈소스 Template Engine 이며 파일 확장자명은 .FTL(Freemarker Template Langueage)로 작성된다. 조건문, 반복문, 매크로와 메소드 등의 자바의 프로그래밍 요소들을 가지고 있다.

사용법

1. dependency 추가

※ 테스트 환경 : SpringBoot 2.7.12 / IntelliJ IDE / Windows 10
	// gradle의 경우
	implementation 'org.springframework.boot:spring-boot-starter-freemarker'
	// maven의 경우
	<dependency>
    	<groupId>org.springframework.boot</groupId>
    	<artifactId>spring-boot-starter-freemarker</artifactId>
	</dependency>
2. application.properties 설정
spring.freemarker.template-loader-path=classpath:/templates/
spring.freemarker.suffix=.ftl
freemarker 관련 ViewResolver를 설정 해 준다. resource/templates 기본경로를 가지고 .ftl 확장자를 가진 파일로 설정한다.

3. 메소드 및 템플릿 작성

기본적인 데이터 바인딩의 경우 ${변수명}을 사용한다. 코드 결과에 따라 "프리마커 테스트입니다."가 결과로 나온것을 확인 할 수 있다.
기본 문법

변수선언 : <#assign 변수명 = 값>

변수 참조: ${변수명}

조건문 :
<#if 조건식>
  조건이 참일 때 실행할 내용
<#elseif 다른_조건식>
  다른 조건이 참일 때 실행할 내용
<#else>
  모든 조건이 거짓일 때 실행할 내용
</#if>
반복문 :
<#list 리스트 as 변수명>
  반복할 내용
</#list>
<#foreach 변수명 in 리스트>
  반복할 내용
</#foreach>
<#list 1..10 as i>
  반복할 내용 (${i})
</#list>
함수
${변수?upper_case}      // 변수를 대문자로 변환
${변수?lower_case}      // 변수를 소문자로 변환
${변수?length}          // 변수의 길이 반환
${변수?default("기본값")} // 변수가 없을 경우 기본값 지정
인클루드 (다른 템플릿을 포함)
<#include "다른_템플릿.ftl">
링크를 통해 추가 정보를 확인 할 수 있다.

Mustache

간단하고 직관적인 Template Engine이며 로직이 없는 Logic-Less Templates 라 불린다. 조건문이나 반복문은 있지만 이는 템플릿에 적용되기 전에 서버 또는 클라이언트에서 처리되므로 템플릿에서 처리하지 않기 때문이다.

사용법

1. dependency 추가

※ 테스트 환경 : SpringBoot 2.7.12 / IntelliJ IDE / Windows 10
	//gradle의 경우 > build.gradle
    implementation 'com.github.spullara.mustache.java:compiler:0.9.6'
	//maven의 경우 > pom.xml
	    <dependency>
        	<groupId>com.github.spullara.mustache.java</groupId>
        	<artifactId>compiler</artifactId>
        	<version>0.9.6</version>
    	</dependency>
mustache 는 기본적인 경로로 resources/templates를 잡고 있기 때문에 별도의 ViewResolver 설정은 필요치 않다. 파일 확장자는 .mustache 이다.

2. 메소드 및 템플릿 작성

기본 문법은 {{변수명}}을 사용하여 데이터를 바인딩한다. #을 사용하여 if문이나 반복문도 사용가능하다. 하지만 직접적인 로직이 존재하지 않기 때문에 서버에서 로직에 대한 처리 후 View로 전달해야하며 템플릿과 로직을 명확히 분리시켜 유지보수성과 템플릿의 재사용성을 높은 템플릿 엔진이다.
기본 문법

변수 출력: {{변수명}}

변수 값이 HTML이나 특수 문자를 포함하는 경우: {{{변수명}}} (이스케이프 처리하지 않음)

조건식 :
{{#조건식}}
  조건이 참일 때 보여지는 내용
{{/조건식}}
{{^조건식}}
  조건이 거짓일 때 보여지는 내용
{{/조건식}}
반복문 :
<ul>
  {{#배열명}}
    <li>{{.}}</li>
  {{/배열명}}
</ul>
속성값 설정 :
<a href="{{경로/URL}}">링크</a>
<img src="{{이미지_경로}}" alt="이미지">
템플릿 인클루드 :
{{> 템플릿_파일명}}

Groovy Template

Groovy 언어를 바탕으로 만들어진 Template Engine. Groovy 스크립팅 언어와 java언어를 사용하여 동적인 컨텐츠를 생성할 수 있다. java와 호환이 되기 때문에 java의 메소드나 클래스를 호출하여 사용할 수 있다. 또한 템플릿의 상속을 지원하여 재사용에 용이하다.

사용법

1. dependency 추가

※ 테스트 환경 : SpringBoot 2.7.12 / IntelliJ IDE / Windows 10
	// gradle > build.gradle
    implementation 'org.codehaus.groovy:groovy-templates:<version>'
	// maven > pom.xml
    <dependency>
        <groupId>org.codehaus.groovy</groupId>
        <artifactId>groovy-templates</artifactId>
        <version>3.0.7</version>
    </dependency>
2. ViewResolver 설정
spring.groovy.template.prefix=/templates/
spring.groovy.template.suffix=.tpl
resources/templates를 기본 경로로 설정 후 확장자를 .tpl로 설정한다.

3. 메소드 작성 및 템플릿 작성

변수 참조는 ${변수명} 으로 변수 참조하며 ${age > 18 ? '성인' : '미성년자'} 와 같은 표현식을 사용하여 데이터를 바인딩 할 수 도 있다.
기본 문법

변수 참조 : ${변수명}

표현식 : ${표현식} ex) ${조건 ? '참':'거짓'}

반복문 : <% for (요소 : 컬렉션) { %> 반복될 내용 <% } %>
<% for (item in items) { %>
    <li>${item}</li>
<% } %>
조건문 : <% if (조건) { %> 나타낼 값 <% } %>
<% if (age >= 18) { %>
    <p>성인</p>
<% } else { %>
    <p>미성년자</p>
<% } %>
인클루드 : header.tpl과 footer.tpl 파일의 내용을 현재 템플릿에 인클루드 한다.
<% include "header.tpl" %>
<h1>Welcome!</h1>
<% include "footer.tpl" %>

마무리

Spring Initializr에서 적용가능한 대표적인 템플릿 엔진 4가지의 대해 알아보았다. jsp와 같은 많이 사용되는 다른 템플릿 엔진도 있지만 jsp의 경우 SpringBoot에서는 사용을 권장하지 않기(설정한다면 사용은 가능하다.) 때문에 공식적으로 사용을 권장하는 템플릿 엔진을 확인해봤다. 4개의 템플릿 엔진중 가장 많이 사용되는것은 Thymeleaf가 많이 사용되지만 사용하는 프로젝트의 상황에 따라 적절한 템플릿 엔진을 사용하는것이 좋을 것으로 보인다.

Doridam

도리도리담담 🐤🐥🐤🐥🐣🐣

이전 포스트

SpringMVC 🌱 View Template에 대한 이해와 사용법

Spring🌱 & Boot 🌼

View

Template Engine

Thymeleaf

사용법

1. dependency 추가

2. application.properties에 ViewResolver 관련 설정 추가

3. 태그 라이브러리 선언

4. 태그를 사용하여 동적 데이터를 바인딩한다.

Apache Freemarker

사용법

1. dependency 추가

2. application.properties 설정

3. 메소드 및 템플릿 작성

Mustache

사용법

1. dependency 추가

2. 메소드 및 템플릿 작성

Groovy Template

사용법

1. dependency 추가

2. ViewResolver 설정

3. 메소드 작성 및 템플릿 작성

마무리

SpringMVC 🌱 Model의 이해

0개의 댓글