티스토리 뷰
타임리프, Thymeleaf
특징
1. 서버 사이트 HTML 렌더링, SSR
- 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용
2. 네츄럴 템플릿 : 순수 HTML을 유지하며 뷰 템플릿으로 사용할 수 있는 특징
- 순수 HTML을 최대한 유지하는 특징
- 웹 브라우저에서 파일을 직접 열어도 확인 가능하며, 서버를 통해 동적으로 변경된 결과 확인 가능
3. 스프링 통합 지원
- 스프링과 통합하여 여러 기능을 지원한다.
선언
<html xmlns:th = "http://www.thymeleaf.org">
텍스트 - text, utext
텍스트를 출력하는 기능 - <span th:text="${data}">
태그 없이 출력하는 기능 - [[${data}]]
HTML 엔티티
웹 브라우저는 "<" 를 태그의 시작으로 인식한다. 이를 문자로 표현하는 방법이 HTML 엔티티
HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프 라 한다.
이를 사용하지 않으려면? -> 언이스케이프 : utext=${data} , [(${data})]
+) escape를 사용하지 않으면 HTML이 정상 렌더링되지 않을 수 있다. 필요시에만 unescape를 사용하자!
변수 - SpringEL
변수를 사용할 때 사용하는 변수 표현식
Object
- user.username : user의 username을 프로퍼티 접근
- user.getUsername() user['username'] : 위와 같음
- user.getUsername() user.getUsername() : user의 getUsername() 을 직접 호출
List
- users[0].username : List에서 첫 번째 회원을 찾고 username 프로퍼티 접근 list.get(0).getUsername()
- users[0]['username'] : 위와 같음
- users[0].getUsername() : List에서 첫 번째 회원을 찾고 메서드 직접 호출
Map
- userMap['userA'].username : Map에서 userA를 찾고, username 프로퍼티 접근 ->map.get("userA").getUsername()
- userMap['userA']['username'] : 위와 같음
- userMap['userA'].getUsername() : Map에서 userA를 찾고 메서드 직접 호출
타임리프에서 지역변수 선언
th:with="선언" -> 선언된 태그 내부에서만 사용가능하다.
타임리프에가 제공하는 기본 객체
+) locale을 제외한 나머지는 스프링 부트 3.0부터 제공하지 않는다.
편의 객체
HTTP 요청 파라미터 접근을 request.getParameter가 아닌 param.paramData로 접근 가능
세션과 스프링 빈에 접근을 도와주는 객체들도 있다.
유틸리티 객체와 날짜
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#expression-utility-objects
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 even plain text. The main goal of Thymeleaf is to provide a
www.thymeleaf.org
필요할 때 찾아 사용하도록 하자
-> 메세지 국제화, URL 이스케이프 지원 등..
URL 링크
링크는 @{}를 사용한다.
쿼리 파라미터를 추가하고 싶다면 경로 뒤에 ()를 추가하여 파라미터를 추가한다.
path variable또한 () 안에 변수를 설정하면 {}의 변수와 치환된다.
리터럴
소스 코드 상에서 고정된 값 - 문자, 숫자, 불린, null
리터럴은 '' 로 감싸줘야 한다. th:text="'hello'"
+)작은 따음표를 생략할 수 있는 토큰이 있다. -> 나는 일단 '로 감싸주자. 배우고있으니까
리터럴 대체 문법 - | |
연산
자바의 연산과 다르지 않다. 하지만 HTML 엔티티를 사용하는 부분만 주의하자. ( < , > .. )
> == > , gt == gt HTML 엔티티를 주의하자
속성 값 설정
HTML의 <input type="text" name="mock" />, name은 속성
여기에 <input type="text" name="mock" th:name="mock1" />을 하면 속성이 대체된다.
기존 속성이 있으면 대체, 없으면 추가한다.
th:attrappend = "class= ' ~ ' " -> 기존 class 속성에 ~를 뒤에 추가한다. append
th:attrprepend = "class='~' " -> 기존 class 속성에 ~를 앞에 추가한다. prepend
th:classapend=" " -> class속성에 띄어쓰기를 해주면서 추가한다.
checked 속성은 값에 상관없이 있다면 체크 표시가 된다. checked = "false" 도 체크
이를 th:checked="true", th:checked="false"로 알기 쉽게 처리할 수 있다.
반복
반복은 th:each를 사용한다.
th:each = " collection, collection의 상태를 알 수 있는 정보 : ${data} "
userStat으로 여러 기타 정보를 얻을 수 있다.
조건부 평가
if, unless(if의 반대, if not)
th:if="${user.age lt 20}" -> if(user.age <20) 이라는 뜻
th:unless="${user.age ge 20}" -> unless(user.age>=20)이라는 뜻
if, unless의 경우 조건을 충족시키지 못한다면 태그 자체가 사라진다. <span>태그 자체가 출력 x
switch
th:switch="${user.age}", th:case -> switch문의 case와 같다.
주석
html 주석 <!-- 내용 -->
타임리프 파서 주석 <!--/* */--> , 타임리프가 인식하여 아예 출력 x
타임리프 프로토타입 주석 <!--/*/ /*/-->, 파일을 웹 브라우저로 열면 안보이고 렌더링할때만 보임
블록
<th:block> , 타임리프의 자체 태그
div 태그를 두 개 each돌려야 할 때 사용되거나 한다. 렌더링 시 제거된다.
자바스크립트 인라인
자바스크립트에서 타임리프를 편리하게 사용할 수 있는 기능 제공
선언 <script th:inline="javascript">
값을 대입할 때 타임리프 변수 형식으로 표현할 수 있고,
내추럴 템플릿을 사용할 수 있다.
그리고 객체의 값을 json 형태로 렌더링해준다.
템플릿 조각
공통 영역(상단, 하단, 좌측 카테고리)을 해결하기 위한 기능
템플릿 레이아웃
템플릿 조각이 이미 만들어진 것을 가져와서 사용하는 것이라면,
템플릿 레이아웃은 큰 틀에 내가 필요한 것을 넣어 사용하는 방식이다.
본 포스팅은 인프런 강의 김영한님의
[ 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 ] 을 수강하며 작성한 내용입니다.