티스토리 뷰
springboot 로 기존의 app을 converting 하며 가장 충격?적이었던 말은 'JSP는 더이상 권고하지 않는다. Thymeleaf나 Freemaker, Jade4j 와 같은 template engine 사용을 권고한다.' 라는 것이었다. PHP를 사용하다가 대세가 JSP로 바뀐 이후로 줄곧 써왔었고 JAVA가 견고하다면 앞으로도 쭉 같이 사용할줄로만 알았던 JSP를 사용하지 말라니.. IT업계는 참 끊임없이 공부를 하게 만들어준다. 자세한건 여기에서 확인하고 일단 Thymeleaf (타임리프라고 읽는다. 초능력같은 느낌이다.) 를 써보기 위해 프로젝트를 하나 만들어 보도록 하자.
thymeleaf 샘플 프로젝트 생성하기 (Eclipse)
프로젝트 생성 > New Spring Starter Project 에서 project Name을 입력하고 Next 클릭.
Next를 누르면 Dependencies 를 추가할 수 있는 화면이 나오는데 여기에서 web 이라고 검색하고 Thymeleaf 와 Spring Web 을 체크해준다. springboot의 버전은 현재 2.3.3 이다. 그리고 Finish 클릭! 프로젝트가 생성이 되었다면 Maven Update도 한번 해준다.
프로젝트가 생성이 되면 기본적으로 resources 하위에 static 폴더와 template 폴더가 생성이 된다. static 폴더는 정적 자원(js, css, image) 등을 보관하는 곳이고 templates 폴더는 spring 진영에서 권고하는 template engine을 넣고 사용을 한다. 즉 thymeleaf 관련된 html 은 다 이곳에 넣고 사용을 하면 된다.
이 프로젝트가 가지고 있는 dependency 목록은 위와 같다. 프로젝트 생성할때 선택했던 spring-boot-starter-web, spring-boot-starter-thymeleaf 를 기본적으로 가지고 있다.
thymeleaf 샘플 만들어 보기
application.properties 파일을 전혀 손대지 않고 Controller와 html 파일만 작성을 해서 샘플을 만들어 보자.
파일들은 위와 같은 곳에 위치시켰다.
Controller
@Controller
public class FruitController {
@GetMapping("/fruit")
public String getFruit(Model model) {
Map<String, String> fruitmap = new HashMap<String, String>();
fruitmap.put("fruit1", "apple");
fruitmap.put("fruit2", "banana");
fruitmap.put("fruit3", "orange");
model.addAttribute("fruit", fruitmap);
return "fruit/fruit.html";
}
}
/fruit 이라는 요청을 받으면 과일들의 목록 map으로 담아 return 해주는 초심플 Controller 이다. return을 해줄때 fruit/fruit.html 이라고 명시를 했는데 springboot에서 templates 폴더를 thymeleaf 의 root 폴더로 인식을 하기 때문이다.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>thymeleaf sample</title>
</head>
<body>
<span th:text="${fruit.fruit1}"></span><br/>
<span th:text="${fruit.fruit2}"></span><br/>
<span th:text="${fruit.fruit3}"></span><br/>
</body>
</html>
마찬가지로 하는일이 Controller로부터 넘어온 fruit 이라는 값에 담긴 내용을 찍어주는 HTML 파일이다. th:text 이 부분이 thymeleaf 를 사용한 부분이다. thymeleaf의 특징은 이것을 쓰는 곳에서는 <span th:text="${fruit.fruit1}"></span> 이것처럼 tag 사이에 값이 들어가지 않는다. 꼭 tag 안에서 모든 작업이 다 이루어져야한다. 이렇게 함으로써 WAS에 어플리케이션을 올리지 않고 바로 HTML을 브라우저로 열어서 확인이 가능하지만 활용성이 높지는 않을것 같다. 모든 thymeleaf 관련 작업이 tag 안에서 이루어지는만큼 문법에 신중을 기해야한다. tag를 닫지 않는다거나 하면 오류가 난다.
이렇게 하고나서 브라우저에서 localhost:8080/fruit 을 쳐보면
이런 결과를 얻을 수 있다. 이 상태에서 <span th:text="${fruit.fruit1}"></span> 이 부분을 <span th:text="${fruit.fruit2}"></span>이렇게 바꿔서 banana 가 두개 나오게 변경을 하고 브라우저에서 확인을 해보면 반영이 되지 않고 apple이 그대로 나온다. thymeleaf 에서 바꾼 html 소스에 대해 실시간 반영을 하려면 다음과 같은 설정이 필요하다.
application.properties
spring.thymeleaf.cache=false
이와 같이 설정을 하고 재기동을 한번 하면 그다음부터는 내가 바꾼 값에 따라 바로바로 반영이 잘 되는걸 확인할 수 있다. 또한 Controller 에서 return 부분에 templates 폴더를 root로 인식한다고 했는데 이는 다음과 같은 설정으로 바꿀 수 있다.
application.properties
spring.thymeleaf.prefix=classpath:templates/
spring.thymeleaf.suffix=.html
이렇게 설정을 하면 return 할때 뒤에 붙인 .html 도 생략을 할 수 있다.
간단하게 thymeleaf 테스트를 해볼수 있는 환경을 구성해봤다. 이제 본격적으로 기능에 대해서 알아보자!
끝!
'Lang > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf 시작 #4] Thymeleaf Layout 적용하기 (0) | 2020.08.21 |
|---|---|
| [Thymeleaf 시작 #3] Thymeleaf 에서 지원하는 API (Base objects 및 Utility Objects) (0) | 2020.08.19 |
| [Thymeleaf 시작 #2] Thymeleaf 기본 사용법, 문법 예제 (0) | 2020.08.19 |