인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다.
자바스크립트 인라인
타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.
자바스크립트 인라인 기능은 다음과 같이 적용하면 된다.
<script th:inline="javascript">우선 컨트롤러와 뷰를 확인해 봅시다!
@GetMapping("/javascript")
public String javascript(Model model){
List<User> list = new ArrayList<>();
list.add(new User("UserA", 10));
list.add(new User("UserB", 20));
list.add(new User("UserC", 30));
model.addAttribute("users", list);
model.addAttribute("user", new User("UserA", 10));
return "basic/javascript";
}<!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>
<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
[# th:each="user, stat : ${users}"]
var user[[${stat.count}]] = [[${user}]];
[/]
</script>
</body>
</html>결과는 다음과 같습니다.
● 텍스트 렌더링
결과 창에서 F12 를 눌러 개발자도구를 열어보면 다음과 같은 경고를 확인할 수 있습니다.
UserA가 정의되지 않았다는 경고를 보여주고 있습니다.
이는 var username = UserA; 부분에서 오류가 있기 때문입니다. 문법이 오류이기 때문이죠!
var username = [[${user.username}]]; // 틀린 문법
var username = "[[${user.username}]]";문자이기 때문에 두번째 줄 처럼 ""로 묶어줘야 정상적으로 작동하게 됩니다.
이번에는 인라인을 적용한 후의 코드를 통해 비교해 봅시다.
- 인라인 사용 전 var username = userA;
- 인라인 사용 후 var username = "userA";
인라인이 적용된 후의 코드는 기존 코드와 같이 다음처럼 사용했다.
<script th:inline="javascript">
var username = [[${user.username}]];
</script>기존과 똑같이 사용했지만, 인라인 사용후 렌더링 결과를 보면 문자 타입인 경우 "를 포함해준다.
추가로자바스크립트에서문제가될 수 있는 문자가 포함되어 있으면 이스케이프 처리도 해준다. 예) " \"
● 네추럴 템플릿
타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공합니다.
자바스크립트 인라인 기능을 사용하면 주석을 활용해서 이 기능을 사용할 수 있다.
var username2 = /*[[${user.username}]]*/ "test username";인라인 사용 전 var username2 = /*userA*/ "test username";
인라인 사용 후 var username2 = "userA";
인라인 사용 전 결과를 보면 정말 순수하게 그대로 해석을 해버렸다.
따라서 내추럴 템플릿 기능이 동작하지 않고, 심지어 렌더링 내용이 주석처리 되어 버린다.
하지만 인라인 적용 결과 기대한 "UserA"가 정상적으로 적용된다.
● 객체
인라인을 사용하지 않으면 객체의 toString() 메서드가 호출되어 문자가 출력된다.
하지만 인라인 기능을 사용하면 자동으로 JSON으로 변환해 준다.
var user = [[${user}]];
- 인라인 사용 전 var user = BasicController.User(username=userA, age=10);
- 인라인 사용 후 var user = {"username":"userA","age":10};
'BackEnd > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 레이아웃 (0) | 2022.01.30 |
|---|---|
| [Thymeleaf] 템플릿 조각 (0) | 2022.01.29 |
| [Thymeleaf] 블록 (0) | 2022.01.28 |
| [Thymeleaf] 주석 (0) | 2022.01.28 |
| [Thymeleaf] 조건부 평가 (0) | 2022.01.27 |
댓글