주석
-
HTML 주석
- 자바스크립트 표준 HTML 주석은 타임리프가 렌더링 하지않고 그대로 남겨둠.
-
타임리프 파서 주석
- 타임리프의 진짜 주석 -> 렌더링시 주석 부분을 제거
-
타임리프 프로토타입 주석
- HTML 파일을 웹 브라우저에서 그대로열면 웹브라우저가 렌더링을 하지않는다.
- 타임리프 렌더링을 거치게되면 이부분은 정상 렌더링되서 출력이된다.
타임리프 주석 차이
웹으로 그냥 파일을 열었을때는 주석으로 나오는 모습
실행시켜서 타임리프 렌더링했을 때 페이지 원본 모습
직접 실행해서 보니 확실하게 와닿는 차이가 보인다.
블록
th:block 은 HTML 태그가 아닌 타임리프의 유일한 자체 태그
렌더링 시에는 th:block은 사라짐
<th:block th:each="user : ${users}">
<div>
사용자 이름1 <span th:text="${user.username}"></span>
사용자 나이1 <span th:text="${user.age}"></span>
</div>
<div>
요약 <span th:text="${user.username} + ' / ' + ${user.age}"></span>
</div>
</th:block>th:each 만으로 사용하기 어려울 때 사용된다.
- 태그 안에 속성으로 기능을 정의해서 사용되는데 위와 같이 애매하게 하나로 처리하기 힘들 때 사용된다.
자바스크립트 인라인
-
자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공
-
자바스크립트 인라인 기능은 다음 과 같이 적용
-
<script th:inline="javascript"> </script>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 자바스크립트 인라인 사용 전 -->
<script>
var username = [[${user.username}]];
var age = [[${user.age}]];
//자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username";
//객체
var user = [[${user}]];
</script>
<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
var username = [[${user.username}]];
var age = [[${user.age}]];
//자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username";
//객체
var user = [[${user}]];
</script>
</body>
</html>
렌더링된 페이지 원본
인라인을 사용하지 않은 경우
- userA라는 변수이름이 그대로 나오게 되어서 문자가 아닌 변수명으로 사용되어 자바스크립트 오류가 발생한다.
- 문자일경우 "" 로 감싸줘야함.
인라인을 사용후 렌더링의 경우
- 문자 타입의 경우 " " 를 포함시켜서 문자로 처리해준다.
자바스크립트 내추럴 템플릿
인라인을 적어준 경우 -> 이 곳은 자바스크립트 영역인 것을 인지해서 타임리프가 자바스크립트가 잘 사용될 수 있게 지원.
- 타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공.
- 자바스크립트 인라인 기능을 사용시 주석을 활용해 이기능 사용가능.
//자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username";위의 렌더링된 페이지 원본에서 확인하기를
- 이부분이 인라인 사용전에는 그대로 해석이되고 렌더링 내용이 주석으로 처리된다.
- 인라인 사용 후에는 결과의 경우 주석부분은 제거되고 , 기대한 결과인 "userA" 가 정확하게 적용됨.
객체
- 타임리프의 자바스크립트 인라인 기능을 사용시 객체를 JSON 자동으로 변환해줌.
- 인라인 사용전에는 toString()이 호출된 값이 나옴
- 인라인 사용후는 객체를 JSON 으로 변환 해준다.
자바스크립트 인라인 each
<script th:inline="javascript">
[# th:each="user, stat : ${users}"]
var user[[${stat.count}]] = [[${user}]];
[/]
</script>가끔 쓰는 경우가 있을 수 있어서 알고있으면 좋다.
자바스크립트 단에서는 인라인을 사용해서 타임리프에서 자바스크립트 지원을 잘 받게 하자.
열심히하자