Thymeleaf 사용하기

🌏 WEB/Thymeleaf

Thymeleaf 사용하기

애정쓰 2021. 3. 2. 21:21

jsp만 배우고 사용하면서 익숙해진 것을 계속 쓰고 싶었지만 Spring Boot를 사용하게 되면서 Thymeleaf를 사용하게 되었습니다.

우선적으로 Spring boot에서 jsp 사용을 권장하고 있지 않습니다. 아마 내장톰캣이기 때문에 war로 패키징을 해야 하기 때문에 Spring boot를 사용하고 있는 입장에서는 약간 🤨입니다.

Thymeleaf를 사용하기 위해서 의존성을 먼저 추가 해줍니다.

build.gradle

    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

application.yml에도 관련 설정을 해주어야 합니다. jsp를 사용할 때 처럼 위치와 파일형식을 알려줍니다

application.yml

spring:
	thymeleaf:
	    prefix: classpath:templates/
	    suffix: .html
	    mode: HTML5

패키지 구조는 이렇습니다.

template 형태는 이렇습니다. 위에 xmlns:th 만 붙여주면 사용할 수 있습니다.!

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Dealink Admin Page</title>
</head>
<body>
</body>
</html>

Controller

  @RequestMapping("/room")
  public String room() {
    return "room";
  }

Test Code (테스트 코드 JUnit5)

package com.chatting.domains.chatting.presentation;

import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.junit.jupiter.api.extension.ExtendWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.autoconfigure.web.servlet.WebMvcTest;
import org.springframework.test.context.junit.jupiter.SpringExtension;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.request.MockMvcRequestBuilders;
import org.springframework.test.web.servlet.setup.MockMvcBuilders;
import org.springframework.web.context.WebApplicationContext;

import static org.springframework.test.web.servlet.result.MockMvcResultHandlers.print;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.view;

@ExtendWith(SpringExtension.class)
@WebMvcTest(controllers = ChattingController.class)
class ChattingControllerTest {

  @Autowired private MockMvc mockMvc;
  @Autowired WebApplicationContext wac;

  @BeforeEach
  public void setup() {
    this.mockMvc = MockMvcBuilders.webAppContextSetup(wac).build();
  }

  @Test
  public void html맵핑테스트() throws Exception {
    this.mockMvc
        .perform(MockMvcRequestBuilders.get("/room"))
        .andExpect(status().isOk())
        .andDo(print())
        .andExpect(view().name("room"));
  }
}

간단한 문법 몇개로 예를 들어보면

Text

컨트롤러에서 model로 받아온 값을 사용할 수 있습니다. 인텔리제이에서 자동완성을 지원하기 때문에 어떤 값을 받아 올 수 있는지 쉽게 가능합니다 !

<p th:text="'총입찰 수: '+${countBidHistory}"></p>

반복문

auctionResponseList라는 리스트 객체를 받아 왔을 때 처리 이렇게 처리할 수 있습니다.

<tr th:each="auction : ${auctionResponseList}">
	<td th:text="${auction.date}">상품 등록 날짜</td>
</tr>

a태그

"" 안에 ''를 사용해야 정상적으로 반영이 됩니다! 앞에 @를 붙이는것이 핵심입니다.

<a th:href="@{'https://www.aejeong.co.kr/product/'+${auction.auctionEntity.url}}"
               th:target="_blank">상품페이지 보기</a>

onClick

<a th:onclick="'window.open(\'/auction/history/'+${auction.auctionEntity.id}+'\',\'width=700px,height=800px,scrollbars=yes\')'"
               th:text="${auction.count}" style="color: blue;text-decoration: underline">경매 내역</a>

format

데이트 포맷도 사용 가능합니다! #temporals.format을 아래와 같이 사용하면 됩니다.

<td th:text="${#temporals.format(auction.historyEntity.createdDate,'yyyy-MM-dd HH:mm')}"></td>

저작자표시