자바스크립트에서 타임리프 사용하기

알아보게 된 이유

---

현재 친구와 함께 스프링부트로 사이트를 구현하는 프로젝트를 진행하는 중입니다. 그래서 사이트를 만드는 도중에 자바스크립트로 타임리프 변수를 받아야 하는 상황이 발생하였고 이를 해결하기 위해서 공부하게 되었습니다.

 

깃허브 프로젝트 링크

GitHub - hosunghyun/Smart_Makeup_Web: 웹으로 캠을 사용하여 서버로 화장 시뮬레이션을 제공

 

 

해결방법

---

<script th:inline="javascript">
            /*<![CDATA[*/ 
            const $editbtn = document.getElementById("editbtn");        // 수정 버튼
            const $deletebtn = document.getElementById("deletebtn");    // 삭제 버튼
            
            // 이미지 ID를 가져오는 방법
            const imageId = /*[[${image[0].getBoard().getId()}]]*/ ''; // 첫 번째 이미지의 ID를 가져옵니다.
        
            console.log(imageId); // imageId를 콘솔에 출력
        
            $editbtn.addEventListener('click', () => {
                fetch(`/boardedit/id=${imageId}`)
                    .then((message) => { return message.text(); })
                    .then((message) => {
                        if (message === "NO-WRITTER") { // 중복 체크
                            alert(`${imageId}는 중복입니다.`); // 중복일 경우 알림
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error); // 에러 처리
                    });
            });
            /*]]>*/
        </script>

위에 코드는 스프링부트 프로젝트를 진행하면서 타임리프 변수가 필요했던 부분입니다.

 

자바스크립트에서 타임리프를 사용하기 위해서는 <script th:inline="javascript"> 를 작성해야 합니다.

그리고 나서 /*<![CDATA[*/

 

/*]]>*/

로 작성해서 타임리프를 사용할 준비를 해야합니다. 그리고 나서 타임리프 변수를 받기위한 /*[[ ${} ]]*/ 코드를 작성하면됩니다.