블로그 목적 :
Spring Boot 에서 가장 많이 쓰이는 타임리프(Thymeleaf)에 대해서 공부및 정리후 나만의 노하우와 지식을 공유한다.
블로그 요약
· 타임리프(Thymeleaf)에 대해서 알아본다.
· 타임리프(Thymeleaf)관련 아래내용을 알아본다.
- 변수 표현식 : ${...}
- 메시지 표현식 : #{ ...}
- 링크 URL 표현식: @{...}
- 선택 변수 표현식: *{... }
- 프래그먼트 표현식: ~{...}
- 리터럴 치환 : | |
블로그 상세 내용
우선, 타임리프(Thymeleaf)에 대해서 정리해보면 아래와 같다.
타임리프(Thymeleaf) 는 웹 및 독립 실행형 환경 모두를 위한 최신 서버 측 Java 템플릿 엔진입니다.
즉, 다양한 서버 템플릿 엔진 중에 하나라고 머릿속에 넣어두시면 되고요..
홈페이지에서, Thymeleaf의 주요 목표는 템플릿을 만드는 우아하고 유지 관리가 쉬운 방법을 제공하는 것이라고 하네요..
이를 달성하기 위해 디자인 프로토타입으로 사용되는 템플릿에 영향을 미치지 않는 방식으로 논리를 템플릿 파일에 주입하는 Natural Templates 의 개념을 기반으로 하고있고요..
이를 통해 디자인 커뮤니케이션이 향상되고 디자인 팀과 개발 팀 간의 격차가 해소된다고 하네요..
그런데말입니다...
보통 Spring 진영에서 열심히(?) 밀고 있다고하나, 개인전인 소견(?)으로, 직접 체험해보고 있는데요..문법이 다소 어려운면이 있는것 같긴하네요..
- 전공서적을 찾아보면, 보통은 그래서인지, 높은 허들로 느껴지는 경우가 많다고 하네요...
현재(2022년3월5일기준) 안정화된 버전은 3.0.15 이고요..Java SE 6 이상 이 필요합니다.
그리고 출시 날짜는 2022년 1월 31일이고요..
프로젝트에 Thymeleaf를 포함하는 가장 쉬운 방법은 Maven 또는 Gradle과 같은 빌드 시스템을 사용하고 Central Repository에 있는 Thymeleaf 아티팩트를 사용하는 것입니다.
특히, 프로젝트에 필요한 Thymeleaf 종속성을 추가하기만 하면 됩니다. (간단하죠 ?)
-maven
-gradle
implementation 'org.thymeleaf:thymeleaf:3.0.15.RELEASE'
참고로, 저는 C++ 이 주 개발 업무인데요..
기존에 그냥 개인적으로 토이프로젝트(?)를 하면서 Spring Boot 를 공부하고 있었고요..
요근래 드디어 신규 프로젝트도 소소하게 참여하게 되었습니다. 아직 배워야할게 너무많은데 배울수록 더욱 Spring Boot 는 신세계네요 ㅋㅋ
C++ 경우는 대부분이 직접 개발할 경우가 많은데요..
Spring Boot 는 거의 자동생성(?) 정말 비즈니스 로직만 구현할 수 있게 잘 최적화 된것 같습니다.
그래서 항상 Spring Boot 가 대세 였나 봅니다..
그리고 간혹 모든 기업들의 채용내용을 쭈우욱 볼때도 있는데요...봐도 C++은 보이지 않고(간혹보입니다 ㅋㅋ)
거의 대다수가 Spring Boot ;;; 채용이네요..ㅋ
Spring Boot 관련해서는 기본적으로 마스터를 해야될것 같고 목표로 잡고 있습니다. (C++ 개발과 병행해서요..)
아무튼 다시 정신차리고(?) 돌아와서..설명드리면..
타임리프는 HTML 태그에 속성으로 템플릿 기능을 사용하는 방식이고요..
- 즉, (th:*) 형식으로 속성을 HTML 태그에 추가해서 값이나 처리등을 해당 페이지에 구현하는 방식입니다.
참고로, 타임리프 이외에 다양한 서버 템플릿이 존재하는데요...
- 예를들면, JSP, Freemarker, Velocity, Mustach 등등이 존재함.
그런데 말입니다. 템플릿 엔진의 종류는 보통 클라이언트 템플릿과 서버 템플릿 엔진으로 구분할 수 도 있는데요..
우선, 서버 템플릿 엔진은, 서버에서 Java 코드로 문자열을 구성한후 해당 문자열을 HTML 로 변환해서 브라우저로 전달하는 방식을 말하고요...
반면에, 클라이언트 템플릿 엔진은, 말그대로 서버에서는 Json or Xml 형식의 데이터만 전달하고 클라이언트에 조립하는 방식을 말합니다.
- 즉, Javascript 는 브라우저 위에서 작동하며, 해당 Javascript 코드가 실행되는 곳은 서버가 아닌 브라우저입니다.
그럼, 타임리프(Thymeleaf)에 대해서 아래 기본적인 내용을 차근차근 알아볼까요?
우선, 오늘은 기초적사용으로 알아볼 아래 6가지에 대해서 소개하려고 하는데요..
- 변수 표현식 : ${...}
- 메시지 표현식 : #{ ...}
- 링크 URL 표현식: @{...}
- 선택 변수 표현식: *{... }
- 프래그먼트 표현식: ~{...}
- 리터럴 치환 : | |
예제를 통해서, Spring 진영이 밀고 있는 타임리프 매력(?)에 살짝쿵 빠져보자고요..!
우선, 제가 좋아하는 인텔리제이를 사용해서 간단한 Spring Boot 프로젝트와 컨트롤러를 생성하고요..
package com.example.thymeleaf_part01.controller;
import com.example.thymeleaf_part01.controller.model.DevOceanForm;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Slf4j
@Controller
@RequestMapping(value="/api/v1/test")
public class ThymeleafTestController {
@GetMapping(value= "/part01")
public String index(@RequestParam String message, Model model) {
DevOceanForm devOceanForm = new DevOceanForm("magic",1);
model.addAttribute("message", message);
model.addAttribute("devOceanForm",devOceanForm);
return "index";
}
}그리고, 간단한 index.html / footer.html 페이지를 생성 후 마음껏 타임리프의 기초적인 6가지 내용을 코딩해 보겠습니다.
우선 아래는 index.html 전체 예제 코드입니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 1. 변수 표현식 : ${...} -->
<!-- OGNL(Object-Graph Navigation Language) -->
<p th:text="${new java.util.Date().toString()}"></p>
<!-- Param -->
<p th:text="'message=' + ${message}"></p>
<!-- UtilObject -->
<p th:text="${#strings.toUpperCase('devocean magic')}"></p>
<!-- 2. 메시지식 표현식 : #{...} -->
<!-- /src/main/resources 디렉토리 아래, messages.properties 추가 -->
<h3 th:text="#{msg.nickname}"></h3>
<p th:text="#{msg.rank}"></p>
<!-- 3. 링크 URL 표현식 : @{...} -->
<a th:href="@{'/devocean/' + ${message}}">magicworld</a>
<!-- 4. 선택 변수 표현식 : *{...} -->
<div th:object="${devOceanForm}">
<p th:text="*{nickname}"></p>
<p th:text="*{rank}"></p>
</div>
<!-- 5. 프래그먼트 표현식 : ~{...} -->
<div th:insert="~{/footer :: footerFragment}"></div>
<!-- 6. 리터럴 치환 : || -->
<div th:object="${devOceanForm}">
<p th:text="'nickname : ' + *{nickname} + ', rank : ' + *{rank}"></p>
<p th:text="|nickname : *{nickname}, rank : *{rank}|"></p>
</div>
</body>
</html>아래는 프래그먼트 표현식을 실습하기위한 footer.html 내용입니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="footerFragment">
<p> COPYRIGHT..magic!!</p>
</footer>
</body>
</html>
첫번째로, 변수 표현식 예제를 보면요....
- OGNL, Parameter, Util Object 등등을 다뤄봤고요..
실행결과
두번째로, 메시지식 표현식 예제를 보면요..
- resources 아래, messages.properties 추가 해서 다뤄본예제입니다.
실행결과
세번째로, 링크 URL 표현식 예제를 다뤄봤고요..
실행결과
네번째로, 선택 변수 표현식 또한 다뤄봤습니다.
실행결과
다섯번째로, 프래그먼트 표현식을 다뤄봤고요..
실행결과
마지막으로 문자열연결과 리터럴 치환이라고... 보통은 (+) 기호를 사용해서 텍스트를 이어주곤하는데요...리터럴 치환을 활용하면 텍스트를 이어주는게 조금 편리하게됩니다.
실행결과
아래는 전체 실행결과입니다. (정상적으로 원하는 결과가 웹페이지에서 출력되네요..)
결론
하나, 타임리프(Thymeleaf) 는 웹 및 독립 실행형 환경 모두를 위한 최신 서버 측 Java 템플릿 엔진입니다.
- 즉, 다양한 서버 템플릿 엔진 중에 하나라고 머릿속에 넣어두시면 되고요..
둘, Thymeleaf의 주요 목표는 템플릿을 만드는 우아하고 유지 관리가 쉬운 방법을 제공하는 것이라고 하네요..
셋, 오늘은 기초적사용으로 알아볼 아래 6가지에 대해서 알아봤습니다. 감사합니다.
- 변수 표현식 : ${...}
- 메시지 표현식 : #{ ...}
- 링크 URL 표현식: @{...}
- 선택 변수 표현식: *{... }
- 프래그먼트 표현식: ~{...}
- 리터럴 치환 : | |
오늘도 마지막까지 제 글을 끝까지 읽어주셔서 진심으로 감사드리고, 제 글이 조금이라도 여러분의 각자의 삶을 살아가시는데 도움이 되셨길 기원합니다.
앞으로도 더욱 좋은 블로그를 남기는 제가 되도록 노력하겠습니다.
그리고, 제 글을 읽으시면 말이 됩니다.
항상 말에는 반드시 삶을 움직이는 힘이 있습니다.
제가 열심히 정성스럽게 정리한 저만의 지식과 1일 1블로그하는 제 블로그에 담긴 글들을 통해서,
여러분들의 삶과 운명을 반드시 조각하고 움직이시길 기원합니다.
이상입니다. 감사합니다.