본문 바로가기

DEV/Thymeleaf9

[Thymeleaf] th:fragment을 사용한 레이아웃 레이아웃 사용 이유만약 100개의 페이지에 똑같은 header와 footer가 들어갈 경우 각각의 HTML마다 똑같은 header와 footer를 추가하는 것은 상당히 비효율적이고 유지보수면에서도 좋지 않다. 그래서 반복되는 화면이 있어 HTML 코드를 줄일 때 레이아웃을 적용하면 상당히 효과적이다.    템플릿 조각템플릿 조각은 공통으로 적용할 부분을 조각조각으로 만들어 필요한 공통의 부분들에 가져다 쓰는 방식이다. 가 있는 태그는 다른 곳에 포함되는 코드 조각으로 코드 조각을 사용할 때는 조각 표현식 ~{...}를 사용한다. Controller@Controller@RequestMapping("/template")public class TemplateController { @GetMapping(.. 2024. 12. 3.
[Thymeleaf] 타임리프 에서 null과 빈 문자열 확인하기 기존의 null값과 빈 문자열(" ") 확인 기존 방식은 null값과 빈 문자열을 각각 확인하였습니다. #strings. isEmpty를 통한 null값과 빈 문자열(" ") 확인 #strings. isEmpty(확인할 값) 의 형태로 null값과 빈 문자열(" ")을 한 번에 확인할 수 있습니다. 타임리프의 isEmpty 함수는 전달되는 매개변수가 null값인지, 그리고 빈 문자열(" ")인지 확인하여 맞다면 true 아니라면 false를 리턴합니다. 아래의 코드를 통해 자세한 사용 예시를 확인할 수 있습니다. #strings. isEmpty를 통하여 매개변수인 player.num의 값이 null인지 빈 문자열(" ")인지 확인합니다. #strings. isEmpty앞에 not을 붙인 th:if="${.. 2023. 1. 31.
[Thymeleaf] 동적으로 클래스 지정, 추가하기(th:class / th:classappend) Thymeleaf의 th:class와 th:classappend를 사용하여 동적으로 class를 지정, 추가할 수 있습니다. th:class th:class를 이용하여, 동적으로 class를 지정할 수 있습니다. Text aaa Text bbb Text ccc //player == Y Text aaa Text bbb Text ccc //player != Y Text aaa Text bbb Text ccc th:classappend th:classappend를 이용하여, 기존 class에 동적으로 class 값을 추가할 수 있습니다. Text 1 Text 2 //player == Y Text 1 Text 2 //player != Y Text 1 Text 2 2023. 1. 17.
[Thymeleaf] 커스텀 데이터 속성(th:attr) Thymeleaf에서의 커스텀 데이터 사용 JQuery를 통해 커스텀데이터를 지정할 수 있듯이, 타임리프의 th:attr을 사용하여 데이터를 지정할 수 있습니다. [JQuery] 사용자 데이터, 커스텀 데이터(custom data - data-xx의 형태) 커스텀 데이터 HTML5에서는 해당 요소에 사용자가 임의로 지정한 속성값을 활용할 수 있습니다. 이를 커스텀 데이터 속성(custom data attributes)이라고 부르며, data- 뒤에 사용할 변수명을 입력한 뒤 hajoung56.tistory.com th:attr 사용 방법 th:attr = "data-지정하고싶은 데이터 명 = 해당 데이터 값" 위와 같은 형태로 사용할 수 있습니다. 자세한 사용 예시는 아래와 같습니다. 위 코드와 같이 타.. 2023. 1. 5.
[Thymeleaf] 타임리프 날짜 형식 포맷(String to Date / Date to Date) String형식을 Date형식으로 변환하는 경우 Date형식을 Date형식으로 변환하는 경우 그외 포맷형식과 날짜 관련 메소드 thymeleaf 공식문서를 통하여 확인이 가능합니다. https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#dates 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 eve.. 2022. 11. 25.
[Thymeleaf] 타임리프 주요 기능 유틸리티 - Utility Objects(Strings, Numbers, Objects, Arrays, Lists, Maps, Messages, Dates, Calendars) 아래 링크와 같이 이전에는 타임리프 정의와 사용방법에 기본적인 기능들을 간단히 설명하였지만, 이번 글에서 주요 유틸리티를 안내합니다. [Thymeleaf] 정의와 사용방법 Thymeleaf의 정의와 사용하는 방법에 대해서 포스팅합니다. 1. Thymeleaf란? Thymeleaf는 비교적 최근에 만들어진 템플릿 엔진이자, 서버사이드 자바 템플릿의 한 종류입니다. 템플릿 엔진이란 동적 컨텐 hajoung56.tistory.com 1. Strings 문법 설명 ${#strings.toString(obj)} Object obj를 문자열로 변환 (Null-safe) ${#strings.isEmpty(str)} ${#strings.arrayIsEmpty(strArray)} ${#strings.listIsEmpty.. 2022. 8. 12.
[Thymeleaf] 숫자 구분자(콤마) 표시 - #numbers.formatInteger / #numbers.formatDecimal 타임리프 템플릿을 사용하는 와중에 가격의 천(1000) 단위마다 컴마를 붙여야 할 경우가 있었습니다. 이 외에 타임리프를 사용하다 보면 값을 특정 포맷에 맞춰 표기해야 할 경우가 있습니다. #numbers.formatInteger(표시해야 할 값, 최소 자릿수) 최소 자릿수는 표시해야 할 값의 자리수보다 많을경우 0으로 채워집니다. 예를 들어, 표시해야할 값이 123과 같이 세 자리 숫자이고 최소 자릿수가 5로 지정이 되면 00123으로 출력이 됩니다. 또한, 소수점은 표시되지 않고 버려집니다. #numbers.formatInteger(표시해야 할 값, 최소 자릿수, 구분자) 첫 번째의 #numbers.formatInteger(표시해야 할 값, 최소 자릿수) 와는 다른 점이 구분자가 추가되었다는 점입니다.. 2022. 5. 10.
[Thymeleaf] 셀렉트 박스에서의 th:selected 사용법 Thymeleaf 템플릿을 사용하여 select box의 option항목을 나열하는 와중에, 기존의 저장된 값이 있으면 해당 옵션 속성에 selected를 추가하는 과정이 있었습니다. 기존 방법 처음에 아래와 같이 작업을 진행 하였습니다. 서버단에서 받아오는 result값의 joinSize를 1부터 10까지 반복하는 num값과 비교해, 동일하면 selected 속성을 추가하려는 의도였습니다. 하지만, 의도대로 되지 않았습니다. th:selected 사용 이후 검색을 통해 타임리프는 th:selected를 사용해 selected 속성을 추가한다는 점을 알았습니다. 또한 th:selected를 통해 비교를 할 경우 th:selected="${num} == ${result.joinSize}"와 같이 ${비교대.. 2022. 5. 10.
[Thymeleaf] 정의와 사용방법 1. Thymeleaf란? Thymeleaf는 비교적 최근에 만들어진 템플릿 엔진이자, 서버사이드 자바 템플릿의 한 종류입니다. 템플릿 엔진이란 동적 컨텐츠를 생성하는 방법입니다. 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 결합하여 결과 문서를 출력하는 소프트웨어를 말하며 view code(html)와 data logic code(DB connection)를 분리해주는 기능을 합니다. 스프링 MVC에서 주로 동적인 view를 만드는데 사용합니다. 그렇다고 view만 만드는 데 사용하지는 않으며 다양한 용도로 사용이 가능합니다. 템플릿 엔진에는 서버사이드, 클라이언트 사이드 이렇게 두 가지가 있습니다. 서버사이드 템플릿 엔진 - 서버에서 가져온 데이터를 미리 정의된 템플릿에 넣어 html을 그린 .. 2022. 2. 23.
반응형

티스토리툴바