티스토리 뷰

화면 템플릿/타임리프(Thymeleaf)

타임리프(Thymeleaf) 설정

토마's 2017. 2. 3. 14:30

안녕하세요. 오늘의 포스팅은 화면 템플릿에 대해서 포스팅해보려고 합니다.

화면 템플릿의 종류에는 여러가지가 있습니다만, 대표적으로 JSP, FreeMarker, Velocity, Thymeleaf 등이 많이 쓰인다고 합니다.

저 또한, JSP, FreeMarker 및 Thymeleaf를 접해봤는데, 그 중 오늘은 타임리프(Thymeleaf)의 설정 방법에 대해서 진행해보겠습니다.

타임리프 3 버전도 나왔지만 저는 이번 포스팅에서 타임리프 2.1.4 버전을 사용하도록 하겠습니다.

 

먼저 스프링 프로젝트에서 pom.xml의 파일을 열고, 다음의 코드를 추가해주면 됩니다.

<!-- Template Engine -->
<dependency>
  <groupid>org.thymeleaf</groupid>
  <artifactid>thymeleaf</artifactid>
  <version>2.1.4.RELEASE</version>
</dependency>
<dependency>
  <groupid>org.thymeleaf</groupid>
  <artifactid>thymeleaf-spring4</artifactid>
  <version>2.1.4.RELEASE</version>
</dependency>
<dependency>
  <groupid>nz.net.ultraq.thymeleaf</groupid>
  <artifactid>thymeleaf-layout-dialect</artifactid>
  <version>1.3.1</version>
</dependency>

 

그런 다음, webapp/WEB-INF/spring/appServlet/servlet-context.xml을 수정합니다.

 

기존의 JSP 뷰 리졸버(ViewResolver)인 아래의 내용을 삭제하고,

<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  <beans:property name="prefix" value="/WEB-INF/views/">
  <beans:property name="suffix" value=".jsp">
</beans:property></beans:property></beans:bean>

 

다음과 같이 타임리프 뷰 리졸버(ViewResolver)를 추가해줍니다.

<!-- thymeleaf View 설정 -->
<beans:bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
  <beans:property name="prefix" value="/WEB-INF/views/">
  <beans:property name="suffix" value=".html">
  <beans:property name="templateMode" value="HTML5">
  <beans:property name="characterEncoding" value="UTF-8">
  <beans:property name="cacheable" value="false">
</beans:property></beans:property></beans:property></beans:property></beans:property></beans:bean>
 
<!-- thymeleaf laytout을 쓰기위해 3rd Party 추가 -->
<beans:bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
  <beans:property name="templateResolver" ref="templateResolver">
  <beans:property name="additionalDialects">
    <beans:set>
      <beans:bean class="nz.net.ultraq.thymeleaf.LayoutDialect">
    </beans:bean></beans:set>
  </beans:property>
</beans:property></beans:bean>
	 
<!-- thymeleaf laytout ViewResolver 설정 -->
<beans:bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
  <beans:property name="templateEngine" ref="templateEngine">
  <beans:property name="characterEncoding" value="UTF-8">
  <beans:property name="order" value="1">
</beans:property></beans:property></beans:property></beans:bean>

 

 

 

그리고 기존에 있는 home.jsp는 삭제하셔도 되고, home.html을 다음과 같이 만들어줍니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
  <meta charset="UTF-8" />
  <title>Insert title here</title>
  </head>
  <body>
      Hello World..!!
    <br/>
    <th:block th:text="${serverTime}"></th:block>
  </body>
</html>

 

잘 연동이 되었는지 테스트를 하기 위해서 localhost:8080/example을 요청해봅니다. 잘 연동이 되었으면 다음과 같은 화면이 출력됩니다.

 

 

타임리프를 사용할 때 한가지 주의할 점은 Thymeleaf는 태그 유효성 체크가 매우 엄격하다고 합니다. 따라서, 사용하실 때 반드시

닫는 태그를 달아주도록 합니다.

 

오늘은 여러가지 뷰 템플릿 중에서 타임리프 설정에 대해서 알아보았습니다. 다른 템플릿도 좀 더 사용해보고 포스팅할 수 있도록 하겠습니다.

이만, 포스팅을 마치겠습니다 :)