[Spring] Thymeleaf 기본 문법 정리

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Link

🌱 GitHub

Notice

🍀 깃허브 / 티스토리 닉네임의 의미

관리 메뉴

DevLog 😶

[Spring] Thymeleaf 기본 문법 정리 본문

Back-end/Spring

[Spring] Thymeleaf 기본 문법 정리

dolmeng2 2022. 8. 18. 21:28

김영한 님의 '스프링 MVC 2편 - 백엔드 웹 개발 활용 기술'을 보고 정리한 글입니다 😊

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의

웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있

www.inflearn.com

| 타임리프 문법 알아보기

- SSR에서 많이 사용하는 타임리프의 기본 문법에 대해서 알아보자.

- 프로젝트 dependency에는 다음을 추가해주었다.

: Spring Web, Lombok, Thymeleaf

- 타임리프의 경우 '네츄럴 템플릿'이라는 특징이 있다.

: HTML을 그대로 유지하기 때문에 웹 브라우저에서 파일을 열어도 내용 확인이 되며, 뷰 템플릿을 거치면 동적으로 결과가 변환된다.

: 순수한 HTML을 그대로 사용하면서 뷰 템플릿까지 사용할 수 있다는 것이 큰 장점!

✔ 기본 선언

✔ 텍스트 출력 - text, utext

: HTML content에 데이터 출력시 사용, 태그 속성에 기능 정의.

[[${data}]]

: HTML 콘텐츠 영역 안에서 직접 데이터를 출력하고 싶을 때 사용하기

[ThymeleafController.java]

@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafController {
    @GetMapping("/text-basic")
    public String textBasic(Model model) {
        model.addAttribute("data", "hello!");
        return "thymeleaf/text-basic";
    }
}

[text-basic.html] - resources/templates/thymeleaf 밑에 두었다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<h1>Data in Content</h1>
<ul>
  <li>th:text 사용하기 <span th:text="${data}"></span></li>
  <li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
</ul>
</body>
</html>

- 두 경우 모두 잘 나온다.

- 실용성으로 봤을 때는 [[]]을 더 많이 사용하지 않을까 싶은데... 이거는 취향 차이일 것 같다.

✔ Escape 처리하기

- html은 기본적으로 태그에서 <>을 사용하기 때문에, < 자체를 문자로 표현하기 위해서 특수한 방법이 필요하다.

- < 이러한 특수문자를 html 엔티티로 변경하는 것을 escape라고 하며, th:text, [[...]]은 기본적으로 escape를 제공한다.

< : &lt
> : &gt
& : &amp
" : &quot
' : &apos

🚩 HTML 엔티티란?

- HTML에서 사용하는 예약된 문자는 'HTML 예약어'라고 하며, 이를 HTML 코드에서 사용하면 웹 브라우저는 다른 의미로 해석한다.

- HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해, 별도로 만든 문자셋을 엔티티라고 한다.

- 보통 엔티티는 &entity_name, &#entity_number 형태로 나타낸다.

- 엔티티의 이름은 대소문자를 구분한다.

- 이스케이프 기능을 사용하지 않으려면 th:utext, [(...)]을 사용하면 된다.

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

[text-unescaped.html]

<!DOCTYPE html>
<html lang="en">
<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:inline 옵션을 주어서 [[...]]이나 [(...)]을 해석하지 못하도록 하였다.

- 다음처럼 이스케이프 기능을 사용하지 못하도록 만들 수 있다.

✔ 변수 표현식 - ${...}

@GetMapping("/variable")
public String variable(Model model) {
    User user1 = new User("hi", 22);
    User user2 = new User("hihi", 23);

    List<User> users = new ArrayList<>();
    users.add(user1);
    users.add(user2);

    Map<String, User> map = new HashMap<>();
    map.put("user1", user1);
    map.put("user2", user2);

    model.addAttribute("user", user1);
    model.addAttribute("userList", users);
    model.addAttribute("userMap", map);
    return "thymeleaf/variable";
}

@Getter
static class User {
    private String username;
    private int age;

    public User(String username, int age) {
        this.username = username;
        this.age = age;
    }
}

[variable.html]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<h1>Spring EL 표현식</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>${userList[0].username} = <span th:text="${userList[0].username}"></span></li>
  <li>${userList[0]['username']} = <span th:text="${userList[0]['username']}"></span></li>
  <li>${userList[0].getUsername()} = <span th:text="${userList[0].getUsername()}"></span></li>
