[SpringBoot] Thymeleaf 설정 및 Thymeleaf HTML Code(th element) 사용법

728x90

StringBoot + Thymeleaf

Thymeleaf는 HTML, XML, Javascript, CSS 및 일반 텍스트를 처리할 수 있는 웹 및 독립형 환경에서 사용할 수 있는 Java 템플릿 엔진입니다. Thymeleaf는 html 파일을 가져와 파싱 해서 분석 후 정해진 위치에 데이터를 치환하여 웹 페이지를 생성합니다.

그러면 springboot에서 thymeleaf를 설정하는 방법에대해 알아보겠습니다.

SpringBoot는 spring-boot-starter-thymeleaf dependency를 추가하여 Thymeleaf에 대한 자동 구성을 제공합니다.

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

명시적인 구성은 필요하지 않지만, 기본적으로 html 파일은 /src/main/resources/templates 위치에 지정합니다.

application.yml 설정 없이 Java Configuration 설정 방법입니다.

@Configuration
@RequiredArgsConstructor
public class ThymeleafViewResolverConfig {

    private final ApplicationContext applicationContext;

    @Bean
    @Description("Thymeleaf Template Resolver")
    public SpringResourceTemplateResolver templateResolver() {
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setApplicationContext(this.applicationContext);
        templateResolver.setPrefix("classpath:templates/");
        templateResolver.setSuffix(".html");
        templateResolver.setTemplateMode("HTML5");
        // templateResolver.setCacheable(false);
        return templateResolver;
    }

    @Bean
    @Description("Thymeleaf Template Engine")
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(templateResolver());
        // templateEngine.addDialect(new SpringSecurityDialect());
        // templateEngine.addDialect(new LayoutDialect());
        // templateEngine.setTemplateEngineMessageSource(messageSource());
        return templateEngine;
    }
    
    @Bean
    @Description("Thymeleaf View Resolver")
    public ThymeleafViewResolver viewResolver() {
        ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
        viewResolver.setTemplateEngine(templateEngine());
        viewResolver.setCharacterEncoding(CharsetNames.UTF_8);
        viewResolver.setOrder(0);
        return viewResolver;
    }
}

templateResolver bean의 속성인 prefix와 suffix는 각각 webapp 디렉토리 내에서 view page의 위치와 해당 파일의 확장자를 가리킵니다.

SpringTemplateEngine 은 모든 구성 단계를 수행합니다.

ViewResolver 인터페이스는 컨트롤러가 반환한 view name을 실제 view 객체에 매핑합니다.

ThymeleafViewResolver 는 viewResolver 인터페이스를 구현하며 view name이 주어지면 렌더링 할 Thymeleaf 뷰를 결정합니다.

view에서 Message Source의 값 표시하기

th:text="#{key}" 태그 속성을 사용하여 property 파일의 값을 표시할 수 있습니다. 이 작업을 위해 property 파일을 messageSource bean으로 구성해야 합니다.

@Bean
@Description("Thymeleaf Template Engine")
public SpringTemplateEngine templateEngine() {
    SpringTemplateEngine templateEngine = new SpringTemplateEngine();
    templateEngine.setTemplateResolver(templateResolver());
    templateEngine.setTemplateEngineMessageSource(messageSource()); // messageSource 설정
    return templateEngine;
}

@Bean
@Description("Spring Message Resolver")
public ResourceBundleMessageSource messageSource() {
    ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
    messageSource.setBasename("messages");
    return messageSource;
}

다음은 'welcome.message' 키로 값을 표시하는 Thymeleaf HTML Code입니다.

<span th:text="#{welcome.message}" />

Displaying Model Attributes

Thymeleaf HTML Code는 jstl과 비슷합니다. c tag 사용 대신 th element를 사용한다고 생각하시면 됩니다.

Simple Attributes

<!-- model.addAttribute("helloWorld", "Hello world!"); -->
<!-- <span>Hello, world!</span> -->
<span th:text="${helloWorld}" />

<!--
model.addAttribute("hello", "Hello");
model.addAttribute("world", "world!"); -->

<span th:text="|${hello}${world}|" />

Collection Attributes - th:each로 반복문 사용

<!--
@Getter @Setter
public class StudentVO {
    private Integer id;
    private String name;
    private boolean gender;
}

List<StudentVO> studentList = new ArrayList<StudentVO>();
// logic to build student data
model.addAttribute("studentList", studentList);
 -->

<tbody>
    <tr th:each="student, status: *{studentList}" th:id="${'row_' + status.count}">
        <td th:text="${student.id}" />
        <td th:text="${student.name}" />
    </tr>
</tbody>

if and unless - unless는 if의 반대

<td>
    <span th:if="${student.gender eq 'M'}" th:text="Male" /> 
    <span th:unless="${student.gender eq 'M'}" th:text="Female" />
</td>

switch and case

<td th:switch="${student.gender}">
    <span th:case="'M'" th:text="Male" /> 
    <span th:case="'F'" th:text="Female" />
    <span th:case="*" th:text="Gender" />
</td>

block - 해당 영역 노출 여부

<th:block th:if="${not #lists.isEmpty(studentList)}">
    <tr th:each="student: ${studentList}">
        <td th:text="${student.id}" />
        <td th:text="${student.name}" />
    </tr>
</th:block>

Date to LocalDateTime

<!--
private LocalDateTime regYmdt;
public Date getRegYmdtToDate() {
	if (super.getRegYmdt() == null) {
		return null;
	}

	return Date.from(super.getRegYmdt().atZone(ZoneId.systemDefault()).toInstant());
}
-->

<span th:text="${#dates.format(student.getRegYmdtToDate(), 'yyyy/MM/dd (EEE) HH:mm')}" />

Spring Security + thymeleaf

thymeleaf 템플릿 엔진에서 spring security 인증, 인가 정보를 활용하기 위해 pom.xml에 dependency를 추가합니다.

<dependency>
	<groupId>org.thymeleaf.extras</groupId>
	<artifactId>thymeleaf-extras-springsecurity5</artifactId>
</dependency>

그리고서 template engine에 spring security dialect를 추가합니다.

@Bean
@Description("Thymeleaf Template Engine")
public SpringTemplateEngine templateEngine() {
    SpringTemplateEngine templateEngine = new SpringTemplateEngine();
    templateEngine.setTemplateResolver(templateResolver());
    templateEngine.addDialect(new SpringSecurityDialect()); // spring security dialect
    return templateEngine;
}

그러면 html에서 spring security 인증, 인가 정보를 활용할 수 있게 됩니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security/">
      
<th:block sec:authorize="isAuthenticated()">
    <!-- 로그인한 사용자만 접근 -->
    <span sec:authentication="principal.username"></span>님 반가워요!
</th:block>

      
</html>