Thymeleaf
1.[Thymeleaf] 참고 내용
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술이번 Thymeleaf를 공부하기 위해 인프런에서 구매한 김영한 님의 스프링 MVC 2편 강의를 보며 공부하여 정리한 내용입니다. 김영한 님의 강의는 위 사진에서 보이 듯, 별점 5개의 아주 높은 만족도를 자랑하는 강의입
2.[Thymeleaf] 타임리프 소개
서버 사이드 HTML 렌더링(SSR)백엔드 서버에서 HTML을 동적으로 렌더링하는 용도네츄럴 템플릿(Natural Template)순수 HTML을 최대한 유지JSP의 경우, JSP코드와 HTML코드가 섞여 가독성이 좋지 않다.순수 HTML을 유지하면서, 뷰 템플릿도 사
3.[Thymeleaf] text, utext, escape, unescape, html엔티티
컨트롤러에서 Model에 값을 담아 뷰로 넘기게 되는데, 이때 아래와 같이 활용할 수 있다.모델에 담은 데이터를 html 태그를 활용하여 출력할 때는 th:text 를 이용하고 아래와 같이 사용할 수 있다.모델에 담은 직접 데이터를 html 태그없이 출력하고 싶을 때는
4.[Thymeleaf] SpringEL, 지역변수 with
JSP의 EL과 기능이 유사하다. Model에서 객체(Object), List, Map 등의 형태로 넘겨주었을 때, 해당 객체에 접근하여 값을 꺼내올 수 있도록 한다.아래 설명을 진행하기 위해서 아래와 같은 객체가 있다고 가정한다.컨트롤러에서 Model에 객체를 담아
5.[Thymeleaf] 기본객체 / session, request, response, servletContext, locale
타임리프에서는 기본 객체를 쉽게 활용할 수 있도록 기능을 제공한다. 따라서 각 객체들이 제공하는 메서드를 알면 다양하게 활용할 수 있다.타임리프에서 request 객체에 접근하려면 \`${html<span th:text="${그렇다면 request 객체에서 req
6.[Thymeleaf] 유틸리티 객체
타임리프는 문자, 숫자, 날짜, URI 등을 편리하게 다룰 수 있는 다양한 유틸리티 객체들을 제공한다.Thymeleaf Documents(https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html\#ids
7.[Thymeleaf] URL
타임리프에서 URL을 생성할 때는 @{....} 를 사용한다.아래 예제로는 Model에 아래와 같이 값이 넘어갔다고 가정합니다.localhost:8080/urllocalhost:8080/url?param1=data1& param2=data2& 표시 뒤에 영어가 붙으니
8.[Thymeleaf] 리터럴, 리터럴대체
타임리프에는 아래와 같이 4개의 리터럴이 있다.타임리프에서 문자열 리터럴은 항상 '' 사이에 표현해야한다.문자열을 항상 '' 로 감싸서 표현하는 것은 귀찮기 때문에, 공백없이 이어진다면 하나의 문자열로 인식해서 ''를 생략할 수 있다.❗️다만, 아래에 해당하는 문자만
9.[Thymeleaf] 연산, Elvis 연산자, No-Operation
12850true비교연산 시에는 HTML엔티티에 주의하여 사용한다.\> : gt< : lt\>= : ge<= : le! : not== : eq!= : neq, neJava의 조건식과 비슷하다. ? 앞의 조건이 맞다면 첫 번째에 해당하는 짝수, 맞지 않다면 두
10.[Thymeleaf] 속성 값 설정
타임리프는 HTML 태그에 th: 를 이용해 속성을 지정한다. 이를 이용하면 기존 속성을 대체하고, 기존 속성이 없다면 새롭게 만들어 적용한다.위와 같이 기존의 name 속성이 있을 때, th:name을 활용해서 설정해주면 기존의 name은 사라지고 타임리프의 th:n
11.[Thymeleaf] 반복문 each, 반복 상태 Stat
타임리프에서 반복은 th:each 를 활용해서 구현할 수 있다.반복 시, 오른쪽에 있는 컬렉션 객체(users)의 값을 하나씩 꺼내서 왼쪽 변수(user)에 담아서 태그를 반복실행하게 된다.넘겨줄 수 있는 컬렉션 객체는 List뿐만 아니라 java.util.Iterab
12.[Thymeleaf] 조건부 평가(if, unless, switch)
타임리프를 활용하여 Model로부터 넘어온 값의 조건에 따라 html 출력 여부를 지정할 수 있다. 아래 예제를 통해서 확인해볼 수 있다. 조건에 해당하지 않는 태그는 아예 렌더링하지 않는다.users로 넘어오는 Model의 값(컬렉션)의 값에 따라서 반복문을 돌게 된
13.[Thymeleaf] 주석
타임리프는 html을 최대한 해치지 않고 활용할 수 있는 기술이기 때문에 html에서 제공하는 주석도 당연히 제공이 된다.<!-- --> 을 이용한다.당연하게도 <!-- --> 사이에 들어간 부분은 출력이 되지 않는다.하지만, 웹 브라우저에서 페이지 소스 보
14.[Thymeleaf] 블록(block)
대부분의 타임리프 기능은 html 태그가 가진 속성을 쉽게 활용할 수 있도록 되어있지만, block은 html에 없는 타임리프가 가진 유일한 기능이다. 대표적인 예시로는 아래와 같다.코드를 보면 th:each 를 통해 컬렉션 반복문을 진행한다. 원래라면 아래 두 가지
15.[Thymeleaf] 자바스크립트 인라인
타임리프를 자바스크립트 내에서 사용할 수 있게 해주고, 손쉽게 사용할 수 있도록 처리를 해주는 기능이다. <script th:inline="javascript"> 태그를 작성하여 사용할 수 있다.Model Attribute에 user란 이름으로 new User("
16.[Thymeleaf] 템플릿 조각
명사 조각, 파편동사 산산히 부수다부서지다, 해체되다하다웹 페이지를 만들 때, 페이지마다 중복되는 부분이 있다. 그런 부분을 조각별로 만들어두고, 타임리프를 통해 조각조각 불러서 사용할 수 있도록 타임리프는 템플릿 조각 기능을 지원한다.예를 들면, 헤더, 푸터 등의 부
17.[Thymeleaf] 템플릿 레이아웃 개념
이전에 사용했던 템플릿 조각을 적극적으로 활용한 것이 템플릿 레이아웃이라고 할 수 있다. 이전 것을 이해했다면 템플릿 레이아웃도 쉽게 이해할 수 있다.템플릿 레이아웃의 경우, 모든 페이지에 공통으로 활용해야 할 부분이 있고 일부 페이지에서만 특별하게 추가해야하는 경우가
18.[Thyemleaf] 템플릿 레이아웃 심화
이전 글에서 배운 템플릿 코드조각을 적극 활용하는 템플릿 레이아웃을 배울 수 있었는데, 이번에는 템플릿 레이아웃을 적극 활용하여 어떻게 처리할 수 있는지 예제를 통해서 알아보자.이전 글의 예제에서는 <head>에 들어갈 내용들이 모여있는 파일을 현재 페이지의 &l
19.[thymeleaf] form
타임리프를 이용한 form 태그 활용 타임리프에서는 form 태그 를 효율적으로 사용할 수 있도록 도와주는 기능이 내장되어 있다. 이를 활용하기 위해서는 컨트롤러에서 모델로 객체를 넘겨주어 이를 받아서 활용할 수가 있는데 이때 이 객체를 th:object 를 이용해 활
20.[thymeleaf] 단일 체크박스
html input 타입 중 checkbox는 태생적으로 가지는 한계가 있다. 그것은 바로 체크가 되지 않았을 때 값이 아예 넘어오지 않는다는 것. 개발자는 체크시에는true로 미체크시에는 false로 값을 받는다면 좋겠지만 checkbox는 그렇게 호락호락한 친구가
21.[thymeleaf] 멀티 체크박스, 라디오 버튼
체크박스를 이용해서 여러 개 항목을 체크해서 활용해보자. @ModelAttribute 이 기능은 Spring에서 제공해주는 기능으로 이 기능을 활용해 등록해두면 자동으로 컨트롤러의 모든 메서드의 Model에 추가해주는 기능이다. 사진처럼 해두면 모든 메서드에 mod
22.[thymeleaf] 타임리프 ENUM 접근 (라디오 버튼)
타임리프에서 enum 타입을 이용해서 무언가 값을 처리하고 싶다. 예를 들면 어떤 상품의 카테고리와 같은.. 이런 경우에 enum을 처리할 수 있는데 방법은 두 가지가 있다.앞에서 활용한 스프링 기능을 이용해 아래와 같이 처리해서 enum의 값들을 반환해서 모델에 담아