개요
Spring Boot는 기본적으로 Thymeleaf와 같은 서버 사이드 템플릿 엔진을 지원한다.
여기에서는 Spring Boot로 Web Application을 만들고 View 계층으로 Thymeleaf를 사용하는 방법을 보여준다.
개발환경은 다음과 같다:
● Spring Tool Suite 3 (Version: 3.9.11)
● Spring Boot Version : 2.7.10
● Java : JDK 8
※ 관련글 목록: http://yellow.kr/lifeView.jsp?s=spring
Thymeleaf (타임리프)
Thymeleaf는 웹 애플리케이션의 뷰(화면)를 생성하기 위한 자바 템플릿 엔진이다.
Thymeleaf는 HTML, XML, JavaScript, CSS 등의 마크업 언어를 지원하며, 다른 템플릿 엔진들과 달리 뷰 템플릿 파일 자체도 유효한 마크업 문서이다. 이는 템플릿 파일이 개발자와 디자이너 모두에게 친숙한 문법으로 작성될 수 있도록 하는 장점이 있다. 또한 Thymeleaf는 서버 측에서 렌더링되므로 클라이언트 측에서 추가적인 로딩 없이 바로 렌더링 결과를 확인할 수 있다. 이를 통해 사용자 경험을 향상시키는데 도움이 된다.
Thymeleaf는 Spring Framework와 같은 자바 기반 웹 프레임워크와 함께 많이 사용되며, 다양한 기능을 제공한다. 예를 들어, 반복문, 조건문, 변수, 링크, 이미지 등을 다루는 기능을 지원하며, Thymeleaf Layout과 같은 추가 기능을 통해 레이아웃을 쉽게 관리할 수 있다.
Thymeleaf는 오픈소스 라이선스인 Apache License 2.0으로 배포된다. 따라서 누구나 무료로 사용하고 수정할 수 있다. 또한, 소스코드도 공개되어 있으므로 자유롭게 살펴볼 수 있다.
※ 참조 : Thymeleaf
Spring Boot project 생성
● eclips에서 Spring Boot project를 생성한다.
File > New > Project… > Spring Boot > Spring Starter Project
Name, Group, Package에 적당한 내용을 입력하고 [Next] 클릭
● 필요한 Dependency들을 선택한다.
Spring Web과 Thymeleaf를 선택한다.
[Finish] 클릭
● Project 생성 됨
yellow-thymeleaf 라는 이름으로 Project가 생성되었고, YellowThymeleafApplication.java 가 생성되었다.
package com.yellow.thymeleaf;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class YellowThymeleafApplication {
public static void main(String[] args) {
SpringApplication.run(YellowThymeleafApplication.class, args);
}
}.
Maven Dependencies
pom.xml을 보면 다음과 같은 dependency를 확인할 수 있다.
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
View : Thymeleaf 템플릿
Thymeleaf 는 템플릿 파일이다. 내용은 XML/XHTML/HTML5 형식이다. 아래와 같이 2개의 파일을 만들어 src/main/resources/templates 폴더에 넣는다.
● index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Main Page</title>
</head>
<body>
<h1>Main Page</h1>
<a href="/listBook">List Book</a>
</body>
</html>
● listBook.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Book List</title>
</head>
<body>
<h1>Book List</h1>
<br/>
<div>
<table border="1">
<tr>
<th>ID</th>
<th>제목</th>
<th>저자</th>
</tr>
<tr th:each ="book : ${allBooks}">
<td th:text="${book.bookId}"></td>
<td th:text="${book.title}"></td>
<td th:text="${book.author}"></td>
</tr>
</table>
</div>
<br/><br/>
<a href="/">Main Page</a>
</body>
</html>
html 수정이 빈번한 개발 단계에서 동적 반영을 하려면 application.properties 에 다음과 같이 설정한다. 운영 단계에서는 삭제하거나 기본값인 true 로 한다.
# for thymeleaf
spring.thymeleaf.cache=false
Model, Controller, Service
● Book.java
package com.yellow.thymeleaf;
public class Book {
private String bookId;
private String title;
private String author;
public Book() {}
public Book(String bookId, String title, String author) {
this.setBookId(bookId);
this.setTitle(title);
this.setAuthor(author);
}
public String getBookId() {
return bookId;
}
public void setBookId(String bookId) {
this.bookId = bookId;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
@Override
public String toString() {
return "bookId:" + bookId + ",title:" + title + ",author:" + author;
}
}
● MainController.java
package com.yellow.thymeleaf;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MainController {
private BookService bookService;
public MainController(BookService bookService) {
this.bookService = bookService;
}
@GetMapping("/")
public String index() {
return "index";
}
@GetMapping("/listBook")
public String viewBookList(Model model) {
List<Book> books = bookService.getAllBooks();
model.addAttribute("allBooks", books);
return "listBook";
}
}
● BookService.java
package com.yellow.thymeleaf;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Service;
@Service
public class BookService {
public List<Book> getAllBooks() {
List<Book> books = new ArrayList<Book>();
books.add(new Book("1001", "장기20세기", "조반니 아리기"));
books.add(new Book("1002", "신의 지문", "그레이엄 핸콕"));
books.add(new Book("1003", "신화의 이미지", "조지프 캠벨"));
books.add(new Book("1004", "블랙아테나 1", "마틴 버낼"));
books.add(new Book("1005", "판다의 엄지", "스티븐 제이 굴드"));
books.add(new Book("1006", "이기적 유전자", "리처드 도킨스"));
return books;
}
}
● Project 최종 모습
Application 실행
Project를 선택한 후, Run AS > Spring Boot App 를 하면 내장 Tomcat 서버에 배포된다. 브라우저에서 다음의 URL을 실행한다.
● http://localhost:8080/
● http://localhost:8080/listBook
