Break Out of Your Comfort Zone

[thymeleaf] 1. thymeleaf란? spring boot 환경설정

 
  • Mar 15, 2021


목차

  1. Thymeleaf란?
  2. Spring Boot + Thymeleaf 환경 설정
  3. 디렉토리 구조 + Controller 연결 간단 예제



Spring Boot와 Thymeleaf 환경설정 및 사용법



회사에서 Spring Boot와 Thymeleaf를 사용하게 되었는데 사용법이 매우 어렵진 않지만 처음 접하는 입장에서 까다로운 점이 많았다.

프로젝트를 진행하며 새로 알게된 내용과 문제를 해결한 부분들을 간단하게 정리하고 공유해보려고 한다.




1. Thymeleaf란?

  • 뷰 템플릿 엔진으로 컨트롤러가 전달하는 데이터를 이용하여 동적으로 화면을 구성할 수 있게 해준다.

  • html 태그를 기반으로 하여 동적인 View를 제공한다.

  • th:속성을 이용하여 데이터를 바인딩한다.

  • 예시 - ${name} 은 서버에서 전달한 데이터

    <p th:text="${name}"></p>




2. Spring Boot + Thymeleaf 환경 설정

Spring Boot 프로젝트에서 Thymeleaf 사용하기

Maven
  • pom.xml에 dependency 추가
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>



Gradle
  • build.gradle에 dependency 추가
dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}




3. 디렉토리 구조 + Controller 연결 간단 예제

src/main/resources 하위의 templates 폴더 아래 .html 파일 위치

templates 폴더 아래에 있을 경우 자동으로 path가 지정되어 호출할 수 있음

image



파일
main/java/com/example/spring
1) model/Student.java
2) controller/ThymeleafController.java

main/resources/templates
3) selectStudentInfo.html


1) model/Student.java
package com.example.spring.model;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Setter
@Getter
@ToString
public class Student {
    /** 아이디 */
    private String id;
    /** 이름 */
    private String name;
    /** 나이 */
    private int age;
}


2) controller/ThymeleafController.java
package com.example.spring.controller;

import com.example.spring.model.Student;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("thymeleaf")
public class ThymeleafController {
    
    @RequestMapping("selectStudentInfo")
    ModelAndView selectStudentInfo() {
        ModelAndView mav = new ModelAndView("/selectStudentInfo");
        
        Student student = new Student();
        student.setId("210000001");
        student.setName("Anne Marie");
        student.setAge(29);
        
        /** thymeleaf에서 사용할 object명, object를 ModelAndview에 넣어준다. */
        mav.addObject("title", "selectStudentInfo()");
        mav.addObject("student", student);
        
        return mav;
    }
}


3) thymeleaf/selectStudentInfo.html
<!DOCTYPE html>
<html>
  <head>
    <title th:text="${title}"></title>
  </head>
  <body>
    <h3>Student Info</h3>
    <!-- Controller에서 담았던 이름(student)을 이용하여 객체의 필드에 접근할 수 있다. -->
    <p th:text="${student.id}"></p>
    <p th:text="${student.name}"></p>
    <p th:text="${student.age}"></p>
  </body>
</html>



결과

image



타임리프의 자세한 문법은 다음 게시글에서 설명하도록 하겠다.



Search