TimeLeap이 아니라 Thymeleaf이다.
타임리프 특징
서버사이드에서 HTML을 동적으로 렌더링하는 용도로 사용되는데, 서버사이드 랜더링 기술중 하나이다.
네추럴 템플릿
타임리프틑 순수 HTML을 최대한 유지한다. 타임리프로 작성한 파일은 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다.
타임리프 선언
<html xmlns:th="http://www.thymeleaf.org">안써도 된다고는 한다.
text, utext
HTML entity
브라우저는 <를 태그의 시작으로 인식한다. 이런걸 문자로 표현하는것을 html 엔티티라고 한다. 이러한 특수문자를 변경하는것을 이스케이프라고하고 타임리프는 기본적으로 이를 제공한다.
이를 해결하기 위해서는 utext를 해야한다.
utext, 혹은 [(...)]은 이스케이프 처리를 하지 않는다.
하지만 기본적으로 이스케이프 처리가 베이스이다.
사용자들이 다양한 태그를 사용하면, html 화면이 깨지기 떄문이다.
SpringEL
변수처리이다.
변수표현식 ${...}을 이용한다.
SpringEL을 사용하면 여러가지 방식으로 유저에 접근해서 정보를 얻어낼 수 있다.
기본객체
자주 사용되는 param의 경우 직접 접근해서 꺼내오는게 가능하다. 혹은 SpringBean에 직접 접근하는것도 가능하다.
<li>Request Parameter = <span th:text="${param.paramData}"></span></li>
<li>session = <span th:text="${session.sessionData}"></span></li>
<li>spring bean = <span th:text="${@helloBean.hello('Spring!')}"></span></li>유틸리티 객체와 날짜
<span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></
span>타임리프에서 자바8 날짜를 쓰려면 추가 라이브러리가 필요한데 스프링부트 타임리프에서는 자동으로 추가하고 통합한다.
유틸리티 날짜와 객체는 필요할 때 공식문서보고 찾아서 쓰면 된다.
URL 링크
1. 가장 단순하게 표현
<li><a th:href="@{/hello}">basic url</a></li>2. 파라미터 사용
<li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello queryhttp://localhost:8080/hello?param1=data1¶m2=data2
이러한 구조의 파라미터 형식의 url이 나온다.
3. param을 url화 하기
<li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
http://localhost:8080/hello/data1/data2 같은 url이 나온다.
4. 두개를 혼합해 사용
<li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>http://localhost:8080/hello/data1?param2=data2
같이 바인딩 된 경우는 url 경로로 들어가고 나머지는 쿼리파라미터로 들어간다.
리터럴
소스코드상에서 고정된 값을 의미한다.
String str = "abc";에서 abc가 리터럴이다.
타임리프에서 문자리터럴은 항상 '로 감싸야한다
하지만 이건 너무 귀찮다. 따라서 공백없이 쭉 이어나가면, 하나의 의미있는 토큰이라고 인정을 한다.
규칙
A-Z , a-z , 0-9 , [] , . , - , _
hello world 같은 경우는 띄어쓰기가 있어서
"'hello world'"가 되어야한다.
연산
기존의 연산과 다르지는 않지만, HTML 언어인점을 고려해야한다.
속성값 설정
th:태그에 속성을 지정하는 방식으로 동작한다.
<h1>속성 설정</h1>
<input type="text" name="mock" th:name="userA" />이를 최종적으로 랜더링하면 th:name이 name을 대체한다. 만약 기존 속성이 없다면 새로 만든다.
Checked의 경우, checked만 있어도 알아서 true값을 부여해준다. 따라서 checked = false같은걸 써도 알아서 true처리 되지만, th:checked를 쓰면 ture, false가 작동한다.
