Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- Servlet
- AOP
- 스프링 핵심 기능
- java
- Greedy
- spring
- transaction
- db
- 백준
- QueryDSL
- SpringBoot
- 알고리즘
- pointcut
- 인프런
- 스프링
- kotlin
- Thymeleaf
- 김영한
- jpa
- springdatajpa
- Exception
- 그리디
- http
- Android
- 스프링 핵심 원리
- Spring Boot
- JPQL
- Proxy
- JDBC
- 자바
Archives
- Today
- Total
개발자되기 프로젝트
[Thymeleaf] JavaScript inline 본문
1. JAVA Script Inline
- Thymeleaf는 Javascript에서 Thymeleaf를 편리하게 사용할 수 있도록 해당 기능을 제공
- <script th:inline="jacascript">
- Thymeleaf가 해당 영역안에서 javaScript를 위한 모드로 작동됨.
- 일반적으로 Thymeleaf에서 JavaScript로 전달하기가 쉽지 않음..
- 이를 도와줌.
2. Contorller
@GetMapping("/javascript")
public String javascript(Model model){
model.addAttribute("user", new User("UserA", 10));
addUsers(model);
return "basic/javascript";
}
3. javascript.html
<!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>
4. javascript inline 적용 전
- text
-
text의 경우 "[[${user.username}]]"로 JavaScript에 전달되어야 함..var username = [[${user.username}]];
- 랜더링 후 : 흠.."UserA"로 넘어가지 않아서 에러..
-
var username = UserA;
-
- Javascript natural template
-
자바스크립트는 "test username" 부분을//자바스크립트 내추럴 템플릿 var username2 = /*[[${user.username}]]*/ "test username";
- 랜더링 후 : /* , */ , "test username"이 남아있음.
-
//자바스크립트 내추럴 템플릿 var username2 = /*UserA*/ "test username";
-
- 객체
-
[[${user}]]는 user.toString()이 반영됨.//객체 var user = [[${user}]];
- 랜더링 후 : toString() 그대로 넘어감.
-
//객체 var user = BasicController.User(username=UserA, age=10);
-
5. javascript inline 적용 후
<!-- 자바스크립트 인라인 사용 후 -->
<script>
var username = "UserA";
var age = 10;
//자바스크립트 내추럴 템플릿
var username2 = "UserA";
//객체
var user = {"username":"UserA","age":10};
</script>
- 문자의 경우 ""큰따옴표 처리 해줌.
- natural template : "test username" 삭제되고 [[${user.username}]]이 반영됨.
- 객체 : json으로 바꿔줌.
6. 정리
6.1텍스트 렌더링 : 큰따옴표 처리 해줌.
- var username = [[${user.username}]];
- 인라인 사용 전 var username = userA;
- 인라인 사용 후 var username = "userA";
- 인라인 사용 전 렌더링 결과를 보면 userA 라는 변수 이름이 그대로 남아있다.
- 타임리프 입장에서는 정확하게 렌더링 한 것이지만 사실 "userA"라는 문자를 기대함..
- 결과적으로 userA가 변수명으로 사용되어서 자바스크립트 오류가 발생한다.
- 다음으로 나오는 숫자 age의 경우에는 " 가 필요 없기 때문에 정상 렌더링 된다.
- 인라인 사용 후 렌더링 결과를 보면 문자 타입인 경우 " 를 포함해준다.
- 추가로 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리도 해준다.
- 예) " \"
6.2 자바스크립트 내추럴 템플릿
- 타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다. 자바스크립트 인라인
- 기능을 사용하면 주석을 활용해서 이 기능을 사용할 수 있다.
- var username2 = /*[[${user.username}]]*/ "test username";
- 인라인 사용 전 var username2 = /*userA*/ "test username";
- 인라인 사용 후 var username2 = "userA";
- 인라인 사용 전 결과를 보면 정말 순수하게 그대로 해석을 해버렸다.
- 따라서 내추럴 템플릿 기능이 동작하지 않고, 심지어 렌더링 내용이 주석처리 되어 버린다.
- 인라인 사용 후 결과를 보면 주석 부분이 제거되고, 기대한 "userA"가 정확하게 적용된다.
6.3 객체
- 타임리프의 자바스크립트 인라인 기능을 사용하면 객체를 JSON으로 자동으로 변환해준다.
- var user = [[${user}]];
- 인라인 사용 전 var user = BasicController.User(username=userA, age=10);
- 인라인 사용 후 var user = {"username":"userA","age":10};
- 인라인 사용 전은 객체의 toString()이 호출된 값이다.
- 인라인 사용 후는 객체를 JSON으로 변환해준다.
7. Javascript inline Each
- [# th:each="user, stat : ${users}"]
<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
[# th:each="user, stat : ${users}"]
var user[[${stat.count}]] = [[${user}]];
[/]
</script>
8. GitHub : 210919 JavaScript Inline
'인프런 > [인프런] 스프링 MVC 2' 카테고리의 다른 글
[Thymeleaf] Template layout 1 (0) | 2021.09.19 |
---|---|
[Thymeleaf] 템플릿 조각 (0) | 2021.09.19 |
[Thymeleaf] block, <ht:block> (0) | 2021.09.19 |
[Thymeleaf] 주석 (0) | 2021.09.19 |
[Thymeleaf] 조건 부 평가, if, unless, switch, case (0) | 2021.09.19 |
Comments