티스토리 뷰
728x90
타임리프를 사용하다보면 자바 컨트롤러에서 던져주는 model 객체 내 값들을 JS에서 쓰고 싶은 욕구가 생긴다.
왜냐하면 Js에서 어떤 작업을 해야 하는데 필요한 값들이 페이지 내에 존재하는 경우가 많고, 이를 HTML 태그에서 갈무리를 해서 써야 한다. 그러면 document나 Jquery를 이용해서 HTML 내에 값을 가져와서 사용한다.
HTML 내 태그에 값을 숨겨 놓고 그것을 가져다 쓰는 작업이 꽤나 귀찮다.
애초에 JS 변수 내에 값이 있으면 해결되는 문제가 아닐까?
그렇게 하는 방법이 있다.
package com.example.kg;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class KgController {
@GetMapping("/hello")
public String hello(Model model) {
model.addAttribute("Hello", "hello");
return "/kg";
}
}그냥 단순한 예제이니 model에 넣은 값만 확인하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div th:text="${Hello}"></div>
</body>
<script th:inline="javascript" type="text/javascript">
const hello = [[${Hello}]];
</script>
<script type="text/javascript" th:src="@{/kg.js}"></script>
</html>위처럼 inline에 넣어두면 된다.
여기서 th:inline을 사용하면 js 변수 내에 [[${ }]]로 가능하다.
이게 왜 좋냐면 th:inline을 사용하지 않으면 [[${}]] 양 옆에 /* */를 사용해야 한다.
그리고 외부 Js에서는 이렇게 사용할 수가 없다.
그런 이유는 html을 렌더링? 서버에서 템플릿 작업을 해주면서 템플릿 언어에 해당하는 문법을 보고 작업을 해준다.
그렇기 때문에 html에 외부 js 파일이 내장되어 있지 않으니 정상적으로 변수에 값이 들어가지 않는 것이다.
그리고 th:inline이 없으면 템플릿 엔진이 이를 작업해주지 않는 것 같다.
? 그런데 /* */는 로 해주면 어떻게 읽어서 작업해주는건지 신기 하다.
중요한건 th:inline을 하고 /* */ 없이 JS에 값을 쓸 수 있다는 사실이다.
반응형
'코딩 관련 > JAVA' 카테고리의 다른 글
| 웹 최적화 캐시 Etag, Cache-Control (1) | 2024.08.28 |
|---|---|
| Spring Boot @Transactional, Proxy, Self-invocation (0) | 2024.03.26 |
| Spring Boot Security 5 - Oauth2.0 구글 로그인 - 2 - 작성 중 (0) | 2022.09.23 |
| Spring Boot Security 5 - Oauth2.0 구글 로그인 (HTTP BASIC 탐방) - 1 (0) | 2022.09.17 |
| 스프링 시큐리티 Oauth2.0 트위치 적용 (0) | 2022.07.13 |