[Thymeleaf] JavaScript에서 타임 리프 변수 사용하기

JavaScript에서 타임 리프 변수 사용하기

타임 리프를 사용하여 html 파일 작성 시 일반적인 <script> 태그는 사용할 수 있지만, 단순하게 <script> 태그만 작성한 경우 타임 리프 변수를 자바 스크립트 코드 내에서 사용할 수는 없다.

 

따라서 타임 리프 변수 ${}를 <script> 태그 내에서 사용하기 위해서는 th:inline="javascript"를 명시해주어야 하고, 스크립트 내에 /*<![CDATA[*/ /*]]>*/를 명시해주어야 한다. 또한 타임 리프 변수도 /*[[]]*/로 감싸주어야 한다.

<script th:inline="javascript">
    /*<![CDATA[*/
    function search() {
        const searchWord = document.getElementById('searchWord').value;
        const page = /*[[${paging.page}]]*/;

        location.href='list?page=' + page + '&searchWord=' + searchWord;
    }
    /*]]>*/
</script>

 <script th:inline="javascript"> 이와 같이 th:inline을 명시해준다.

이후 자바 스크립트 코드는 모두 /*<![CDATA[*/ /*]]>*/로 묶어주어야 한다.

따라서 첫 줄에 /*<![CDATA[*/ 를 작성해주었고, 마지막 줄에 /*]]>*/를 작성해주었다.

또한 타임 리프 변수인 ${paging.page}도 /*[[]]*/로 묶어주어야 하기 때문에 /*[[ ${paging.page} ]]*/라고 작성하였다.