반응형

Thyemleaf 소개

※ 공식 사이트: https://www.thymeleaf.org/

※ 공식 메뉴얼 - 기본 기능: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

※ 공식 메뉴얼 - 스프링 통합: https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html

 

1. 타임리프 특징

1.1 서버 사이드 HTML 렌더링 (SSR)

• 타임리프는 백엔드 서버에서 반환된 model을 가지고 HTML을 동적으로 렌더링 하는 용도로 사용

• 사용법은 SSR이 다 비슷하기에 학습하기에도 어렵지 않고, 페이지가 어느정도 정적이고 빠른 생산성이 필요한 경우 백엔드 개발자가 개발해야하는 일이 생기는데 이 경우 타임리프는 좋은 선택지임.

 

1.2 네츄럴 템플릿

• 타임리프는 순수 HTML을 최대한 유지하는 특징이 있음.
• 타임리프로 작성된 파일은 해당 파일을 그대로 웹 브라우저에서 열어도 정상적인 HTML 결과를 확인할 수 있음.

(이 경우 동적으로 결과가 렌더링 되지는 않음)

• 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있음.
• JSP를 포함한 다른 뷰 템플릿들은 소스코드와 HTML이 섞여서 웹 브라우저에서 정상적인 HTML 결과를 확인할 수 없음. 

(무조건 서버를 통해서 JSP가 렌더링 되고 HTML 응답 결과를 받아야 화면을 확인 가능.)

• 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿 (natural templates)이라 함.

 

1.3 스프링 통합 지원

• 타임리프는 스프링과 자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원함.

 

2. 타임리프의 기본 기능

2.1 타임리프 사용 선언
• <html xmlns:th="http://www.thymeleaf.org">


2.2 타임리프의 기본 표현식

• 간단한 표현:
     ◦ 변수 표현식: ${...}
     ◦ 선택 변수 표현식: *{...}
     ◦ 메시지 표현식: #{...}
     ◦ 링크 URL 표현식: @{...}
     ◦ 조각 표현식: ~{...}

• 리터럴
     ◦ 텍스트: 'one text', 'Another one!',…
     ◦ 숫자: 0, 34, 3.0, 12.3,…
     ◦ 불린: true, false
     ◦ 널: null
     ◦  리터럴 토큰: one, sometext, main,…

• 문자 연산:
     ◦ 문자 합치기: +
     ◦ 리터럴 대체: |The name is ${name}|
• 산술 연산:
     ◦ Binary operators: +, -, *, /, %
     ◦  Minus sign (unary operator): -

• 불린 연산:
     ◦ Binary operators: and, or
     ◦ Boolean negation (unary operator): !, not

• 비교와 동등:
     ◦ 비교: >, <, >=, <= (gt, lt, ge, le)
     ◦ 동등 연산: ==, != (eq, ne)

• 조건 연산:
     ◦ If-then: (if) ? (then)
     ◦ If-then-else: (if) ? (then) : (else)
     ◦ Default: (value) ?: (defaultvalue)

• 특별한 토큰:
     ◦ No-Operation: _

※ 참고 사이트: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standardexpression-syntax

 

 

텍스트 - text, utext

※ 타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의해서 동작함

1. th:text, [[...]] 예제 코드

1.1 controller 소스

@GetMapping("text-basic")
public String textBasic(Model model) {
	model.addAttribute("data","Hello Spring");
	return "basic/text-basic";
}

 

1.2 thyemleaf 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<h1>컨텐츠에 데이터 출력하기</h1>
	<ul>
		<li>th:text 사용 <span th:text="${data}"></span></li>
		<li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
	</ul>	
</body>
</html>

• HTML의 콘텐츠(content)에 데이터를 출력할 때는 th:text를 사용하면 됨

• HTML 태그의 속성이 아니라 HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶으면 [[...]] 를 사용하면 됨

 

 

2. Escape와 Unescape 예제

2.1 controller 소스

@GetMapping("text-unescaped")
public String textUnescaped(Model model) {
	model.addAttribute("data","Hello <b>Spring</b>");
	return "basic/text-unescaped";
}

• model에 <b>태그를 담아 Spring!이라는 단어가 진하게 나오도록 구현

 

2.2 thyemleaf 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<h1>text vs utext</h1>
	<ul>
		<li>th:text 사용 <span th:text="${data}"></span></li>
		<li>th:utext 사용 <span th:utext="${data}"></span></li>
	</ul>
	
	<h1><span th:inline="none">[[...]] vs [(...)]</span></h1>
	<ul>
		<li><span th:inline="none">[[...]] = </span>[[${data}]]</li>
		<li><span th:inline="none">{(...)] = </span>[(${data})]</li>
	</ul>
</body>
</html>

• 기존의 th:text 방식과 [[...]] 방식의 출력결과

 - Hello &lt;b&gt;Spring!&lt;/b&gt;

• HTML 엔티티

 - 웹 브라우저는 <를 HTML 태그의 시작으로 인식함.

 - <를 태그의 시작이 아니라 <라는 문자로 표현할 수 있는 방법이 필요한데, 특정 HTML관련 문자가 들어오면 escape하여 HTML 엔티티라는 것으로 치환해서 브라우저에서 HTML 마크업으로 표현하는 것이아닌 문자로 표현함

 - HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라 함

 - 타임리프가 제공하는 th:text , [[...]] 는 기본적으로 이스케이스(escape)를 제공함.

