타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공함
자바스크립트 인라인 기능을 적용하는 방법
<script th:inline="javascript">
Controller 추가
@GetMapping("/javascript")
public String javascript(Model model){
model.addAttribute("user", new User("userA", 10));
addUsers(model);
return "/basic/javascript";
}
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>
실행 결과
개발자 도구 화면
: 자바스크립트 인라인 사용 전
- 객체를 넣으면 user.toString()이 호출됨
- 자바스크립트 인라인 사용 전의 경우 HTML elements처럼 처리가 됨
자바스크립트 인라인 사용 후
- 자바스크립트 인라인 사용 후 -> 객체를 json형태로 바꿔줌
텍스트 렌더링
- var username = [[${user.username}]];
- 인라인 사용 전 -> var username = userA;
- 인라인 사용 후 -> var username = "userA";
- 인라인 사용 전 렌더링 결과를 보면 userA라는 변수 이름이 그대로 남아있음. 타임리프 입장에서는 정확하게 렌더링하는 것이지만 개발자가 기대한 것은 다음과 같은 "userA"라는 문자일 것.
- 결과적으로, userA가 변수명으로 상요되어서 자바스크립트 오류가 발생
- 인라인 사용 후 렌더링 결과를 보면 문자 타입인 경우 "를 포함해줌. 추가로 자바스크립트에서 문제가 될 수 있는 문자가 포함되어있으면 이스케이프 처리도 해줌
자바스크립트 내추럴 템플릿
타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공함. 자바스크립트 인라인 기능을 사용하면 주석을 활용해서 이 기능을 사용할 수 있음
- var username2= /*[[${user.username}]]*/ "test username";
- 인라인 사용 전 -> var username2 = /*userA*/ "test username";
- 인라인 사용 후 -> var usrename="userA"
- 인라인 사용 전 결과를 보면 정말 순수하게 그대로 해석을 함. = 내추럴 템플릿 기능이 동작하지 않고, 렌더링 내용이 주석처리되어버림
- 인라인 사용 후 결과를 보면 주석 부분이 제거되고, 기대한 "userA"가 정확하게 적용됨
객체
타임리프의 자바스크립트 인라인 기능을 사용하면 객체를 JSON으로 자동 변환해줌
- var user = [[${user}]]
- 인라인 사용 전 -> var user = BasicController.User(username=userA, age=10);
- 인라인 사용 후 -> var user = {"username":"userA", "age":10};
- 인라인 사용 전은 객체의 toString()이 호출된 모습
- 인라인 사용 후는 객체를 JSON형태로 반환해줌
자바스크립트 인라인 each
자바스크립트 인라인은 each(반복)을 지원
javascript.html
<!--자바스크르비트 인라인 each-->
<script th:inline="javascript">
[# th:each="user, stat:${users}"]
var user[[${stat.count}]]=[[${user}]];
[/]
</script>
결과
'SpringMVC > [스프링MVC 2편] 백엔드 웹 개발 활용 기술' 카테고리의 다른 글
| [Thymeleaf 스프링 통합] 타임리프 스프링 통합 (0) | 2025.09.25 |
|---|---|
| [Thymeleaf 기본 기능] 템플릿 조각과 레이아웃 (0) | 2025.09.25 |
| [Thymeleaf 기본 기능] 반복, 조건부 평가, 주석, 블록 (0) | 2025.09.24 |
| [Thymeleaf 기본 기능] URL 링크, Literals, 연산, 속성 값 설정 (0) | 2025.09.24 |
| [Thymeleaf 기본 기능] 소개 및 텍스트, SpringEL, 객체, 유틸리티 객체 및 날짜 (0) | 2025.09.24 |