티스토리 뷰

[JAVA]/Spring-Boot

[Spring-Boot] Thymeleaf 1: 시작하기

춘햄 2021. 7. 8. 16:41

Spring-Boot에서는 JSP를 활용하여 View를 구성하는 것이 아닌, Thymeleaf를 사용한 view 구성을 권장하고 있다. 

 

우선 Thymeleaf는 Web을 구성하기 위한 템플릿 엔진 중 하나이다. 템플릿 엔진이란 html(Markup)과 데이터를 결한한 결과물을 만들어 주는 도구이며, JSP 개발에서 이전에 사용했던 el 태그와 비슷하게 생각하면 편하다.

Thymeleaf를 Spring-Boot 환경에서 사용하기 위해서는 다음과 같이 dependency를 추가해야 한다.

이후에 thymeleaf에서 숫자, 날짜 관련 포맷을 자동으로 바꿀 수 있도록, build.gradle에 다음 dependency를 추가한다.

 testImplementation('org.springframework.boot:spring-boot-starter-test') {
    exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
}
compile group: 'org.thymeleaf.extras', name: 'thymeleaf-extras-java8time'

 

또한 디렉토리가 업데이트 됐을 때, class나 resource를 자동으로 update할 수 있도록 run configuration도 설정해준다.

마지막으로 개발 단계에서 캐시에 해당 thymeleaf정보를 저장하지 않도록 application.properties 파일에 다음과 같이 작성해주면 끝이 난다.

 

◎application.properties

server.port = 9999
spring.thymeleaf.cache=false

 

이제 Gradle dependency에서 thymeleaf를 추가하여 프로젝트를 생성하면, resources 폴더 내부에 templates라는 폴더가 생성된다. 

 

해당 폴더가 Controller에서 자동으로 요청 URL 에 매핑해 줄 HTML 파일들이 위치할 경로이다.

 

DB를 따로 사용하지 않을 것이기 때문에, Sample로 사용할 DTO를 하나 만들어 준다.

 

◎SampleDTO.java

package com.example.thymleaf_ex_1.dto;

import lombok.Builder;
import lombok.Data;

import java.time.LocalDateTime;

@Data
@Builder(toBuilder = true)
public class SampleDTO {
    private Long sno;
    private String first;
    private String last;
    private LocalDateTime regTime;

}

 

요청을 처리하기 위한 Controller도 생성해준 뒤, 어노테이션을 사용하여 url을 매핑해준다.

 

◎SampleController.java

package com.example.thymleaf_ex_1.controller;

import com.example.thymleaf_ex_1.dto.SampleDTO;
import lombok.extern.log4j.Log4j2;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.time.LocalDateTime;
import java.util.List;
import java.util.stream.Collectors;
import java.util.stream.IntStream;

@Controller // 해당 클래스를 컨트롤러로 자동 등록
@RequestMapping("/sample") // 요청 URL
@Log4j2 // 컨트롤러 동작 여부 확인
public class SampleController {

    @GetMapping("/ex1") // 세부 요청 URL
    public void ex1() {
        log.info("ex1~~~");
    }

    // 외부로부터 Model 객체를 전달받아 Model 객체에 10개의 DTO 객체를 담아 ex2.html 로 전달
    @GetMapping("/ex2")
    public void exModel(Model model) {
        List<SampleDTO> list = IntStream.rangeClosed(1, 20).asLongStream().mapToObj(i -> {
            SampleDTO dto = SampleDTO.builder()
                    .sno(i)
                    .first("First...." + i)
                    .last("Last..." + 1)
                    .regTime(LocalDateTime.now())
                    .build();
            return dto;
        }).collect(Collectors.toList());

        model.addAttribute("list", list);
    }
}

마지막으로 다음과 같이 Thymeleaf를 사용한 HTML 파일을 생성하면 끝이 난다.

◎ex1.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 th:text="${'hello thymeleaf'}"></h1>
</body>
</html>

◎ex2.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li th:each="dto, state : ${list}">
            [[${state.index]] --- [[${dto}]]
        </li>
        <li></li>
    </ul>
</body>
</html>

 

'[JAVA] > Spring-Boot' 카테고리의 다른 글

[Spring-Boot] Thymeleaf 3: 페이지 삽입  (0) 2021.07.09
[Spring-Boot] Thymeleaf 2: Thymeleaf 문법  (0) 2021.07.08
[Spring-Boot] Spring Data JPA 3: @Query  (0) 2021.07.08
[Spring-Boot] Spring Data JPA 2: 쿼리 메서드  (0) 2021.07.08
[Spring-Boot] Spring Data JPA 1: 시작하기  (0) 2021.07.07
공유하기 링크
Comments
Related Articles more