</ul>

<ul>Map
  <li>${userMap['userA'].username} = <span th:text="${userMap['user1'].username}"></span></li>
  <li>${userMap['userA']['username']} = <span th:text="${userMap['user1']['username']}"></span></li>
  <li>${userMap['userA'].getUsername()} = <span th:text="${userMap['user1'].getUsername()}"></span></li>
</ul>
</body>
</html>

- 객체 접근

user.username
user['username']
user.getUsername()

- List 접근

userList[0].username
userList[0]['username']
userList[0].getUsername()

- Map 접근

userMap['user1'].username
userMap['user1]['username']
userMap['user1'].getUsername()

- 접근하려면 getter가 필수적으로 열려있어야 한다.

✔ 지역 변수 선언 - th:with

<h1>지역 변수 - (th:with)</h1>
<div th:with="first=${userList[0]}">
    <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>

- th:with를 사용하면 지역 변수를 선언해서 접근할 수 있다. (조금 더 깔끔하게 중복되는 부분 처리 가능)

✔ 기본 객체들

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

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

[basic-objects.html]

<!DOCTYPE html>
<html lang="en">
<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>

http://localhost:8080/thymeleaf/basic-objects?paramData=hello

✔ 편의 객체

HTTP 요청 파라미터 접근: ${param.name}

HTTP 세션 접근: ${session.name}

스프링 빈 접근: ${@helloBean.hello('spring!')}

-> 스프링 빈 접근의 경우 빈 이름 + 메서드 호출도 바로 진행이 가능하다!

- 그 외에도 다양한 유틸리티 객체들을 제공한다.

#message : 메시지, 국제화 처리
#uris : URI 이스케이프 지원
#dates : java.util.Date 서식 지원
#calendars : java.util.Calendar 서식 지원
#temporals : 자바8 날짜 서식 지원
#numbers : 숫자 서식 지원
#strings : 문자 관련 편의 기능
#objects : 객체 관련 기능 제공
#bools : boolean 관련 기능 제공
#arrays : 배열 관련 기능 제공
#lists , #sets , #maps : 컬렉션 관련 기능 제공
#ids : 아이디 처리 관련 기능 제공

- 나중에 필요할 때 직접 찾아보는 게 좋을 듯!

Tutorial: Using Thymeleaf

1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a

www.thymeleaf.org

✔ 날짜 표시 - temporals

[date.html]

<!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>

- 이렇게 날짜 표시가 가능하다 :D

✔ URL 생성

- 단순한 URL

: {@/hello}

-> /hello

- 쿼리 파라미터

: @{/hello(param1=${param1}, param2={param2})}

이때, model에 {"param1", "data1"} {"param2", "data2"} 넣은 경우

-> /hello?param1=data1&param2=data2

- 경로 변수

: @{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}

-> /hello/data1/data2

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

: @{/hello/{param1}(param1=${param1}, param2=${param2})}

-> /hello/data1?param2=data2

✔ 리터럴

- 소스 코드 상에서 고정된 값을 말하는 용어

문자 / 숫자 / boolean / null

- 문자는 항상 ''으로 감싸야 한다.

- 그러나, 공백 없이 쭉 이어지는 경우라면 하나의 토큰으로 인지하기 때문에 감싸지 않아도 된다.

- 당연히, 공백이 있는 경우라면 ''로 감싸야 한다.

th:text="hello" (o)th:text="'hello world'" (o)

- 리터럴 대체 문법.

: ''로 감싸지 않아도 한 번에 사용이 가능하다!

- 기존에는 th:text="'hello ' + ${data}"로 작성했어야 하지만, ||로 한 번에 대체할 수 있다.

✔ 연산

- 비교연산: HTML 엔티티를 사용해야 하는 경우 조심하기

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

- ?을 통한 다항 연산자도 사용이 가능하다

- 연산 수행 안 함

<li>${nullData}? : _ = <span th:text="${nullData}?: _">데이터가 없습니다.</span></li>

: _을 사용하게 되면 타임리프의 태그 효과가 무효된다. ${}의 결과가 아닌 '데이터가 없습니다'가 출력된다.

✔ 속성 값 설정 - th:*

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

- 이때, 기존 속성이 없다면 새로 만든다.

- th:attrappend : 속성 값의 뒤에 값 추가

-> <input class="text large">

- th:attrprepend : 속성 값의 앞에 값 추가

-> <input class="large text">

- th:classappend : class 속성에 자연스럽게 추가

-> <input class="text large">

- 기존의 HTML에서는 checked라는 옵션만 있으면 체크가 되기 때문에, 이를 방지해보자. (T/F 처리하기)

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

: false라고 해도 바로 체크 표시가 되어버리는 것.

- checked o <input type="checkbox" name="active" th:checked="true" />
- checked x <input type="checkbox" name="active" th:checked="false" />

: th:checked가 false라면 아예 checked 옵션 자체를 제거해버린다.

✔ 반복문 - th:each

- users에 있는 값을 하나씩 user에 담아서 태그를 반복 실행해주기.

- java.util.Iterable, java.util.Enmeration을 구현만 모든 객체에 대해서 사용이 가능하다.

- 두 번째 파라미터를 사용해서 반복의 상태를 확인할 수 있다. (생략 시 지정한 변수명 + Stat 형태)

- 반복의 상태 확인 시 전체 사이즈나 현재 객체 등을 얻을 수 있다.

"${userStat.index}" : 0부터 시작하는 일종의 인덱스 값을 보여준다.

count : 1부터 시작하는 일종의 인덱스 값

size : 전체 사이즈

even : 짝수 여부 <boolean>

odd : 홀수 여부 <boolean>

first : 처음인지 <boolean>

last: 마지막인지 <boolean>

current: 현재 값

✔ 조건부 평가

th:if : if문, 만족하는지 확인

th:unless : if문의 반대, 만족하지 않는지 확인

- 둘 모두 true일 경우 태그 출력, false일 경우 해당 태그는 출력되지 않는다.

th:switch, th:case : 자바에서의 switch-case문 그대로. th:case="*" -> 만족하는 조건이 없을 때 사용하는 디폴트 값.

✔ 주석

- 표준 HTML 주석: 

: 타임리프가 렌더링하지 않고 그대로 남겨둔다.

- 타임리프 파서 주석 : 

: 타임리프의 주석이기 때문에, 렌더링에서 주석 부분 제거.

- 타임리프 프로토타입 주석 : 

: HTML 주석이기 때문에 웹 브라우저는 렌더링 X, 타임리프 렌더링 시에는 정상 렌더링.

: 즉, HTML 파일에서는 주석, 타임리프에서는 보이게 하는 기능이다.

✔ 블록 - th:block

- 타임리프는 태그 안에 속성으로 기능을 정의하다 보니까, 여러 개를 묶어서 사용하고 싶을 때가 있다.

- th:block의 경우 렌더링될 때 제거된다.

<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>

- 이런 식으로 2개의 div 태그를 묶어서 반복문을 돌리고 싶다든지... 그럴 때 사용한다.

✔ 자바스크립트 인라인 - <script th:inline="javascript">

- 자바스크립트에서 타임리프를 편리하게 사용할 수 있다.

- 자바스크립트 인라인 사용 X

<script>
    var username = [[${user.username}]];
    var age = [[${user.age}]];
    var username2 = /*[[${user.username}]]*/ "test username";
    var user = [[${user}]];
</script>

- 자바스크립트 인라인 사용 O

<script th:inline="javascript">
    var username = [[${user.username}]];
    var age = [[${user.age}]];
    var username2 = /*[[${user.username}]]*/ "test username"; // 자바스크립트에서도 네츄럴 템플릿 가능
    var user = [[${user}]];
</script>

- 자바스크립트 인라인을 사용하지 않은 경우

var username = [[${user.username}]];

여기서 var username = userA라고 인식이 된다. 즉, userA라는 변수 자체가 들어가는 형태가 되어버린다.

-> 이를 해결하려면 var username = "[[${user.username}]]"; 이렇게 써야 한다.

반면, 인라인을 사용하면 var username = "userA"라고 나오기 때문에 문자열이 잘 들어가는 걸로 나온다.

- 또한, 내추럴 템플릿 기능의 제공 유무에도 차이가 있다.

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

인라인을 사용하지 않으면 var username2 = /*userA*/ "test username"; 이렇게 나오지만,

인라인을 사용하면 var username2 = "userA"라고 나온다.

: 인라인 x일 때는 정말 그대로 해석해버리지만, 인라인을 사용하면 렌더링 시 주석 부분을 제거하고 값이 입력된다.

- 마지막으로, var user = [[${user}]]; 이 부분이다.

인라인을 사용하지 않으면 var user = BasicController.User(username=userA, age=10);로 나오지만,

인라인을 사용하면 var user = {"username":"userA","age":10};로 나온다.

: 인라인 x일 때는 객체의 toString이, 인라인 사용 시에는 JSON으로 변환한 값이 들어가게 되는 것이다.

- 또한, 인라인 사용 시 문자 타입이면 자동으로 "을 추가해주고, "나 '같은 문자는 자동으로 이스케이프 처리도 해준다!

- 또한, 자바스크립트 인라인은 each를 통해 반복문도 지원한다.

<script th:inline="javascript">
    [# th:each="user, stat : ${users}"]
    var user[[${stat.count}]] = [[${user}]];
    [/]
</script>

<결과>

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

| 타임리프 - 템플릿 조각 / 레이아웃

- 여러 페이지에서 함께 사용하는 영역들에 대해 템플릿 조각 및 레이아웃으로 관리하자.

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

[footer.html] - resources/templates/template/fragment/

<!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>

- th:fragment가 붙어 있는 부분이 다른 곳에 포함될 수 있는 일종의 '조각'이다.

[fragmentMain.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>

- 조각에 대한 삽입은 다음과 같이 th:insert, th:replace를 이용할 수 있다.

- th:insert를 사용하면 현재 태그의 내부에 삽입하게 된다.

- th:replace를 사용하면 현재 태그를 대체해버린다.

- ~{fragment의 경로 :: 이름}으로 접근한다.

- 이때, 코드가 단순하면 ~{}을 생략할 수도 있다. (그래도 웬만하면 써주는 것이 좋다)

- 파라미터를 전달할 때는 ()을 통해 전달한다.

- 이번에는, 코드 조각을 레이아웃으로 넘겨보자.

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

[base.html] - resources/templates/template/layout

<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>

- head에서 공통으로 사용하는 부분에 대해 묶어두었다.

- th:fragment = "common_header (title, links)"

- th:replace로 받아온 title, links 사용.

- th:replace="${title}"

[layoutMain.html]

<!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>

- 기본적으로 th:replace를 적용하여, base.html에 있는 head를 사용하겠다는 것.

- 이때, 단순히 base 그 자체를 사용하는 것이 아닌, 커스텀을 하기 위해 현재 페이지의 값을 전달해주는 것!

- ::title은 현재 페이지의 title 태그들을 전달한다. (태그 자체가 전달!)

- ::link는 현재 페이지의 link 태그들을 전달한다.

- 조금 더 응용해보자.

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

[layoutFile.html] - resources/templates/template/layoutExtend

<!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>

- th:fragment = "layout (title, content)"

- th:replace로 받아온 title과 content 사용

- th:replace="${title}"

[layoutExtendMain.html]

<!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>

- 원리는 동일하다.

th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title}, ~{::section})}