• 타임리프에서 escape를 하지 않는 방법(Unescape)

 - th:text → th:utext

 - [[...]] → [(...)]

• th:utext 방식과 [(...)] 방식의 출력결과

 - Hello Spring!

※ 주의!

 - 실제 서비스를 개발하다 보면 escape를 사용하지 않아서 HTML이 정상 렌더링 되지 않는 수 많은 문제가 발생함

 - escape를 기본으로 하고, 꼭 필요한 때만 unescape를 사용해야함.

 

 

변수 - SpringEL

1. 예제 

1.1 controller 소스

@GetMapping("variable")
public String variable(Model model) {
	User userA = new User("userA", 10);
	User userB = new User("userB", 20);
	
	List<User> list = new ArrayList<>();
	list.add(userA);
	list.add(userB);
	
	Map<String, User> map = new HashMap<>();
	map.put("userA", userA);
	map.put("userB", userB);
	
	model.addAttribute("user", userA);
	model.addAttribute("users", list);
	model.addAttribute("userMap", map);
	
	return "basic/variable";
}


@Data
static class User{
	private String username;
	private int age;
	
	public User(String username, int age) {
		this.username = username;
		this.age = age;
	}	
}

• model에 여러 데이터를 담아 view 호출

 

1.2 thyemleaf 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<h1>SpringEL 표현식</h1>
	<ul>Object
		<li>${user.username} = <span th:text="${user.username}"></span></li>
		<li>${user['username']} = <span th:text="${user['username']}"></span></li>
		<li>${user.getUsername()} = <span th:text="${user.getUsername()}"></span></li>
	</ul>
	<ul>List
		<li>${users[0].username} = <span th:text="${users[0].username}"></span></li>
		<li>${users[0]['username']} = <span th:text="${users[0]['username']}"></span></li>
		<li>${users[0].getUsername()} = <span th:text="${users[0].getUsername()}"></span></li>
	</ul>
	<ul>Map
		<li>${userMap['userA'].username} = <span th:text="${userMap['userA'].username}"></span></li>
		<li>${userMap['userA']['username']} = <span th:text="${userMap['userA']['username']}"></span></li>
		<li>${userMap['userA'].getUsername()} = <span th:text="${userMap['userA'].getUsername()}"></span></li>
	</ul>	
	
	<h1>지역 변수 - (th:with)</h1>
	<div th:with="first=${users[0]}">
		<p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
	</div>
</body>
</html>

• 변수 표현식 : ${...}

 

• Object 표현
 - ${user.username} : user의 username을 프로퍼티로 접근 → user.getUsername()
 - ${user['username']} : 위와 같음 → user.getUsername()
 - ${user.getUsername()} : user의 getUsername() 을 직접 호출

 

• List 표현

 - ${users[0].username} : List에서 첫 번째 회원을 찾고 username 프로퍼티 접근 → ${list.get(0).getUsername()}
 - ${users[0]['username']} : 위와 같음
 - ${users[0].getUsername()} : List에서 첫 번째 회원을 찾고 메서드 직접 호출

 

