인프런 커뮤니티 질문&답변
작성한 질문수
thymeleaf에서 자바스크립트 인라인을 사용할 때 질문있습니다.
22.06.24 16:25 작성
·
4.5K
2
html 내에서 <script th:inline="javascript"></script> 태그를 이용하는 것이 아니라, 자바스크립트 파일을 static 에 있는 외부로 분리하는 경우에 어떻게 하면 변수를 사용할 수 있나요?
예를 들어 static에 js라는 경로를 만들고 그 안에 test.js라는 외부 자바스크립트 파일을 html 내에서 사용하는 경우에
<script th:inline="javascript" th:src="@{/js/test.js}"></script>와 같이 할 수 있습니다.
그런데 이 경우에 앞에서 사용한 변수인
var username = [[${user.username}]];
var age = [[${user.age}]];
등등을 사용할 수가 없습니다. 어떻게 하면 이 문제를 해결할 수 있나요?
답변 1
0
2022. 06. 28. 13:40
안녕하세요, Taejun Kim 님! 공식 서포터즈 codesweaver 입니다.
부득이 하게 외부 스크립트에 백엔드 값을 전달해야 한다면
스크립트 선언 순서를 조절하여 이용하는 방법등을 생각할 수 있습니다.
방법1. 아래와 같이 사용할 값을 스크립트 전역에 넣어놓고, script.js 파일에서 사용하는 방법
<script>
const username = [[${...}]]
<script>
<script src="some/script.js"></script>
방법2. HTML Form input에 값 넣어놓고 사용하기.
<input type="hidden" name="username" value="..." id="username" />
[script.js]
const username = document.querySelector("#username");
감사합니다.
2022. 06. 29. 09:26
음.. 아무래도 깔끔한 방법은 아니지만 그렇게 할 수 밖에 없겠군요. 답변 감사합니다.