[Thymeleaf] SpringBoot에 Thymeleaf 적용하기
기존에 JSP환경에서 뷰를 제작하다가 한계를 느껴 다른 템플릿을 적용해보기로 마음을 먹었다.
스프링이 지원해주는 템플릿 엔진을 알아보던 중
- FreeMarker
- Groovy
- Thymeleaf
- Mustache
이렇게 4개가 있다는 것을 알게되었는데
그 중에 스프링이 지원해준다는 Thymeleaf(타임리프)를 적용해 보기로 하였다.
(사실 처음엔 가장 성능 좋다는 Freemarker를 선택했는데 SpringSecurity프레임 워크를 적용하던 중 막혀서 결국 Thymeleaf를 선택하게 되었다. Freemarker로 SpringSecurity를 적용하려면 JSTL을 별도로 또 사용해야 한다는 의견이 있어서 SpringSecurity까지 사용해야 하는 내 경우에는 타임리프가 낫다는 판단이 들었다.)
1. Build.gradle에 Dependencies 추가
가장 먼저 할 일은 Dependency를 추가해야 한다.
만약 프로젝트를 처음 시작하는 단계라면 아래의 1.1의 주소에서
AddDependencies를 선택해 ThymeLeaf를 검색하면 손쉽게 추가할 수 있고
프로젝트 도중에 추가하기로 마음먹었다면 아래의 1.2를 추가하면 된다.
1.1처음 프로젝트를 만드는 경우
▲Spring Initialzr에서 Thymeleaf를 검색하면 Dependencies에 자동으로 추가할 수 있다.
1.2. 프로젝트 중간에 Dependencies만 추가하는 경우
이 경우에는 아래 코드를 dependencies를 추가해준다.
|
1
2
3
4
5
6
|
dependencies {
//thymeleaf
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
...
}
|
cs |
추가한 후 적어준 Gradle을 임포트 해줘야 하는데
Intelij사용자라면 아래 사진과 같이
Gradle->프로젝트 명 우측클릭->Refresh Gradle Dependencies를 눌러주면 된다.
▲맨 오른쪽의 Gradle->프로젝트명 우클릭->Refresh Gradle Depenedencies를 클릭
2. Thymeleaf사용하기
Thymeleaf는 다른 템플릿 엔진과 달리 독특한 부분은 확장자 명을 html파일 그대로 사용한다는 것이다.
때문에 Thymeleaf파일을 서버가 아닌 html파일 자체를 웹 브라우저로 열어도 동작할 수 있으며
이 때 Thymeleaf로 작성된 태그들은 무시하고 열리므로 주의해야 한다.
(이 부분을 Thymeleaf의 장점이라고 하는데 필자는 아직 많이 활용해보지 못했다ㅠㅠ)
2.1 프로젝트 구조 만들기
기본적으로 Thymeleaf는 별다른 세팅을 하지 않는다면 resources/templates 경로에 html파일을 만들고
그 외에 css,javascript,img등의 리소스들은 static 폴더에서 가져오게 된다.
▲Thymeleaf를 사용한 프로젝트 구조
2.2 Thymeleaf 코드 작성하기
Thymeleaf를 사용하려면 먼저 상단의 html태그에 xmls 코드를 넣어줘야 한다.
상단에 <html xmlns:th="http://www.thymeleaf.org"> 태그를 같이 넣어주면 Thymeleaf를 사용할 준비는 끝난다.
이후 서버에서 보내준 attribute를 읽어오는 용도로 간단하게
<p th:text="${hello}">message</p> 코드를 삽입해 보았다.
(th:text 코드는 서버에서 hello라는 attribute명의 변수를 세팅해주면 해당 명의 값을 읽어와서 message자리를 대체해 준다.)
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:text="${hello}">message</p>
</body>
</html>
|
cs |
3. Controller 세팅하기
이제 서버에서 Controller를 만든 뒤 다음과 같이 코드를 짜서 attribute를 세팅해준다.
|
1
2
3
4
5
|
@RequestMapping(value = "/",method = RequestMethod.GET)
public String hello(Model model){
model.addAttribute("hello","서버에서 보내준 값입니다");
return "/hello";
}
|
cs |
4. 테스트하기
지금까지 짠 코드를 서버에서 실행시켜주면 잘 실행되는 모습을 볼 수 있다.
▲서버에서 실행된 모습