• Map 표현

 - ${userMap['userA'].username : Map에서 userA를 찾고, username 프로퍼티 접근 → map.get("userA").getUsername()
 - ${userMap['userA']['username'] : 위와 같음
 - ${userMap['userA'].getUsername() : Map에서 userA를 찾고 메서드 직접 호출

 

• 지역변수 선언

<div th:with="first=${users[0]}">
	<p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>

 - th:with를 선언하여 지역변수 생성, 지역변수는 선언한 태그안에서만 사용가능

 

 

기본 객체들

1. 타임리프가 제공하는 기본 객체들

• ${#request} - 스프링 부트 3.0부터 제공하지 않는다.

• ${#response} - 스프링 부트 3.0부터 제공하지 않는다.

• ${#session} - 스프링 부트 3.0부터 제공하지 않는다.

• ${#servletContext} - 스프링 부트 3.0부터 제공하지 않는다.

• ${#locale}

 

2. 스프링부트 3.0 미만 예제

2.1 controller 소스

@GetMapping("basic-objects")
public String basicObejct(HttpSession session) {
	session.setAttribute("sessionData", "Hello Session");
	return "basic/basic-objects";
}


@Component("helloBean")
static class HelloBean{
	public String hello(String data) {
		return "hello "+data;
	}
}

 

2.2 thyemleaf 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<h1>식 기본 객체 (Expression Basic Objects)</h1>
	<ul>
		<li>request = <span th:text="${#request}"></span></li>
		<li>response = <span th:text="${#response}"></span></li>
		<li>session = <span th:text="${#session}"></span></li>
		<li>servletContext = <span th:text="${#servletContext}"></span></li>
		<li>locale = <span th:text="${#locale}"></span></li>
	</ul>
	<h1>편의 객체</h1>
	<ul>
		<li>Request Parameter = <span th:text="${param.paramData}"></span></li>
		<li>session = <span th:text="${session.sessionData}"></span></li>
		<li>spring bean = <span th:text="${@helloBean.hello('Spring!')}"></span></ li>
	</ul>
</body>
</html>

• ${#request}는 HttpServletRequest 객체가 그대로 제공됨

• 데이터를 조회하려면 request.getParameter("data") 처럼 불편하게 접근해야 함.

※ 이런 점을 해결하기 위해 편의 객체도 제공

• 편의 객체

 - HTTP 요청 파라미터 접근: param

   ex) ${param.paramData}

 - HTTP 세션 접근: session

   ex) ${session.sessionData}

 - 스프링 빈 접근: @

   ex) ${@helloBean.hello('Spring!')}

 

 

3. 스프링부트 3.0 이상 예제 (model에 객체들을 담아서 변수 표현식 ${...}으로 사용)

3.1 controller 소스

@GetMapping("/basic-objects")
public String basicObjects(Model model, HttpServletRequest request, HttpServletResponse response, HttpSession session) {
	session.setAttribute("sessionData", "Hello Session");
	model.addAttribute("request", request);
	model.addAttribute("response", response);
	model.addAttribute("servletContext", request.getServletContext());
	return "basic/basic-objects";
}


@Component("helloBean")
	static class HelloBean {
		public String hello(String data) {
		return "Hello " + data;
	}
}

 

3.2 thyemleaf 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<h1>식 기본 객체 (Expression Basic Objects)</h1>
	<ul>
		<li>request = <span th:text="${request}"></span></li>
		<li>response = <span th:text="${response}"></span></li>
		<li>session = <span th:text="${session}"></span></li>
		<li>servletContext = <span th:text="${servletContext}"></span></li>
		<li>locale = <span th:text="${#locale}"></span></li>
	</ul>
	<h1>편의 객체</h1>
	<ul>
		<li>Request Parameter = <span th:text="${param.paramData}"></span></li>
		<li>session = <span th:text="${session.sessionData}"></span></li>
		<li>spring bean = <span th:text="${@helloBean.hello('Spring!')}"></span></ li>
	</ul>
</body>

</html>

 

유틸리티 객체와 날짜

1. 타임리프가 제공하는 유틸리티 객체들

• ${#message} : 메시지, 국제화 처리

• ${#uris} : URI 이스케이프 지원

• ${#dates} : java.util.Date 서식 지원

• ${#calendars} : java.util.Calendar 서식 지원

• ${#temporals} : 자바8 날짜 서식 지원

• ${#numbers} : 숫자 서식 지원

• ${#strings} : 문자 관련 편의 기능

• ${#objects} : 객체 관련 기능 제공

• ${#bools} : boolean 관련 기능 제공

• ${#arrays} : 배열 관련 기능 제공

• ${#lists} , ${#sets} , ${#maps} : 컬렉션 관련 기능 제공

• ${#ids} : 아이디 처리 관련 기능 제공, 뒤에서 설명

※ 타임리프 유틸리티 객체: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#expression-utilityobjects

※ 유틸리티 객체 예시 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expressionutility-objects

 

2. ${#temporals} 객체 예제

2.1 controller 소스

@GetMapping("date")
public String date(Model model) {
	model.addAttribute("localDateTime", LocalDateTime.now());
	return "basic/date";
}

 

2.2 thyemleaf 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<h1>LocalDateTime</h1>
	<ul>
		<li>default = <span th:text="${localDateTime}"></span></li>
		<li>yyyy-MM-dd HH:mm:ss = <span th:text="${#temporals.format(localDateTime,'yyyy-MM-dd HH:mm:ss')}"></span></li>
	</ul>
	<h1>LocalDateTime - Utils</h1>
	<ul>
		<li>${#temporals.day(localDateTime)} = <span th:text="${#temporals.day(localDateTime)}"></span></li>
		<li>${#temporals.month(localDateTime)} = <span th:text="${#temporals.month(localDateTime)}"></span></li>
		<li>${#temporals.monthName(localDateTime)} = <span th:text="${#temporals.monthName(localDateTime)}"></span></li>
		<li>${#temporals.monthNameShort(localDateTime)} = <span th:text="${#temporals.monthNameShort(localDateTime)}"></span></li>
		<li>${#temporals.year(localDateTime)} = <span th:text="${#temporals.year(localDateTime)}"></span></li>
		<li>${#temporals.dayOfWeek(localDateTime)} = <span th:text="${#temporals.dayOfWeek(localDateTime)}"></span></li>
		<li>${#temporals.dayOfWeekName(localDateTime)} = <span th:text="${#temporals.dayOfWeekName(localDateTime)}"></span></li>
		<li>${#temporals.dayOfWeekNameShort(localDateTime)} = <span th:text="${#temporals.dayOfWeekNameShort(localDateTime)}"></span></li>
		<li>${#temporals.hour(localDateTime)} = <span th:text="${#temporals.hour(localDateTime)}"></span></li>
		<li>${#temporals.minute(localDateTime)} = <span th:text="${#temporals.minute(localDateTime)}"></span></li>
		<li>${#temporals.second(localDateTime)} = <span th:text="${#temporals.second(localDateTime)}"></span></li>
		<li>${#temporals.nanosecond(localDateTime)} = <span th:text="${#temporals.nanosecond(localDateTime)}"></span></li>
	</ul>
</body>

</html>

• 대략 이런 것이 있다 알아두고, 필요할 때 찾아서 사용하면 됨.

 

3. Java8의 날짜

• 타임리프에서 자바8 날짜인 LocalDate , LocalDateTime , Instant를 사용하려면 추가 라이브러리가 필요 함

• 스프링 부트 타임리프를 사용하면 해당 라이브러리가 자동으로 추가되고 통합됨.
※ 타임리프 자바8 날짜 지원 라이브러리
 - thymeleaf-extras-java8time

• 자바8 날짜용 유틸리티 객체 : ${#temporals}
• 사용 예시

<span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>

 

 

URL 링크

1. 예제

1.1 controller 소스

@GetMapping("link")
public String link(Model model) {
	model.addAttribute("param1", "data1");
	model.addAttribute("param2", "data2");
	return "basic/link";
}

 

1.2 thyemleaf 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<h1>URL 링크</h1>
	<ul>
		<li><a th:href="@{/hello}">basic url</a></li>
		<li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query param</a></li>
		<li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
		<li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>
	</ul>
</body>

</html>

• 단순한 URL 예시

@{/hello} → /hello

 

• 쿼리 파라미터

 - @{/hello(param1=${param1}, param2=${param2})} → /hello?param1=data1&param2=data2

 - () 에 있는 부분은 쿼리 파라미터로 처리

 

• 경로 변수

 - @{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})} → /hello/data1/data2

 - URL 경로상에 변수가 있으면 () 부분은 경로 변수로 처리

 

• 경로 변수 + 쿼리 파라미터

 - @{/hello/{param1}(param1=${param1}, param2=${param2})} → /hello/data1?param2=data2

 - 경로 변수와 쿼리 파라미터를 함께 사용할 수 있음

 

※ 상대경로, 절대경로, 프로토콜 기준을 표현할 수 도 있음

/hello : 절대 경로

hello : 상대 경로

참고: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#link-urls

 

 

리터럴

1. 리터럴이란

• 리터럴은 소스 코드상에 고정된 값을 말하는 용어

String a = "Hello"
int a = 10 * 20

• "Hello" 는 문자 리터럴

• 10 , 20 는 숫자 리터럴

 

2. 타임리프 리터럴의 종류

• 문자: 'hello'

• 숫자: 10

• 불린: true , false

• null: null

 

3. 리터럴 예제

3.1 controller 소스

@GetMapping("literal")
public String literal(Model model) {
	model.addAttribute("data","Spring!");
	return "basic/literal";
}

 

3.2 thyemleaf 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<h1>리터럴</h1>
	<ul>
		<!--주의! 다음 주석을 풀면 예외가 발생함-->
		<!-- <li>"hello world!" = <span th:text="hello world!"></span></li>-->
		<li>'hello' + ' world!' = <span th:text="'hello' + ' world!'"></span></li>
		<li>'hello world!' = <span th:text="'hello world!'"></span></li>
		<li>'hello ' + ${data} = <span th:text="'hello ' + ${data}"></span></li>
		<li>리터럴 대체 |hello ${data}| = <span th:text="|hello ${data}|"></span></li>
	</ul>
</body>

</html>

• 타임리프에서 문자 리터럴은 항상 '(작은 따옴표로 감싸야함 (없으면 오류 발생)

• 공백 없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해서 다음과 같이 작은 따옴표를 생략할 수 있음.

※ 룰: A-Z , a-z , 0-9 , [] , . , - , _

• 리터럴 대체(Literal substitutions)

 - 마지막의 리터럴 대체 문법을 사용하면 마치 템플릿을 사용하는 것 처럼 편리하게 사용 가능

 

 

연산

1. 예제

1.1 controller 소스

@GetMapping("/operation")
public String operation(Model model) {
	model.addAttribute("nullData",null);
	model.addAttribute("data","Spring!");
	return "basic/operation";
}

 

1.2 thyemleaf 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<ul>
		<li>산술 연산
			<ul>
				<li>10 + 2 = <span th:text="10 + 2"></span></li>
				<li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>
			</ul>
		</li>
		<li>비교 연산
			<ul>
				<li>1 > 10 = <span th:text="1 &gt; 10"></span></li>
				<li>1 gt 10 = <span th:text="1 gt 10"></span></li>
				<li>1 >= 10 = <span th:text="1 >= 10"></span></li>
				<li>1 ge 10 = <span th:text="1 ge 10"></span></li>
				<li>1 == 10 = <span th:text="1 == 10"></span></li>
				<li>1 != 10 = <span th:text="1 != 10"></span></li>
			</ul>
		</li>
		<li>조건식
			<ul>
				<li>(10 % 2 == 0)? '짝수':'홀수' = <span th:text="(10 % 2 == 0)?'짝수':'홀수'"></span></li>
			</ul>
		</li>
		<li>Elvis 연산자
			<ul>
				<li>${data}?: '데이터가 없습니다.' = <span th:text="${data}?: '데이터가 없습니다.'"></span></li>
				<li>${nullData}?: '데이터가 없습니다.' = <span th:text="${nullData}?:'데이터가 없습니다.'"></span></li>
			</ul>
		</li>
		<li>No-Operation
			<ul>
				<li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</ span>
				</li>
				<li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가 없습니다.</span></li>
			</ul>
		</li>
	</ul>
</body>

</html>

• 비교연산: HTML 엔티티를 사용가능

※ > (gt), < (lt), >= (ge), <= (le), ! (not), == (eq), != (neq, ne)

• 조건식: 자바의 조건식과 유사함

• Elvis 연산자: 조건식의 편의 버전

• No-Operation: _ 인 경우 마치 타임리프가 실행되지 않는 것 처럼 동작함. 

  ※ 이것을 잘 사용하면 HTML 의 내용 그대로 활용할 수 있음.

    마지막 예를 보면 데이터가 없습니다. 부분이 그대로 출력됨.

 

 

속성값 설정

1. 타임리프 태그 속성

• 타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작함.

• th:* 로 속성을 적용하면 기존 속성을 대체함

• 기존 속성이 없으면 새로 만듦

 

2. 예제

2.1 controller 소스

@GetMapping("/attribute")
public String attribute(Model model) {
	return "basic/attribute";
}

 

2.2 thyemleaf 소스

<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<h1>속성 설정</h1>
	<input type="text" name="mock" th:name="userA" />
	<h1>속성 추가</h1>
	- th:attrappend = <input type="text" class="text" th:attrappend="class=' large'" /><br />
	- th:attrprepend = <input type="text" class="text" th:attrprepend="class='large '" /><br />
	- th:classappend = <input type="text" class="text" th:classappend="large" /><br />
	<h1>checked 처리</h1>
	- checked o <input type="checkbox" name="active" th:checked="true" /><br />
	- checked x <input type="checkbox" name="active" th:checked="false" /><br />
	- checked=false <input type="checkbox" name="active" checked="false" /><br />
</body>

</html>

• 속성 설정

 - th:* 속성을 지정하면 타임리프는 기존 속성을 th:* 로 지정한 속성으로 대체함.

 - 기존 속성이 없다면 새로 만듦

ex) 타임리프 소스 : <input type="text" name="mock" th:name="userA" />

타임리프 렌더링 이후 : <input type="text" name="userA" />

 

• 속성 추가

 - th:attrappend : 속성 값의 뒤에 값을 추가 (띄어쓰기 주의)

 - th:attrprepend : 속성 값의 앞에 값을 추가 (띄어쓰기 주의)

 - th:classappend : class 속성에 자연스럽게 추가 (띄어쓰기 자체 추가)

 

• checked 처리

 - checked 속성 특징

<input type="checkbox" name="active" checked="false" />

※ checked 속성이 있기 때문에 "false"라고 하더라도 checked 처리가 되어버림

※ HTML에서 checked 속성은 checked 속성의 값과 상관없이 checked 라는 속성만 있어도 체크가 됨

 - 타임리프는 th:checked 값이 false 인 경우 checked 속성 자체를 제거

타임리프 소스 : <input type="checkbox" name="active" th:checked="false" />

타임리프 렌더링 후: <input type="checkbox" name="active" />

 

 

반복

1. 예제

1.1 controller 소스

@GetMapping("/each")
public String each(Model model) {
	addUser(model);
	return "basic/each";
}


public void addUser(Model model) {
	List<User> list = new ArrayList<>();
	list.add(new User("userA", 10));
	list.add(new User("userB", 30));
	list.add(new User("userC", 20));
	list.add(new User("userD", 33));
	model.addAttribute("users",list);
}

 

1.2 thyemleaf 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<h1>기본 테이블</h1>
	<table border="1">
		<tr>
			<th>username</th>
			<th>age</th>
		</tr>
		<tr th:each="user : ${users}">
			<td th:text="${user.username}">username</td>
			<td th:text="${user.age}">0</td>
		</tr>
	</table>
	<h1>반복 상태 유지</h1>
	<table border="1">
		<tr>
			<th>count</th>
			<th>username</th>
			<th>age</th>
			<th>etc</th>
		</tr>
		<tr th:each="user, userStat : ${users}">
			<td th:text="${userStat.count}">username</td>
			<td th:text="${user.username}">username</td>
			<td th:text="${user.age}">0</td>
			<td>
				index = <span th:text="${userStat.index}"></span>
				count = <span th:text="${userStat.count}"></span>
				size = <span th:text="${userStat.size}"></span>
				even? = <span th:text="${userStat.even}"></span>
				odd? = <span th:text="${userStat.odd}"></span>
				first? = <span th:text="${userStat.first}"></span>
				last? = <span th:text="${userStat.last}"></span>
				current = <span th:text="${userStat.current}"></span>
			</td>
		</tr>
	</table>
</body>

</html>

• 반복 기능
ex) <tr th:each="user : ${users}">
 - 반복시 오른쪽 컬렉션( ${users} )의 값을 하나씩 꺼내 왼쪽 변수( user )에 담아서 태그를 반복 실행
 - th:each는 List 뿐만 아니라 배열, java.util.Iterable, java.util.Enumeration을 구현한 모든 객체를 반복에 사용할 수 있음.

 - Map도 사용할 수 있는데 이 경우 변수에 담기는 값은 Map.Entry임

 

• 반복 상태 유지
ex) <tr th:each="user, userStat : ${users}">
 - 반복의 두번째 파라미터를 설정해서 반복의 상태를 확인 할 수 있음
 - 두번째 파라미터는 생략 가능한데, 생략하면 지정한 변수명 user + Stat가 됨
 - 여기서는 user + Stat = userStat 이므로 생략 가능

 

• 반복 상태 유지 기능
- index : 0부터 시작하는 값
- count : 1부터 시작하는 값
- size : 전체 사이즈
- even , odd : 홀수, 짝수 여부( boolean )
- first , last :처음, 마지막 여부( boolean )
- current : 현재 객체

 

 

조건부 평가

1. 예제

1.1 controller 소스

@GetMapping("/condition")
public String condition(Model model) {
	addUser(model);
	return "basic/condition";
}


public void addUser(Model model) {
	List<User> list = new ArrayList<>();
	list.add(new User("userA", 10));
	list.add(new User("userB", 30));
	list.add(new User("userC", 20));
	list.add(new User("userD", 33));
	model.addAttribute("users",list);
}

 

1.2 thyemleaf 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<h1>if, unless</h1>
	<table border="1">
		<tr>
			<th>count</th>
			<th>username</th>
			<th>age</th>
		</tr>
		<tr th:each="user, userStat : ${users}">
			<td th:text="${userStat.count}">1</td>
			<td th:text="${user.username}">username</td>
			<td>
				<span th:text="${user.age}">0</span>
				<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
				<span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>
			</td>
		</tr>
	</table>
	<h1>switch</h1>
	<table border="1">
		<tr>
			<th>count</th>
			<th>username</th>
			<th>age</th>
		</tr>
		<tr th:each="user, userStat : ${users}">
			<td th:text="${userStat.count}">1</td>
			<td th:text="${user.username}">username</td>
			<td th:switch="${user.age}">
				<span th:case="10">10살</span>
				<span th:case="20">20살</span>
				<span th:case="*">기타</span>
			</td>
		</tr>
	</table>
</body>

</html>

• if, unless
 - 타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않음
 - 만약 다음 조건이 false 인 경우 <span>...<span> 부분 자체가 렌더링 되지 않고 사라짐
<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>

 

• switch
 - * 은 만족하는 조건이 없을 때 사용하는 디폴트 조건

 

 

주석

1. 예제

1.1 controller 소스

@GetMapping("/comments")
public String comment(Model model) {
	model.addAttribute("data","Spring!");
	return "basic/comments";
}

 

1.2 thyemleaf 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<h1>예시</h1>
	<span th:text="${data}">html data</span>
	
	<h1>1. 표준 HTML 주석</h1>
	<!--
	<span th:text="${data}">html data</span>
	-->
	
	<h1>2. 타임리프 파서 주석</h1>
	<!--/* [[${data}]] */-->
	
	<!--/*-->
	<span th:text="${data}">html data</span>
	<!--*/-->
	
	<h1>3. 타임리프 프로토타입 주석</h1>
	<!--/*/
	<span th:text="${data}">html data</span>
	/*/-->
	
</body>

</html>

• 표준 HTML 주석 (<!-- ... -->)
 - 자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둠


• 타임리프 파서 주석(<!--/* ... */-->    ,    <!--/*--> ... <!--*/-->)
 - 타임리프 파서 주석은 타임리프의 진짜 주석이다. 렌더링에서 주석 부분을 제거함


• 타임리프 프로토타입 주석(<!--/*/ ... /*/-->)
 - HTML 파일을 웹 브라우저에서 그대로 열어보면 HTML 주석이기 때문에 이 부분이 웹 브라우저가 렌더링하지 않음
 - 타임리프 렌더링을 거치면 이 부분이 정상 렌더링 됨.
 - 쉽게 이야기해서 HTML 파일을 그대로 열어보면 주석처리가 되지만, 타임리프를 렌더링 한 경우에만 보이는 기능

 

 

블록

1. 예제

1.1 controller 소스

@GetMapping("/block")
public String block(Model model) {
	addUser(model);
	return "basic/block";
}


public void addUser(Model model) {
	List<User> list = new ArrayList<>();
	list.add(new User("userA", 10));
	list.add(new User("userB", 30));
	list.add(new User("userC", 20));
	list.add(new User("userD", 33));
	model.addAttribute("users",list);
}

 

1.2 thyemleaf 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<th:block th:each="user : ${users}">
		<div>
			사용자 이름1 <span th:text="${user.username}"></span>
			사용자 나이1 <span th:text="${user.age}"></span>
		</div>
		<div>
			요약 <span th:text="${user.username} + ' / ' + ${user.age}"></span>
		</div>
	</th:block>
</body>

</html>

• <th:block> 은 HTML 태그가 아닌 타임리프의 유일한 자체 태그

• 타임리프의 특성상 HTML 태그안에 속성으로 기능을 정의해서 사용하는데, 위와 같이 2군데의 div태그에서 model에 담긴 ${users}리스트를 사용할 경우 사용이 애매함

• 이럴경우 <th:block>을 사용하여 해결 가능

 

 

자바스크립트 인라인

1. 예제

1.1 controller 소스

@GetMapping("/javascript")
public String javascript(Model model) {
	model.addAttribute("user", new User("UserA", 10));
	addUser(model);
	return "basic/javascript";
}

 

1.2 thyemleaf 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<!-- 자바스크립트 인라인 사용 전 -->
	<script>
		var username = [[${user.username}]];
		var age = [[${user.age}]];
		//자바스크립트 내추럴 템플릿
		var username2 = /*[[${user.username}]]*/ "test username";
		//객체
		var user = [[${user}]];
	</script>
	<!-- 자바스크립트 인라인 사용 후 -->
	<script th:inline="javascript">
		var username = [[${user.username}]];
		var age = [[${user.age}]];
		//자바스크립트 내추럴 템플릿
		var username2 = /*[[${user.username}]]*/ "test username";
		//객체
		var user = [[${user}]];
	</script>

	<!-- 자바스크립트 인라인 each -->
	<script th:inline="javascript">
		[# th: each = "user, stat : ${users}"]
		var user[[${stat.count}]] = [[${user}]];
		[/]
	</script>
</body>

</html>

•  자바스크립트 인라인 적용 

<script th:inline="javascript">...</script>

 

• 텍스트 렌더링
 - var username = [[${user.username}]];

인라인 사용 전 결과 소스 var username = userA;
인라인 사용 후 결과 소스 var username = "userA";

 - 인라인 사용 전 렌더링 결과를 보면 userA라는 변수 이름이 그대로 남아있음.

 - 개발자가 기대한 것은 다음과 같은 "userA"라는 문자일 것
 ※ 인라인 사용을 안할 경우 userA라는 변수명으로 사용되어서 자바스크립트 오류가 발생

 ※ 숫자 age의 경우에는 " 가 필요 없기 때문에 정상 렌더링 됨
 ※ 인라인을 사용 할경우 렌더링 결과를 보면 문자 타입인 경우 자동으로 " 를 포함해줌

 ※ 추가로 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리도 해줌. ex) " → \"

 

• 자바스크립트 내추럴 템플릿

 - var username2 = /*[[${user.username}]]*/ "test username";

※ 의도 : 타임리프 없이 실행할 경우 "test username" 적용, 타임리프 렌더링 시 [[${user.username}]] 적용

인라인 사용 전 결과 소스 var username2 = /*userA*/ "test username";
인라인 사용 후 결과 소스 var username2 = "userA";

 - 인라인 사용 전 결과를 보면 정말 순수하게 그대로 해석 함.

 - 따라서 내추럴 템플릿 기능이 동작하지 않고, 심지어 렌더링 내용이 주석처리 되어 버림
 - 인라인 사용 후 결과를 보면 주석 부분이 제거되고, 기대한 "userA"가 정확하게 적용

 

• 객체

 ※ 타임리프의 자바스크립트 인라인 기능을 사용하면 객체를 JSON으로 자동으로 변환해줌
 - var user = [[${user}]];

인라인 사용 전 결과 소스 var user = BasicController.User(username=userA, age=10);
인라인 사용 후 결과 소스 var user = {"username":"userA","age":10};

- 인라인 사용 전 소스는 객체의 toString()이 호출된 값
- 인라인 사용 후 소스는 객체를 JSON으로 자동으로 변환해줌

 

• 자바스크립트 인라인 each 소스

<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
	[# th:each="user, stat : ${users}"]
	var user[[${stat.count}]] = [[${user}]];
	[/]
</script>

• 자바스크립트 인라인 each 결과

<script>
	var user1 = {"username":"userA","age":10};
	var user2 = {"username":"userB","age":20};
	var user3 = {"username":"userC","age":30};
</script>

 

 

템플릿 조각

1. 설명 

• 웹 페이지를 개발할 때는 상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이지에서 함께 사용하는 영역들과 같은 공통 영역이 많이 있음.

• 타임리프는 공통영역 처리를 위해 템플릿 조각과 레이아웃 기능을 지원.

 

2. 예제

2.1 controller 소스

@GetMapping("/fragment")
public String template() {
	return "template/fragment/fragmentMain";
}

 

2.2 thyemleaf 소스

• footer로 사용될 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<body>
	<footer th:fragment="copy">
		푸터 자리 입니다.
	</footer>
	<footer th:fragment="copyParam (param1, param2)">
		<p>파라미터 자리 입니다.</p>
		<p th:text="${param1}"></p>
		<p th:text="${param2}"></p>
	</footer>
</body>

</html>

• 메인 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<h1>부분 포함</h1>
	<h2>부분 포함 insert</h2>
	<div th:insert="~{template/fragment/footer :: copy}"></div>
	<h2>부분 포함 replace</h2>
	<div th:replace="~{template/fragment/footer :: copy}"></div>
	<h2>부분 포함 단순 표현식</h2>
	<div th:replace="template/fragment/footer :: copy"></div>
	<h1>파라미터 사용</h1>
	<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
</body>

</html>

• 부분 포함 insert

<div th:insert="~{template/fragment/footer :: copy}"></div>

- th:insert를 사용하면 현재 태그(div) 내부에 추가함.

- 결과 소스

<h2>부분 포함 insert</h2>
<div>
<footer>
푸터 자리 입니다.
</footer>
</div>

 

• 부분 포함 replace

<div th:replace="~{template/fragment/footer :: copy}"></div>

 - th:replace를 사용하면 현재 태그(div)를 대체함.

 - 결과 소스

<h2>부분 포함 replace</h2>
<footer>
푸터 자리 입니다.
</footer>

 

• 부분 포함 단순 표현식

<div th:replace="template/fragment/footer :: copy"></div>

 - ~{ ... }를 사용하는 것이 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 이 부분을 생략할 수 있음

 - 결과 소스는 위와 같음

 

 

• 파라미터 사용

<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>

 - template/fragment/footer소스 

<footer th:fragment="copyParam (param1, param2)">
	<p>파라미터 자리 입니다.</p>
	<p th:text="${param1}"></p>
	<p th:text="${param2}"></p>
</footer>

 - 결과 소스

<h1>파라미터 사용</h1>
<footer>
	<p>파라미터 자리 입니다.</p>
	<p>데이터1</p>
	<p>데이터2</p>
</footer>

 

 

템플릿 레이아웃1

1. 설명

• 코드 조각을 레이아웃에 넘겨서 사용하는 방법.
• <head>에 공통으로 사용하는 css, javascript 같은 정보들을 한 곳에 모아두고 공통으로 사용하지만 각 페이지마다 필요한 정보를 더 추가해서 사용하고 싶을때 사용

 

2. 예제

2.1 controller 소스

@GetMapping("layout")
public String layout() {
	return "template/layout/layoutMain";
}

 

2.2 thyemleaf 소스

• 레이아웃 소스

<html xmlns:th="http://www.thymeleaf.org">

<head th:fragment="common_header(title,links)">
	
	<title th:replace="${title}">레이아웃 타이틀</title>
	
	<!-- 공통 -->
	<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
	<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
	<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
	
	<!-- 추가 -->
	<th:block th:replace="${links}" />
	
</head>

 

• controller에서 호출하는 소스

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
	<title>메인 타이틀</title>
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>

<body>
	메인 컨텐츠
</body>

</html>

• controller에서 호출하는 소스의 common_header(~{::title},~{::link}) 이 부분이 핵심

 - th:replace로 head태그는 레이아웃 소스의  common_header(~{::title},~{::link}) th:fragment로 대체가 됨
 - ::title은 현재 페이지의 title 태그들을 레이아웃 소스로 전달
 - ::link는 현재 페이지의 link 태그들을 레이아웃 소스로 전달

 

• 결과 소스

<!DOCTYPE html>
<html>
<head>
	<title>메인 타이틀</title>
	<!-- 공통 -->
	<link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css">
	<link rel="shortcut icon" href="/images/favicon.ico">
	<script type="text/javascript" src="/sh/scripts/codebase.js"></script>

	<!-- 추가 -->
	<link rel="stylesheet" href="/css/bootstrap.min.css">
	<link rel="stylesheet" href="/themes/smoothness/jquery-ui.css">
</head>
<body>
	메인 컨텐츠
</body>
</html>

• 메인 타이틀이 controller에서 호출한 title 소스로 교체됨
• 공통 부분은 그대로 유지되고, 추가 부분에 전달한 <link> 들이 포함됨.

 

 

템플릿 레이아웃 2

1. 예제

1.1 controller 소스

@GetMapping("/layoutExtend")
public String layoutExtend() {
	return "template/layoutExtend/layoutExtendMain";
}

 

1.2 thyemleaf 소스

• 레이아웃 소스

<!DOCTYPE html>
<html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org">

<head>
	<title th:replace="${title}">레이아웃 타이틀</title>
</head>

<body>
	<h1>레이아웃 H1</h1>
	
	<div th:replace="${content}">
		<p>레이아웃 컨텐츠</p>
	</div>
	
	<footer>
		레이아웃 푸터
	</footer>
</body>

</html>

 

• controller에서 호출하는 소스

<!DOCTYPE html>
<html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title},~{::section})}"
	xmlns:th="http://www.thymeleaf.org">

<head>
	<title>메인 페이지 타이틀</title>
</head>

<body>
	<section>
		<p>메인 페이지 컨텐츠</p>
		<div>메인 페이지 포함 내용</div>
	</section>
</body>

</html>

• 위의 <header>태그에만 적용한게 아니라 <html> 전체에 적용 (원리는 똑같음)

 

• 결과소스

<!DOCTYPE html>
<html>
<head>
	<title>메인 페이지 타이틀</title>
</head>
<body>
	<h1>레이아웃 H1</h1>
	<section>
		<p>메인 페이지 컨텐츠</p>
		<div>메인 페이지 포함 내용</div>
	</section>
	<footer>
		레이아웃 푸터
	</footer>
</body>
</html>
반응형

'일상의 흔적 > Study' 카테고리의 다른 글

인프런 스프링 MVC 2 (백엔드 웹개발 활용 기술) : 메세지, 국제화 - 3  (0) 2023.03.19
인프런 스프링 MVC 2 (백엔드 웹개발 활용 기술) : Thyemleaf 스프링통합과 폼 - 2  (0) 2023.03.19
인프런 스프링 MVC 1 (웹개발 핵심 기술) : 스프링 MVC 웹페이지 만들기 - 7  (0) 2023.03.18
인프런 스프링 MVC 1 (웹개발 핵심 기술) : 스프링 MVC 기본기능 - 6  (0) 2023.03.17
인프런 스프링 MVC 1 (웹개발 핵심 기술) : 스프링 MVC 구조 - 5  (0) 2023.03.17

+ Recent posts

티스토리툴바