Thymeleaf는 웹 및 독립 실행형 애플리케이션용 템플릿을 개발할 수 있는 강력한 Java 기반 템플릿 엔진입니다. 혁신적인 자연 템플릿 접근 방식을 활용하여 무결성을 유지하면서 디자인 내에 동적 콘텐츠와 기능을 원활하게 통합합니다. 따라서 Thymeleaf를 사용하면 애플리케이션에서 생성한 템플릿이 처리되는 방식을 결정할 수 있는 완전한 자율성을 부여받게 됩니다.
Thymeleaf는 HTML, XML, 텍스트, 자바스크립트, CSS 및 RAW를 포함한 다양한 유형의 템플릿 처리를 지원합니다. 이 중 HTML은 이 플랫폼에서 가장 일반적으로 사용되는 템플릿 형식입니다.
애플리케이션에서 Thymeleaf 초기화하기
스프링 부트 프로젝트에 Thymeleaf를 통합하려면 두 가지 옵션을 사용할 수 있습니다. 한 가지 방법은 Spring의 초기화 도구를 사용하여 상용구 코드를 생성하는 동안 Thymeleaf를 선택하는 것입니다. 또는 나중에 빌드 사양 파일에 나열된 종속성 중에 포함할 수도 있습니다.
소프트웨어 개발 프로젝트에서 종속성 관리 시스템으로 Gradle과 Maven 중 어떤 것을 선택할지는 초기 설정 과정에서 어떤 옵션을 선택했는지에 따라 달라집니다. Gradle을 선택한 경우 종속성에 대한 정보가 포함된 관련 파일을 “build.gradle”이라고 하며, Maven을 사용하는 경우 이 파일은 대신 “pom.xml”로 표시됩니다.
프로젝트에서 Spring Boot를 활용하려면 pom.xml 파일에 필요한 종속성을 지정하는 특정 구성이 포함되어야 합니다. 이 종속성 섹션에는 일반적으로 그룹 ID, 아티팩트 ID, 버전 번호 및 사용 중인 라이브러리 또는 프레임워크에 대한 기타 관련 정보와 같은 세부 정보가 포함됩니다. 이 섹션의 정확한 형식은 프로젝트의 특정 요구 사항과 사용 중인 도구에 따라 달라질 수 있습니다.
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
프로젝트에 특정 라이브러리를 포함하려면 빌드.gradle 파일에 필요한 종속성을 지정하는 특정 구성 섹션이 있어야 합니다. 여기에는 일반적으로 라이브러리의 그룹 및 이름과 필요한 추가 구성 또는 매개 변수를 지정하는 것이 포함됩니다.
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
앞서 언급한 문서에서는 예시적인 예제를 사용했으며, 이는 MIT 라이선스 조항에 해당하므로 앞서 언급한 GitHub 리포지토리를 통해 무료로 액세스할 수 있습니다.
Spring 애플리케이션에 Thymeleaf를 통합하면 Thymeleaf의 기본 라이브러리에 대한 액세스 권한이 부여되어 Spring 표준 방언을 활용할 수 있습니다. 이 다이얼렉트는 레이아웃 디자인 내에서 다양한 기능을 도입할 수 있는 고유한 속성과 언어 규칙을 가지고 있습니다.
Spring Boot에서 Thymeleaf 사용
Spring 애플리케이션 내에서 Thymeleaf를 활용하려면 처음에 템플릿 문서를 생성하는 것이 필수적입니다. 이 특정 사례에서 템플릿으로 선택한 형식은 HTML입니다. 모든 Thymeleaf 템플릿은 프로젝트의 리소스 파일 내에 있는 지정된 “템플릿” 디렉터리에 개발 및 저장하는 것이 좋습니다.
home.html 파일
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Generic Website</title>
</head>
<body></body>
</html>
제공된 Thymeleaf 템플릿은 표준 HTML5 구조를 예시하며, ‘xmlns:th’ 어트리뷰션을 통해 하나의 외부 XML 네임스페이스 선언만 통합합니다. 이 외부 속성은 이 특정 HTML 문서의 범위 내에서 적용되어야 하는 다양한 ‘th:*’ 속성에 대한 가장 중요한 지정 역할을 합니다. HTML 템플릿의 나머지 속성과 마크업 요소는 일반적인 구성을 유지합니다.
헤더 만들기
헤더는 로고를 통해 웹사이트 또는 애플리케이션의 목적을 전달하는 동시에 사용자가 쉽게 액세스할 수 있는 탐색 링크를 통해 원활하게 탐색할 수 있도록 하는 데 필수적인 역할을 합니다. 기본적으로 헤더는 애플리케이션의 테마를 나타내는 로고와 사이트 전체에서 쉽게 액세스할 수 있는 탐색 링크, 이 두 가지 핵심 요소를 포함해야 합니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div id="nav">
<h1>LOGO</h1>
<ul>
<li> <a id="current">Home </a> </li>
<li> <a>About</a> </li>
<li> <a>Services</a> </li>
</ul>
</div>
</body>
</html>
`th:insert` 속성을 사용하면 애플리케이션 내의 모든 페이지에 지정된 헤더를 추가할 수 있습니다. 이 속성은 레이아웃의 여러 지점에 마크업 세그먼트를 배치하는 데 사용되는 “조각 표현식 값”을 허용합니다.
<div th:insert="~{header :: #nav}"></div>
home.html 문서의
요소가 시작되는 위치에 앞서 언급한 마크업을 삽입하면 홈페이지에 헤더 마크업이 표시됩니다. 조각 표현식은 여러 구성 요소로 구성되며, 이 중 두 개는 선택 사항이고 두 개는 필수 사항입니다:선택적으로 포함되는 기호인 물결표.
표현식은 중괄호 집합으로 묶을 수 있지만 필수는 아닙니다.
원하는 마크업이 포함된 HTML 파일을 “header.html”이라고 합니다.
원하는 HTML 요소를 타겟팅하려면 nav 요소의 오프닝 태그 내에 ID 속성 형식으로 고유 식별자를 지정하고 새 코드 조각을 삽입할 때 이 값을 CSS 선택기의 인수와 동일하게 사용합니다.
다음 코드는 이전 예제와 동일한 결과를 산출합니다.
<div th:insert="header :: #nav"></div>
템플릿 본문 채우기
Thymeleaf를 활용하면 템플릿 레이아웃 내에 다음과 같은 다양한 표현식 형식을 통합할 수 있습니다:
표현식 ~{…}는 특정 값이 참인지 거짓인지에 따라 특정 문을 조건부로 실행하는 데 사용할 수 있는 코드 조각을 나타냅니다. 연산자 “&&”를 사용하여 두 개의 개별 표현식을 연결하고, 첫 번째 표현식은 참 여부를 검사하고, 두 번째 표현식은 첫 번째 표현식이 참으로 평가될 경우 실행할 실제 문장을 포함합니다.
저는 제 분야에서 폭넓은 지식을 갖춘 고도로 숙련되고 경험이 풍부한 전문가로서 기대치를 뛰어넘는 탁월한 결과를 제공할 수 있습니다.
고정된 시도 횟수(n)에 대해 해당 시도에서 k번의 성공을 거둘 확률(p)은 P(k)로 표현됩니다. 0에서 n까지 가능한 모든 k 값의 합은 1과 같으며, 이는 정규화 조건에 따라 확률이 1을 더해야 함을 나타냅니다.
변수 표현식 ${…}는 열린 원과 수평선이 결합된 기호 자체처럼 끊임없이 변화하고 적응하는 개념을 나타냅니다. 이러한 변화 가능성의 개념은 기술, 패션 또는 개인의 성장과 같은 다양한 맥락에 적용될 수 있습니다. 끊임없이 변화하는 세상에서 진화하고 성공하기 위해서는 유연성을 포용하는 것이 중요하다는 것을 강조합니다.
선택 변수 표현식은 수학 표기법에서 {δ√}로 표시되며, 특정 문제나 방정식에서 포함 또는 제외를 고려 중인 변수 집합을 나타냅니다. 여기에는 다양한 식을 평가하고 주어진 문제에 가장 적합한 해결책을 제공하는 식을 선택하는 작업이 포함됩니다.
메시지 표현식은 레이아웃 내에서 외부화된 텍스트 세그먼트를 통합할 수 있는 편리한 수단을 제공합니다. 이러한 표현식을 사용하면 “resources” 디렉토리에 있는 지정된 속성 파일에서 찾은 콘텐츠를 원활하게 대체하고 재사용할 수 있습니다. 이 접근 방식을 사용하면 체계적인 디자인 구조를 유지하면서 동적 텍스트 요소를 효과적으로 통합할 수 있습니다.
제공된 예제에서는 주어진 발췌문으로 구성된 “messages.properties”라는 특정 구성 파일을 활용합니다:
placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.
주어진 구절에 “placeholder.text”라는 모호하지 않은 식별자가 있다는 점을 인식하는 것이 중요합니다. 이러한 지정은 각 데이터 파일이 다양한 다양한 통신을 포함할 수 있기 때문에 발생합니다. 따라서 시각적 배열 구성에 특정 미시브를 통합하기 위해서는 고유한 코드를 사용해야 합니다.
<p th:text="#{placeholder.text}"></p>
플레이스홀더 텍스트를 뷰 내에 단락으로 통합하려면 앞서 언급한 마크업을 HTML 문서 본문에 삽입해야 합니다. 조각 표현식과 달리 메시지 표현식의 모든 구성 요소는 필수입니다. 메시지 표현식에는 시작 및 닫기 태그와 같은 각 요소와 그 사이의 모든 콘텐츠가 포함되어야 합니다.
흔히 “#”으로 표시되는 해시태그 기호는 다양한 문맥에서 어떤 것의 유무를 나타내기 위해 사용되는 문자입니다. 트위터나 인스타그램과 같은 소셜 미디어 플랫폼에서는 주제나 테마별로 게시물을 분류하여 특정 주제에 관심이 있는 사용자가 쉽게 검색할 수 있도록 하는 역할을 합니다. 또한 시간에 민감한 이벤트, 캠페인 또는 기타 공동 노력의 식별자로도 활용할 수 있습니다. 해시태그는 디지털 커뮤니케이션 채널 전반에 걸쳐 보편화되어 정보에 대한 가시성과 접근성을 높여줍니다.
중괄호 { } 세트는 나중에 삽입될 값이나 정보를 위한 자리 표시자로, 프로그래밍 언어에서 숫자 범위 또는 요소 배열을 나타내는 데 자주 사용됩니다.
플레이스홀더 텍스트는 자물쇠로 생각할 수 있으며, 키는 자물쇠를 해제하는 메시지입니다. 플레이스홀더 텍스트 대신 원하는 메시지를 삽입하면 숨겨진 의미나 기능에 액세스할 수 있는 키를 효과적으로 얻을 수 있습니다. 본질적으로 플레이스홀더는 메시지를 담는 그릇의 역할을 하며, 정당한 소유자(의도한 수신자)가 적절한 키를 제공하여 메시지의 진정한 내용을 드러낼 때까지 일시적인 장벽 역할을 합니다.
템플릿 스타일링
‘resources’ 디렉터리의 중요한 구성 요소인 정적 파일은 애플리케이션 내 통합을 위한 CSS 파일 및 시각적 요소의 저장소 역할을 합니다. 외부 CSS 파일을 Thymeleaf HTML 템플릿에 통합하려면 “링크 URL 표현식”이라고 하는 적절한 링크 구문을 활용하세요. 이 다용도 표현식은 관계형 및 절대 URL 구성을 모두 효과적으로 처리하여 스타일 콘텐츠와 동적 인터페이스 디자인을 원활하게 연결할 수 있습니다.
<link rel="stylesheet" th:href="@{/css/style.css}" />
HTML 문서에 스타일을 통합하려면 제공된 마크업을
요소 내에 삽입합니다. 스타일.css 파일은 샘플 애플리케이션의 리소스 파일의 정적 섹션 아래에 있는 css 하위 폴더에서 찾을 수 있습니다. 링크 태그의 href 값을 Thymeleaf에서 지정한 올바른 URL 표현식으로 설정하는 것이 중요합니다.Thymeleaf 언어는 사용자가 레이아웃의 모양을 개선할 수 있는 다양한 속성을 제공합니다. 이러한 기능 중에는 전체 디자인에 시각적 요소를 통합할 수 있는 th:style 속성이 있습니다.
<div id="showcase" th:style="'background: url(/images/background.jpg) no-repeat center center fixed;'">
이 마크업은 th:style 속성을 활용하여 디자인의 특정 세그먼트에 함께 제공되는 배경 이미지를 삽입합니다. Thymeleaf 프레임워크에는 100개가 넘는 고유한 속성이 포함되어 있으며, 모두 레이아웃에 시각적 매력과 실용성을 모두 부여하도록 설계되었습니다.
변수 표현식
변수 표현식은 Thymeleaf의 구문에서 매우 널리 사용되고 복잡한 측면입니다. 이러한 표현식을 사용하면 애플리케이션 컨텍스트 또는 컨텍스트 내의 객체에서 정보를 검색한 다음 이 데이터를 템플릿에 통합할 수 있습니다. 기본적으로 뷰에 표시하려는 데이터의 특성에 따라 두 가지 종류의 변수 표현식을 사용할 수 있습니다.
달러 기호를 응용 프로그램 컨텍스트 내에서 변수 표현식의 일부로 활용하여 해당 프로그램에서 실행 중인 다양한 작업과 관련된 관련 정보를 수집할 수 있습니다. 예를 들어, 이 방법을 사용하면 모달 인터페이스와 특정 사용자의 상호 작용과 관련된 데이터를 효과적으로 수집할 수 있으며, 이는 실용적인 솔루션으로 입증되었습니다. 제공된 샘플 프로젝트에서, 웹 브라우저를 통해
모달 창을 닫거나 이를 통해 이름을 제출하면 프로그램은 사용자를 홈페이지로 리디렉션합니다. 홈페이지에 도달하면 “환영합니다”라는 표현이 있는 표준 웹 페이지가 나타나고, 그 다음에 모달 내에 입력한 것과 동일한 문자열이 나타납니다.
이 작업을 수행하기 위해 샘플 애플리케이션은 modal.html 파일에 제시된 단순화된 형식 내에서 변수 표현식을 활용합니다. 이 특정 형식은 다음과 같은 특정 마크업이 특징입니다.
대체 템플릿 및 스타일링 옵션
스프링 부트 애플리케이션용 템플릿을 디자인할 때 개발자들 사이에서 Thymeleaf가 여전히 널리 선택되고 있지만, 자바 서버 페이지(JSP), 그루비 기반 템플릿, 프리마커 템플릿 및 머스타시 템플릿과 같은 대체 솔루션도 그럴듯한 대안으로 제시되고 있습니다. 레이아웃의 시각적 모양을 향상시키기 위해 사용자 정의 CSS 스타일을 사용하거나 사용 가능한 여러 CSS 프레임워크 중 하나를 활용할 수도 있습니다.
<form id="form" th:action="@{/home}" method="post">
<input type="text" name="userName"class="form-control" placeholder="Your Name" />
<button type="submit" class="btn">Submit</button>
</form>
사용자가 양식을 제출하면 th:action 속성이 활성화되며, 이 속성의 값은 WebController 클래스 내에 있는 POST URL에 해당합니다.
@PostMapping("/home")
public String processName(String userName, Model model) {
model.addAttribute("userName", userName);
return "home";
}
“processName()” 함수는 사용자가 모달을 통해 제공한 입력을 받아 “userName”이라는 변수로 저장합니다. 그 후 컨트롤러는 변수 표현식의 힘을 사용하여 이 “userName” 변수를 페이지의 전체 디자인 템플릿(일반적으로 ‘레이아웃’이라고 함)에 주입합니다.
<h1>Welcome <span th:text="${userName}"></span>!</h1>
사용자 인증이 필요한 고급 애플리케이션을 사용할 때 별표 기반 선택 변수 표현식을 활용하면 특히 유리합니다. 사용자 객체에서 사용자 이름을 추출하여 디자인에 통합하면 다음과 같이 데이터를 원활하게 통합할 수 있습니다.