728x90
@GetMapping("/javascript")
public String javascript(Model model){
model.addAttribute("user", new User("userA\"A\"", 10));
addUsers(model);
return "basic/javascript";
}
private void addUsers(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);
}<!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>- 텍스트 렌더링
- var username = [[${user.username}]];
- 인라인 사용 전 -> var username = userA;
- 인라인 사용 후 -> var username = "userA";
- 인라인 사용 전 렌더링 결과를 보면 userA라는 변수 이름이 그대로 남아있다. 타임리프 입장에서는 정확하게 렌더링 한 것이지만 아마 개발자가 기대한 것은 다음과 같은 "userA"라는 문자일 것이다. 결과적으로 userA가 변수명으로 사용되어서 자바스크립트 오류가 발생한다. 다음으로 나오는 숫자 age의 경우에는 " 가 필요 없기 때문에 정상 렌더링 된다.
- 인라인 사용 후 렌더링 결과를 보면 문자 타입인 경우 "를 포함해준다. 추가로 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리도 해준다. 예) " \"
- var username = [[${user.username}]];
- 자바스크립트 내추럴 템플릿
- var username2 = /*[[${user.username}]]*/ "test username";
- 인라인 사용 전 -> var username2 = /*userA*/ "test username";
- 인라인 사용 후 -> var username2 = "userA";
- 인라인 사용 후 결과를 보면 주석 부분이 제거되고, 기대한 "userA"가 정확하게 적용된다.
- var username2 = /*[[${user.username}]]*/ "test username";
- 객체
- 타임리프의 자바스크립트 인라인 기능을 사용하면 객체를 JSON으로 자동으로 변환해준다.
- var user = [[${user}]];
- 인라인 사용 전 -> var user = BasicController.User(username=userA, age=10);
- 인라인 사용 후 -> var user = {"username":"userA","age":10};
- 인라인 사용 전은 객체의 toString()이 호출된 값이다.
- 인라인 사용 후는 객체를 JSON으로 변환해준다.
- 자바스크립트 인라인 each
[# th:each="user, stat : ${users}"] var user[[${stat.count}]] = [[${user}]]; [/]
728x90
'스프링 MVC 2편(백엔드 웹 개발 활용 기술)' 카테고리의 다른 글
| Ch01. 타임리프(기본 기능) - 템플릿 레이아웃 (0) | 2022.03.10 |
|---|---|
| Ch01. 타임리프(기본 기능) - 템플릿 조각 (0) | 2022.03.10 |
| Ch01. 타임리프(기본 기능) - 블록 (0) | 2022.03.10 |
| Ch01. 타임리프(기본 기능) - 주석 (0) | 2022.03.10 |
| Ch01. 타임리프(기본 기능) - 조건부 평가 (0) | 2022.03.10 |