Spring Boot와 Thymeleaf로 동적 웹 페이지 만들기
Overview
Spring Boot와 Thymeleaf를 함께 사용하면 Spring 프레임워크와 원활하게 통합되는 템플릿 엔진을 이용하여 동적인 웹 페이지를 만들 수 있습니다. 이 두 기술의 결합은 Java 기반의 웹 애플리케이션 개발에 있어 생산성과 효율성을 크게 향상시킵니다. 이 글에서는 Spring Boot와 Thymeleaf의 기본 개념, 설정 방법, 그리고 간단한 예제를 통해 이 두 기술을 활용한 웹 애플리케이션 구축 과정을 상세히 설명하겠습니다.
1. Spring Boot 개요
Spring Boot는 Spring 프레임워크를 기반으로 한 프로젝트로, 개발자가 쉽게 Spring 애플리케이션을 설정하고 배포할 수 있도록 돕습니다. 기존 Spring 설정의 복잡성을 줄이고, 기본적으로 제공되는 설정을 사용하여 빠르게 애플리케이션을 시작할 수 있게 해줍니다.
주요 특징
- 자동 설정: Spring Boot는 개발자가 지정한 의존성에 따라 애플리케이션의 설정을 자동으로 구성합니다.
- 내장 서버: Tomcat, Jetty 등의 웹 서버를 내장하여 별도의 서버 설치 없이도 애플리케이션을 실행할 수 있습니다.
- 스타터 패키지: 특정 기능을 쉽게 추가할 수 있도록 관련 라이브러리를 묶은 스타터 패키지를 제공합니다.
2. Thymeleaf 개요
Thymeleaf는 서버 사이드 자바 템플릿 엔진으로, HTML을 직접 템플릿으로 사용할 수 있도록 설계되었습니다. 일반 HTML 파일과 유사한 형태로 코드를 작성할 수 있어 웹 개발자에게 친숙한 환경을 제공합니다.
주요 특징
- 자연 템플릿: Thymeleaf 템플릿은 브라우저에서 직접 열 수 있어 HTML과 디자인을 쉽게 조작할 수 있습니다.
- 표현식 언어: OGNL(Object-Graph Navigation Language) 기반의 표현식을 사용하여 객체의 속성에 쉽게 접근할 수 있습니다.
- 조건부 및 반복 처리:
th:if,th:each등의 속성을 사용하여 동적인 콘텐츠를 쉽게 생성할 수 있습니다.
3. Spring Boot와 Thymeleaf 설정하기
이제 Spring Boot와 Thymeleaf를 설정하여 간단한 웹 애플리케이션을 만들어보겠습니다. 아래 단계를 따라 해보세요.
3.1. 프로젝트 생성
Spring Initializr를 사용하여 새 Spring Boot 프로젝트를 생성합니다. 다음 의존성을 선택하세요:
- Spring Web
- Thymeleaf
3.2. Maven 의존성 추가
pom.xml 파일에 Thymeleaf 의존성을 추가합니다. (Spring Initializr에서 이미 추가된 경우 생략 가능)
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>3.3. 기본 애플리케이션 설정
src/main/resources/application.properties 파일에 기본 설정을 추가합니다. 예를 들어, 포트를 변경하거나 애플리케이션 이름을 설정할 수 있습니다.
server.port=8081
spring.application.name=ThymeleafExample4. 컨트롤러 생성
Spring Boot 애플리케이션의 핵심은 컨트롤러입니다. 컨트롤러는 클라이언트의 요청을 처리하고 응답을 반환하는 역할을 합니다.
package com.example.thymeleaf;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String home(Model model) {
model.addAttribute("message", "안녕하세요, Thymeleaf와 Spring Boot!");
return "home"; // home.html을 반환
}
}5. Thymeleaf 템플릿 작성
이제 src/main/resources/templates 폴더에 home.html 파일을 생성하고 아래와 같이 작성합니다.
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<title>Thymeleaf 예제</title>
</head>
<body>
<h1 th:text="${message}">기본 메시지</h1>
</body>
</html>6. 애플리케이션 실행
이제 모든 설정이 완료되었습니다. 애플리케이션을 실행하기 위해 ThymeleafExampleApplication 클래스를 다음과 같이 작성합니다.
package com.example.thymeleaf;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class ThymeleafExampleApplication {
public static void main(String[] args) {
SpringApplication.run(ThymeleafExampleApplication.class, args);
}
}7. 에러 처리 및 해결
애플리케이션을 실행할 때, 다음과 같은 에러가 발생할 수 있습니다.
예시 에러: Whitelabel Error Page
이 에러는 Spring Boot가 기본적으로 제공하는 빈 페이지입니다. 이는 요청된 URL에 대한 매핑이 없거나, 리소스를 찾을 수 없을 때 발생합니다.
해결 방법:
- URL이 올바른지 확인합니다.
- 컨트롤러 메서드의 매핑이 제대로 설정되어 있는지 확인합니다.
8. 동적 콘텐츠 생성
Thymeleaf의 강력한 기능 중 하나는 동적으로 콘텐츠를 생성할 수 있다는 점입니다. 예를 들어, 리스트를 표시하고 싶다면 다음과 같이 작성할 수 있습니다.
@GetMapping("/items")
public String items(Model model) {
List<String> itemList = Arrays.asList("사과", "바나나", "체리");
model.addAttribute("items", itemList);
return "items"; // items.html을 반환
}items.html 템플릿:
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<title>아이템 목록</title>
</head>
<body>
<h1>아이템 목록</h1>
<ul>
<li th:each="item : ${items}" th:text="${item}"></li>
</ul>
</body>
</html>9. 마무리
이와 같이 Spring Boot와 Thymeleaf를 활용하여 간단한 웹 애플리케이션을 만들 수 있습니다. 이 조합은 특히 Java 개발자에게 친숙하며, 동적 웹 페이지를 쉽게 구현할 수 있는 강력한 도구입니다. 다양한 데이터와 UI 요소를 결합하여 유연한 웹 애플리케이션을 구축해보세요.
참고문서
이 링크들을 통해 더 깊이 있는 자료를 찾아볼 수 있습니다.
'Study Information Technology' 카테고리의 다른 글
| NVMe SSD 차세대 저장 장치의 혁신 (0) | 2024.10.14 |
|---|---|
| 마이크로서비스 아키텍처 개발 Spring Cloud Gateway를 통한 라우팅 및 로드 밸런싱 (0) | 2024.10.14 |
| Spring Boot를 이용한 WebSocket 지원 실시간 통신 기능 구현하기 (0) | 2024.10.13 |
| Spring Boot와 마이크로서비스 아키텍처 통합의 이해 (0) | 2024.10.13 |
| Spring Boot 테스트 기능 단위 테스트와 통합 테스트 (0) | 2024.10.13 |