[환경세팅] ② View Template Engine(Thymeleaf) 환경세팅

Spring/Spring Boot

[환경세팅] ② View Template Engine(Thymeleaf) 환경세팅

YellowCow 2022. 8. 9. 23:26

기존 Spring MVC 기반 프로젝트에서는 JSP 템플릿 엔진을 사용했었다

Spring Boot에서는 Thymeleaf를 공식적으로 지원하고 있으므로

이번 글에서는 Thymeleaf를 사용하도록 하겠다

아래 사진은 build.gradle 파일의 일부이다

아래와 같이 Thymeleaf관련 환경세팅은 설정 한 줄이면 충분하다

만약, Spring Initializr 페이지에서 Dependency를 추가했다면 넘어가도 무방하다

위와 같이 환경세팅이 완료되었다면

컨트롤러를 만들어서 Thymeleaf가 제대로 동작하는지 테스트 해보겠다

일단, 아래와 같이 HelloContoller라는 클래스를 만들자

HelloContoller에 아래와 같이 코드를 작성한다

package jpabook.jpashop;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Controller
public class HelloController {
    @GetMapping("hello") // hello라는 URL로 들어온 요청을 Get Method로 받음 
    public String hello(Model model){
        model.addAttribute("data", "hello");
        // key와 value로 값을 view로 전달
        
        return "hello";
        // hello.html을 보여준다
        // Thymeleaf 뷰 name은 "resources:templates/ +{ViewName}+ .html"으로 매핑된다


    }
}

아래와 같이 hello.html 파일을 생성한다

*참고: Thymeleaf 뷰 name은 "resources:templates/ +{ViewName}+ .html"으로 매핑된다

hello.html 파일에 아래와 같이 코드를 작성한다

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Hello</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>
    </body>
</html>

Contoller로부터 값을 전달 받으면

아래와 같이 p태그의 내용이 대치된다

단, Contoller로부터 값을 전달 받지 못하면

아래 표시된 내용이 화면에 출력된다

위 내용을 테스트해보기 위해 컨트롤러를 거치지 않고 html파일을 그대로 열어보겠다

컨트롤러로부터 data값을 전달받지 못했으므로

"안녕하세요. 손님"이라는 문자열이 출력된다

컨트롤러를 거처 테스트 해보기 위해

아래 사진과 같이 프로젝트를 실행한다

(JpashopApplication 클래스를 열고 실행할 것)

아래 주소로 접속한다

http://localhost:8080/hello

접속하면

컨트롤러에서 받은 데이터가 적용된 것을 알 수 있다.

"안녕하세요. 손님" -> "안녕하세요. hello"로 문자열이 변경된 것을 볼 수 있다.

만약, 위와 같은 동적 페이지 말고

정적 페이지를 만들고 싶다면 방법은 아래와 같다

먼저, 아래와 같이 index.html 파일을 생성한다

아래와 같이 index.html 파일을 작성한다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>정적 페이지 테스트</p>
</body>
</html>

아래의 주소로 접속한다

http://localhost:8080/index.html

접속하면 아래와 같은 문자열이 출력된다

Thymeleaf 관련 팁

스프링 부트에서 정적 페이지 또는 동적 페이지에 변경이 발생했을 때

파일 저장을 하거나, 변경이 발생한 파일에 대해 Recompile을 해도

변경사항이 즉시 반영이 되지 않고 서버를 끄고 다시 실행해야 하는 불편함이 있다

이를 위해 Spring Boot Devtools 라는 툴을 사용한다.

Spring Boot Devtools에서 주로 쓰이는 기능 3가지를 소개한다

Property Defaults
- 템플릿 엔진의 캐싱 기능을 개발 단계에서 자동으로 꺼주는 기능 제공
Automatic Restart
- 파일 수정 후 저장을 하면, Classpath에 존재하는 파일의 변경을 감지하고, 자동으로 서버를 restart
Live Reload
- 정적 컨텐츠(HTML, CSS, JavaScript 등) 변경 발생 시 즉시 적용

위 기능들로 앞에서 언급한 불편함을 해소시킬 수 있다

적용방법은 아래와 같다

bulid.gradle을 열고

아래와 같이 dependency를 추가한다