지난 시간에는 스프링부트에서 jsp를 구동시키는 내용에 대해 알아보았습니다.
하지만 스프링부트에서 권장하는 view가 아니기 때문에 이번 시간에는 Thymeleaf에 대해 알아보도록 하겠습니다.
먼저 jsp와 Thymeleaf가 어떤 차이가 있는지 간단히 살펴 보고 갈까요?
| jsp | - 서블릿이라는 형태로 변환되어 동작하며 서블릿은 java소스라 jsp에서도 java 코드 사용이 가능해 집니다. 다만, 이때문에 view에 비지니스 로직이 포함되어 복잡해지고 무거워지는 단점이 발생합니다. (요즘은 jsp 내부에 비지니스 로직이 포함된 java 코드 삽입을 지양합니다.) - jar 패키징이 불가하며, war 패키징만 가능하고, jar와 달리 was가 필요합니다. |
| Thymeleaf | - View Template 엔진으로, 서버상에서 동작하지 않아도 되며, 순수한 html 구조를 유지합니다. (퍼블리셔와의 협업이 용이함 : 오직 마크업 언어만 존재하기 때문에 시각적으로 편함) - 타임리프의 목적은 세련되고 잘 다듬어진 템플릿을 제공하는데 있습니다. - 서블릿 코드로 변환되지 않으며, 비지니스 로직과 분리되어 view에 집중할 수 있습니다. |
자, 이제 그럼 실습을 통해 진행해 보도록 하겠습니다.
pom.xml 파일을 열어, maven 의존성을 추가해 봅시다.
(의존성 추가 후에는 maven reload 수행해 주시기 바랍니다.)
|
1
2
3
4
5
|
<!-- 타임리프 의존성 추가-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
|
cs |
타임리프는 스프링부트의 기본 구조에서 /resources/templates 에서 동작하기 때문에,
아래와 같이 폴더를 생성하여 샘플 파일까지 생성해 보도록 하겠습니다.
위와 같은 단계로 진행을 한 후, sampleThymeleaf.html 파일의 내용을 아래와 같이 작성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>타임리프 테스트</title>
</head>
<body>
<h1>thymeleaf sample</h1>
<h2>값 호출 = <span th:text="${text}"></span></h2>
</body>
</html>
|
cs |
다음은 컨트롤러에서 호출하기 위해 SampleController.java를 열어, 아래와 같이 코드를 추가해 봅시다.
|
1
2
3
4
5
6
7
8
9
|
/*
* thymeleaf(타임리프) 일반 호출 예제
*/
@RequestMapping("/Samplethymeleaf")
public String sampleThymeleaf(Model model) {
String text = "타임리프에 전달되는 데이터 입니다." ;
model.addAttribute("text", text);
return "thymeleaf/Samplethymeleaf";
}
|
cs |
아래와 같이 컨트롤러를 간단히 작성 되겠죠?
이제, 호출을 하면 페이지가 나타날 것 같지만 한 가지 작업이 더 남아 있습니다.
이전 포스팅에서 jsp와 관련된 prefix, sufix 설정을 했기 때문에 컨트롤러가 뷰의 이름을 반환할 때 구분할 수 있도록 설정해 주어야 합니다.
application.properties를 열어 thymeleaf/ 로 호출되면 타임리프가 처리하도록 뷰네임을 지정하는 작업이 필요합니다.
또한 타임리프를 사용하다가 수정사항이 생기면 서버 재시작 없이 바로 반영되도록 캐쉬를 꺼주도록 하겠습니다.
|
1
2
3
4
5
6
7
|
#jsp의 설정이 기존에 있기 때문에 thymeleaf/ 로 호출되면 타임리프가 처리되도록 반영하기 위한 코드
spring.thymeleaf.view-names=thymeleaf/*
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
#thymeleaf 수정 사항 발생 시, 서버 재기동 없이 캐시를 무시하기 위한 코드
spring.thymeleaf.cache=false
spring.thymeleaf.check-template-location=true
|
cs |
위의 주석을 참고하여 application.properties 를 작성하면 아래와 같이 작성되겠습니다.
이제 모든 작업이 완료되었습니다. 서버를 재기동하여 브라우저에 http://localhost:8080/Samplethymeleaf 를 호출하면 아래와 같이 타임리프 페이지가 호출될 것 입니다.
타임리프 호출과 관련된 부분만 간다하게 다뤄봤지만 사실 thymeleaf의 기본문법과 사용법에 대해서는 더 많이 배워봐야 할 것 입니다. (타임리프 도큐먼트 : https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax)
표현식 중 자주 사용하게 되는 문법 하나만 살펴 볼까요?
| 표현식 = th:[속성] = "컨트롤러에서 전달 받은 값 또는 조건식" 예를 들어, th:text (텍스트)를 살펴 보면, <span th:text="${user.name}"></span> 와 같이 사용될 수 있습니다. th:utext (html)의 경우에는 <div th:utext="${content}"></div> 처럼 사용이 됩니다. |
일단 이번 포스팅에서는 타임리프를 호출하는 방법에 대해서만 다루고 있으며,
앞으로 포스팅을 통해 타임리프로 간단한 어플리케이션을 작성하려 하니, 자세한 사용법 등은 계속되는 실습을 통해 알아보도록 합시다.
다음 포스팅에서는 DB연결을 위해, 잠시 쉬어가는 시간으로 SQL 서버를 설치하여 DATABASE를 구축하는 것에 대해 알아보고, 이를 지금 실습하는 스프링부트와 연계하는 내용까지 진행해 보도록 하겠습니다.
다음 포스팅을 위해 우리는 SQL 서버를 구축해야 하는데요,
데이터베이스가 혹시 준비되지 않은 분들이 계시다면 아래의 링크를 통해 Azure 클라우드를 통해 데이터베이스를 생성하고 진행하시면 되겠습니다. (물론, 개인적으로 사용할 DATABASE가 있으면 생략가능)
사전에 "AZURE 무료 데이터베이스 만들기" 를 통해 계정을 생성하고 진행하시면 되겠습니다.
'SPRING BOOT' 카테고리의 다른 글
| [스프링부트 9] Spring Boot 데이터베이스(MSSQL) 연결 2 (2) | 2021.11.22 |
|---|---|
| [스프링부트 8] Spring Boot 데이터베이스(MSSQL) 연결 1 (2) | 2021.11.17 |
| [스프링부트 6] Spring MVC View 만들기 (JSP) (7) | 2021.11.10 |
| [스프링부트 5] Spring MVC Controller 만들기 2탄 (0) | 2021.11.10 |
| [스프링부트 4] Spring MVC Controller 만들기 1탄 (0) | 2021.11.09 |