• 카테고리

    질문 & 답변
  • 세부 분야

    백엔드

  • 해결 여부

    미해결

thymeleaf에서 자바스크립트 인라인을 사용할 때 질문있습니다.

22.06.24 16:25 작성 조회수 3.71k

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

codesweaver님의 프로필

codesweaver

2022.06.28

안녕하세요, 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");

 

감사합니다.

 

 

Taejun Kim님의 프로필

Taejun Kim

질문자

2022.06.29

음.. 아무래도 깔끔한 방법은 아니지만 그렇게 할 수 밖에 없겠군요. 답변 감사합니다.

yunbinni님의 프로필

yunbinni

2023.03.01

저도 이 문제로 불편을 느끼는데,
thymeleaf가 더욱 발전했음 좋겠습니다..!