Develop/Spring (실습)

Thymeleaf 문법 사용하기

보보트레인 2023. 6. 16. 10:01

타임리프 로고

Thymeleaf는 자바 웹 어플리케이션을 위한 서버사이드 템플릿 엔진이다. 이 템플릿 엔진은 주로 Spring Framework와 함께 사용되며, 웹 페이지의 소스코드 상에서 정적 HTML과 동적 데이터를 결합하여 작성할 수 있게 해 준다. 이를 통해 웹 애플리케이션 사용자에게 동적으로 생성된 콘텐츠를 제공하는 것이 가능해진다.

타임리프

템플릿 엔진이란?

  • 웹 서비스를 만들 떄에는 서버의 데이터와 정적자원(html, css, image)을 조합해야 한다.
  • 서버에서 데이터를 보내 웹 서비스를 만드는 방법에는 크게 2가지가 있다.SPA(Single Page Application)
  • 최초 한번 전체페이지를 다 불러오고 응답데이터만 페이지 특정부분 렌더링.SSR(Server Side Rendering)
  • 전통적인 웹 애플리케이션 방식. 요청시마다 서버에서 처리한 후 새로고침으로 페이지에 대한 응답.

<요약> 

보통 자바에서 웹 개발시 JSP(Java Server Page)를 이용하여 진행한다.

JSP를 사용하면 <% %>형태의 스크립트릿을 사용하여 개발한다.

그러나 이 방식은 스크립트릿과 HTML이 혼재된 상태가 되고 코드가 복잡해진다.

이러한 상태를 해결할 수 있는 것이 템플릿 엔진이다.

 

구동원리

구동원리

thymeleaf 템플릿 엔진 thymeleaf 공식 사이트: https://www.thymeleaf.org/ 스프링 공식 튜토리얼: https://spring.io/guides/gs/serving-web-content/ 스프링부트 메뉴얼: https://docs.spring.io/spring-boot/docs/2.3.1.RELEASE/reference/ html/spring-boot-features.html#boot-features-spring-mvc-template-engines

 

1. 사용방법

1) 처음 spring 세팅 시 dependency에서 추가하여 다운받기

spring initializr에서 Thymeleaf를 depency에 추가하여 GENERATE 하는 모습

2) gradle 파일에 직접 dependency추가하기

참고이미지

2. 문법 정리

참고 : [Spring Boot] Thymeleaf 란? 타임리프 문법 정리 (tistory.com)

xmlns:th

  • 타임리프의 th속성을 사용하기 위해 선언된 네임스페이스이다.
  • 순수 HTML로만 이루어진 페이지의 경우, 선언하지 않아도 무관하다.

th:text

  • JSP의 EL 표현식인 ${}와 마찬가지로 타임리프도 ${} 표현식을 사용해서 컨트롤러에서 전달받은 데이터에 접근할 수 있다.
  • 해당 속성은 일반적인 텍스트 형식으로 화면에 출력한다.

th:fragment

  • <head>태그에 해당 속성을 사용해서 fragment의 이름을 지정한다.
  • fragment는 다른 HTML에서 include 또는 replace 속성을 사용해서 적용할 수 있다.

th:block

  • layoutL:fragment 속성에 이름을 지정해서 실제 Content 페이지의 내용을 채우는 기능이다.
  • 해당 기능은 동적(Dynamic)인 처리가 필요할 때 사용된다.

th:replace

  • JSP의 <include> 태그와 유사한 속성이다.
  • th:fragment을 통해 설정한 이름을 찾아 해당 코드로 치환한다.

th:href

  • <a> 태그의 href 속성과 동일하다.
  • 웹 애플리케이션을 구분하는 콘텍스트 경로(Context Path)를 포함한다.

xmlns:layout, xmlnslayout:decorator

  • xmlns:layout은 타임리프의 레이아웃 기능을 사용하기 위한 선언이다.
  • xmlnslayout:decorator 레이아웃으로 basic.html을 사용하겠다는 의미이다.

th:block layout:fragment

  • layout:fragment 속성에 이름을 지정해서 실제 Content 페이지의 내용을 채우게 된다.
  • 에를 들어 글쓰기 페이지는 "write page"로, 게시글 리스트 페이지는 "list page" 이런식 이다.
  • 즉, 페이지마다 타이틀을 다르게 처리하고 싶을 때 해당 속성을 이용해서 타이틀을 동적(Dynamic)으로 처리할 수 있다.

th:action

  • <form>태그 사용시 해당 경로로 요청을 보낼때 사용한다.

th:object

  • <form>태그에서 submit을 할 때, 데이터가 th:object에 설정해둔 객체로 받아진다.
  • 즉, 컨트롤러와 뷰(화면) 사이의 DTO클래스의 객체이다.

th:block layout:fragment

  • layout:fragment 속성에 이름을 지정해서 실제 Content 페이지의 내용을 채우게 된다.
  • 에를 들어 글쓰기 페이지는 "write page"로, 게시글 리스트 페이지는 "list page" 이런식 이다.
  • 즉, 페이지마다 타이틀을 다르게 처리하고 싶을 때 해당 속성을 이용해서 타이틀을 동적(Dynamic)으로 처리할 수 있다.

th:action

  • <form>태그 사용시 해당 경로로 요청을 보낼때 사용한다.

th:object

  • <form>태그에서 submit을 할 때, 데이터가 th:object에 설정해둔 객체로 받아진다.
  • 즉, 컨트롤러와 뷰(화면) 사이의 DTO클래스의 객체이다.

th:checked

  • 체크박스의 경우, th:checked 속성을 이용해서 조건이 "true"에 해당하면, checked 속성을 적용한다.

th:inline="javascript"

  • <script> 태그에 th:inline 속성을 javascript로 지정해야 자바스크립트를 사용할 수 있다.

th:if, th:unless

  • th:if는 if 문과 동일하고, th:unless는 else 문과 같다고 볼 수 있다.
  • th:unless는 일반적인 언어의 else 문과는 달리 th:if에 들어가는 조건과 동일한 조건을 지정해야 한다.

th:each

  • th:each는 JSTL의 <c:foreach>, 자바의 forEach와 유사한 기능이다.

 

3. 실습 in SpringFramework ( 예제 코드 만들어 보기 )

Welcome Page 만들기

<!DOCTYPE HTML>
<html>
<head>
 <title>Hello</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
Hello
<a href="/hello">hello</a>
</body>
</html>

@Controller
public class HelloController {

	 @GetMapping("hello")
	 public String hello(Model model) {
	 model.addAttribute("data", "hello!!");
	 return "hello";

 }
}

 

💡 resources/templates/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>

실행!

 

 

 

반응형