- 일부가 아닌, 통으로 교체를 시켜버리자는 것.

- 현재 페이지의 title, section 태그 사용

- 다음 포스팅에서는 이전 포스팅에서 진행하였던 '상품 등록폼'을 조금 더 발전시켜나가보자.

'Back-end > Spring' 카테고리의 다른 글

[Spring] 메시지와 국제화를 통해 언어 설정 커스텀하기 (0)	2022.08.21
[Spring] Thymeleaf를 사용해서 상품 등록/수정/조회 구현하기 (0)	2022.08.19
[Spring] thymeleaf, bootstrap을 통해 기본 상품 저장 웹 사이트 만들기 (0)	2022.08.18
[Spring] HTTP 요청 파라미터, 응답 데이터 생성, HttpMessageConverter와 ArgumentResolver (0)	2022.08.17
[Spring] DispatcherServlet의 동작 과정과 HanderMapping, HandlerAdapter, @RequestMapping (0)	2022.08.16

'Back-end/Spring' Related Articles

Comments

DevLog 😶

[Spring] Thymeleaf 기본 문법 정리 본문

[Spring] Thymeleaf 기본 문법 정리

| 타임리프 문법 알아보기

| 타임리프 - 템플릿 조각 / 레이아웃

'Back-end > Spring' 카테고리의 다른 글

티스토리툴바