thymeleaf alert 예제

25 Sep 2023

java

Thymeleaf는 서버 사이드 템플릿 엔진으로써 Java 기반 웹 어플리케이션 개발을 위해 널리 사용됩니다. 이번 포스트에서는 Thymeleaf를 이용하여 알림(Alert) 메시지를 표시하는 예제를 다루어보겠습니다.

1. 의존성 추가

Thymeleaf를 사용하기 위해서는 먼저 프로젝트의 의존성에 Thymeleaf를 추가해야 합니다. 이를 위해 Maven의 경우 pom.xml 파일에 다음 의존성을 추가합니다.

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

Gradle의 경우 build.gradle 파일에 다음 의존성을 추가합니다.

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

의존성 추가 후, 프로젝트를 다시 빌드해주세요.

2. Alert 메시지 표시하기

Thymeleaf를 사용하여 Alert 메시지를 표시하기 위해서는 다음과 같은 단계를 따릅니다.

2.1. Controller 작성

@Controller
public class AlertController {

    @GetMapping("/alert")
    public String showAlert(Model model) {
        model.addAttribute("alertMessage", "This is an alert message.");
        return "alert";
    }

}

위의 예제 코드에서는 /alert 경로로 GET 요청이 오면 showAlert 메소드가 호출되어 alert라는 템플릿 파일을 반환합니다. alertMessage라는 변수에 “This is an alert message.”라는 문자열을 담아 모델에 추가합니다.

2.2. Thymeleaf 템플릿 작성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Alert Example</title>
</head>
<body>
    <div th:if="${alertMessage}" class="alert">
        <span th:text="${alertMessage}"></span>
    </div>
</body>
</html>

위의 예제 코드에서는 th:if 속성을 사용하여 alertMessage 변수가 존재할 경우에만 div 요소를 표시합니다. 해당 div 요소 내부에는 th:text 속성을 사용하여 alertMessage 변수의 값을 출력합니다.

2.3. 화면 표시

Alert 메시지를 표시하기 위해 /alert 경로에 접속하면, showAlert 메소드에서 반환한 alert 템플릿 파일이 렌더링되어 화면에 Alert 메시지가 표시됩니다.

위의 예제 코드를 참고하여 프로젝트에 Alert 메시지를 표시하는 기능을 구현해보세요.

Summary

이번 포스트에서는 Thymeleaf를 사용하여 Alert 메시지를 표시하는 예제를 살펴보았습니다. Thymeleaf를 사용하면 간편하게 서버 사이드 템플릿을 구현할 수 있으며, 유연한 화면 표시 기능을 제공합니다.

#Thymeleaf #Alert #Java #서버사이드템플릿