spring으로 게시판을 만들 때 작성일자를 표기해 두었는데 년 월 일 시 분 초 그리고 소수점 세 번째 자리까지 초가 나왔다.
굉장히 보기가 좋지 않아 어떻게 해결할까 고민하던 중 좋은 것을 발견하여 공유한다.
javascript에서 제공하는 라이브러리인 Moment.js를 불러오고 사용하여 간편하게 몇 분 전, 며칠 전처럼 보이게 할 수 있었다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script><body>나 <head> 안에 넣어주자
라이브러리를 해당 HTML페이지에서 사용할 수 있다.
<div id="postDate" th:attr="data-timestamp=${voteComment.creDate}">
[[${voteComment.creDate}]]
</div>그러고 나서 id를 작성해야 한다.
id를 이용해서 보여주는 모습을 바꿀 것이다.
그러고 나서 script를 작성하자
<script>
moment.locale('ko') // ko라고 넣어주면 한글로 변환된다.
// postDate라는 아이디를 사용하는 모든요소를 상수에 할당한다.
const postDates = document.querySelectorAll('#postDate');
postDates.forEach(postDate => {
// 'postDate' 요소의 data-* 속성 중 'timestamp' 속성 값을 가져와 'timestamp'라는 상수에 할당
const timestamp = postDate.dataset.timestamp;
// postDate' 요소의 텍스트 내용을 '작성일자: '라는 문자열과, timestamp를 Moment.js 객체로 변환한 후,
// 현재 시간으로부터 얼마나 시간이 지났는지를 나타내는 문자열로 변경
postDate.textContent = '작성일자: ' + moment(timestamp).fromNow();
});
</script>알아보기 쉽게 주석 처리를 해놓았다.
주석이 위, 아래에 코드가 위치한다.
쉽게 말해서
1. postDate라는 id를 사용하는 모든 요소를 postDates라는 상수에 할당
2. postDates에 담긴 각 요소에 대해 함수를 실행
3. timestamp라는 속성 값(작성일자)을 가져와서 상수에 할당하고,
4. postDate의 텍스트를 '작성일자:'라는 문자열과, 현재시간으로부터 얼마나 시간이 지났는지를 문자열로 나타내준다.
작성자는 댓글과 게시글에 이 방법을 사용했다.
moment.locale() 안에 'ko'를 넣어주지 않으면 영어로 표현된다, 영어표기를 좋아한다면 ko를 빼주면 된다.
이렇게 표기된다.
다른 방법도 많이 있겠지만 그나마 쉬운 방법인 것 같다.
코드를 작성하고, 사용할 때 한 줄씩 이해하며 사용하면 코드를 외우지 않아도 필요할 때 재사용이 가능할 것이다.
'Spring' 카테고리의 다른 글
| Spring 게시판 조회수(계정당 하루에 1번 올리기) (1) | 2023.11.01 |
|---|
댓글