JavaScript에서 타임리프 사용하기

HTML 파일 내에서 타임리프 변수를 이용한 연산이 필요해졌다.

<script th:inline="javascript"></script>

일반적으로 사용하면 HTML 코드에서 타임리프를 이용할 때 자바스크립트 코드로 올바르게 읽히지 않는 문제가 발생하므로 th:inline 옵션에 javascript를 지정해준다.

/*<![CDATA[*/
/*]]>*/

자바스크립트를 사용할 구문의 처음과 끝에 위의 코드의 첫 줄과 두번째 줄을 넣어준다.

/*[[${member.createTime}]]*/

타임리프를 사용하는 변수는 위의 예제처럼 /[[${..}]]/의 형태로 사용한다.

Cannot set properties of null (setting 'innerText')

아까 아무리 script 내에서 console을 찍어봐도 안찍히고 위와 같은 innerText 오류가 났는데, 이는 html 파일에서 구문 순서의 오류가 났기 때문에 발생하는 오류라고 한다.

script 코드를 html 코드 내에서 script 내에 있는 변수를 가져다쓰는 부분의 아래쪽에 배치했더니 오류가 해결됐다 !

<script th:inline="javascript">
    /*<![CDATA[*/
    var today = new Date();
    var create = /*[[${member.createTime}]]*/;
    create = new Date(create);
    var gap = today - create;
    gap = Math.floor(gap/(1000*60*60*24)) + 1;
    document.getElementById("since").innerText = gap;
    document.getElementById("today").innerText = today;
    /*]]>*/
</script>

그리하여 만든 가입일로부터 현재까지 지난 날짜를 계산한 코드이다.
today 변수에 new Date()를 넣어주었고, today를 콘솔에 찍어보면
'Tue Sep 24 2024 15:45:00 GMT +0900 (한국 표준시)' 형태로 저장되어 있음을 확인할 수 있다.

create 변수에 타임리프에 저장된 member 객체의 createTime 값을 가져온다. /* 이 부분 때문에 변수가 완성되지 않았다며 빨간줄이 떴지만 실행에는 문제가 없었다.

member.createTime이 현재 yyyy-mm-dd의 형식으로 저장되어 있으므로 이를 today처럼 date 형식으로 변환해주고 today와 create 값을 빼준다.
두 값을 빼고나면 밀리초 형태로 계산되기 때문에 이를 다시 날짜로 변환해주기 위해 (밀리초 초 분 * 시)를 나눠준다.
회원가입 첫 날부터 +1일로 하고자 하므로 마지막에 1일을 더해준다.

HTML 코드에서 script 내의 변수를 사용하기 위해
document.getElementById("html에서 사용할 변수명").innerText = script 내의 변수명 형태로 변수명을 지정해준다.

<h2>가입한 날로부터 +<span id="since"></span>일</h2>

이후 HTML 코드에서 의 형식으로 변수를 사용하면 된다.