📍 서론

JSP는 예전 키보드 쇼핑몰 프로젝트에서 썻던 템플릿 엔진이고,
mustache는 null값 처리와 프론트 단에서 불편한 점이 조금 있어서,
타임리프를 사용해보았다.

 

📍 Thymeleaf (타임리프) 사용하기

Gradle - build.gradle

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

Maven - pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

위 설정을 추가 후 빌드하면 application.properties에 아래 코드가 자동으로 추가된다.

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

 

📍 Thymeleaf 문법

대부분의 html 속성을  th:xxx 로 변경할 수 있다.

ex: th:text="${변수명}"

표현 설명 예제
@{ ... } URL 링크 표현식 th:href="@{/css/bootstrap.min.css}"
th:href="@{/{itemId}/edit(itemId=${item.id})}"
| ... | 리터럴 대체 th:text="|Hi ${user.name}!|"
(= th:text="'Hi '+${user.name}+'!'"
${ ... } 변수 th:text=${user.name}
th:each 반복 출력 <tr th:each="item: ${items}">
  <td th:text="${item.price}">100</td>
</tr>
*{ ... } 선택 변수 <tr th:object="${items}">
  <td th:text="*{price}">100</td>
</tr>
#{ ... } 메시지. properties 같은 외부 자원에서 코드에 해당하는 문자열 get. th:text="#{member.register}"

 

📍 Thymeleaf Layout

Header, Footer와 같이 공통적으로 반복되는 코드를 화면마다 작성하지 않고 레이아웃 처리를 통해 일괄 적용한다

 

Gradle - build.gradle

implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'

 

fragments/header.html - 상단

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <th:block th:fragment="headerFragment">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <!-- 제이쿼리 -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <!-- CSS -->
      <link rel="stylesheet" href="../css/index.css">
      <link rel="stylesheet" href="../css/lostark.css">
      <!-- Boxicons CSS -->
      <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
      <title>Minhyeok Personal Web</title>
    </head>
  </th:block>
</html>

 

fragments/footer.html - 하단

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

 

layouts/default_layout.html - 기본 레이아웃 (메뉴바포함)

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<th:block th:replace="fragments/header :: headerFragment"></th:block>
<body>
<nav class="sidebar">
    <header>
        <div class="image-text">
            <span class="image">
                <img src="../resources/logo.png" alt="logo">
            </span>
            <div class="text header-text">
                <span class="name">Minhyeok</span>
                <span class="profession">Personal Web</span>
            </div>
        </div>
        <i class="bx bx-chevron-right toggle"></i>
    </header>
    <div class="menu-bar">
        <div class="menu">
            <li class="search-box">
                <i class="bx bx-search icon"></i>
                <input id="igdb_id" type="text" placeholder="IGDB ID Search..." onkeyup="enterKey();"/>
            </li>
            <ul class="menu-links">
                <li class="nav-link">
                    <a href="/lostark" class="nav-link-item">
                        <img class="img-icon" src="../resources/lostark_icon.jpeg" alt="lostark_icon">
                        <span class="text nav-text">로스트아크</span>
                    </a>
                </li>
                <div class="nav-dropdown">
                    <li>
                        <a href="/lostark/character" class="nav-link-item">
                            <i class='bx bx-right-arrow icon'></i>
                            <span class="text nav-text">내 캐릭터</span>
                        </a>
                    </li>
                </div>

                <li class="nav-link">
                    <a href="/restaurant">
                        <i class='bx bx-food-menu icon'></i>
                        <span class="text nav-text">점심식사</span>
                    </a>
                </li>
                <div class="nav-dropdown">
                    <li>
                        <a href="/restaurant/seohyunData" class="nav-link-item">
                            <i class='bx bx-data icon'></i>
                            <span class="text nav-text">서현 데이터</span>
                        </a>
                    </li>
                </div>
                <li class="nav-link">
                    <a href="/IGDB">
                        <i class="bx bx-bar-chart-alt-2 icon"></i>
                        <span class="text nav-text">IGDB</span>
                    </a>
                </li>
                <li class="nav-link">
                    <a href="">
                        <i class="bx bx-bell icon"></i>
                        <span class="text nav-text">Notifications</span>
                    </a>
                </li>
                <li class="nav-link">
                    <a href="">
                        <i class="bx bx-pie-chart-alt icon"></i>
                        <span class="text nav-text">Analytics</span>
                    </a>
                </li>
                <li class="nav-link">
                    <a href="">
                        <i class="bx bx-heart icon"></i>
                        <span class="text nav-text">Likes</span>
                    </a>
                </li>
                <li class="nav-link">
                    <a href="">
                        <i class='bx bx-data icon'></i>
                        <span class="text nav-text">Datas</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="bottom-content">
            <!--
            <li class="">
                <a href="">
                    <i class="bx bx-log-out icon"></i>
                    <span class="text nav-text">Logout</span>
                </a>
            </li>
            -->
            <li class="mode">
                <div class="moon-sun">
                    <i class="bx bx-moon icon moon"></i>
                    <i class="bx bx-sun icon sun"></i>
                </div>
                <span class="mode-text text">Dark Mode</span>
                <div class="toggle-switch">
                    <span class="switch"></span>
                </div>
            </li>
        </div>
    </div>
</nav>
<section class="home">
    <th:block layout:fragment="content"></th:block>
</section>
</body>
<th:block th:replace="fragments/footer :: footerFragment"></th:block>
<script src="../js/index.js"></script>
<script src="../js/lostark.js"></script>
</html>

 

본문 적용

lostark/lostarkCharacter.html - 로스트아크 오픈 Api를 이용하여 대표캐릭터를 가져와서 출력하는 영역

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="layouts/default_layout">
<th:block layout:fragment="content">
    <div class="text">로스트아크 > 내 캐릭터(${mainServer} - ${mainCharacter})</div>
    <div class="lostark wrap">
        <div class="lostark-character">
            <div th:each="character : ${characters}" class="lostark-character-wrap">
                <div class="lostark-character-image">
                    <img th:src="${character.characterImage}">
                </div>
                <div class="lostark-character-text">
                    <div class="lostark-character-textbox" style="background: #695CFE;">
                        <p th:text="${character.characterName}"></p>
                        <p>캐릭터 클래스 : <span th:text="${character.characterClassName}"></span></p>
                        <p>아이템 레벨 : <span th:text="${character.itemMaxLevel}"></span></p>
                    </div>
                    <div class="lostark-character-textbox" style="background: #FA8072;">
                        <p>카오스 던전 : <span th:text="${character.chaosName}"></span></p>
                        <p>가디언 토벌 : <span th:text="${character.guardianName}"></span></p>
                        <p>카오스 던전 휴게 : 개발중</p>
                        <p>가디언 토벌 휴게 : 개발중</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</th:block>
</html>

 

기존 jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@include file="../common/header.jsp" %>
<div class="text">로스트아크 > 내 캐릭터(${mainServer} - ${mainCharacter})</div>
<div class="lostark wrap">
    <div class="lostark-character">
        <c:forEach var="character" items="${characters}">
        <div class="lostark-character-wrap">
            <div class="lostark-character-image">
                <img src="${character.characterImage}">
            </div>
            <div class="lostark-character-text">
                <div class="lostark-character-textbox" style="background: #695CFE;">
                    <p>${character.characterName}</p>
                    <p>캐릭터 클래스 : ${character.characterClassName}</p>
                    <p>아이템 레벨 : ${character.itemMaxLevel}</p>
                </div>
                <div class="lostark-character-textbox" style="background: #FA8072;">
                    <p>카오스 던전 : ${character.chaosName}</p>
                    <p>가디언 토벌 : ${character.guardianName}</p>
                    <p>카오스 던전 휴게 : 개발중</p>
                    <p>가디언 토벌 휴게 : 개발중</p>
                </div>
            </div>
        </div>
        </c:forEach>
    </div>
</div>

<%@include file="../common/footer.jsp" %>

 

결과는 똑같이 출력된다

 

이제... 다 바꾸면된다...

 

 

 

 

 

참고

 

[Thymeleaf] 타임리프란? (+기본적인 사용법)

간단한 CRUD를 구현하다가 org.thymeleaf.exceptions.TemplateProcessingException 에러를 너무 많이 겪어서 타임리프에 대해 잠깐 공부하기로 했다. (위 에러는 타임리프 문법을 잘못 쓰는 등의 이유로 특정 url

yeonyeon.tistory.com

 

 

[Spring Boot] Thymeleaf 반복되는 헤더, 푸터 레이아웃 적용하기

[Spring Boot/게시판 만들기] - 스프링 부트 프로젝트 생성하기 위의 과정을 통해 진행되는 프로젝트입니다. 📌 개발환경 IntelliJ Community, SpringBoot, Java 1.8, Gradle, Jar, Thymeleaf, JPA, MariaDB Thymeleaf Layout Hea

hnev.tistory.com

 

저작자표시

티스토리툴바