model로부터 전달받은 리뷰게시글 list를 jsp에 jstl과 el을 통해 출력하는데
게시글의 '작성일'정보는 알고 있지만 이를 경과시간으로 바꿔 표현하고자 했다.
날짜를 다루는 데 편리한 moment.js 라이브러리에서 제공하는 diff 메소드와 duration 객체를 사용했다.
-
diff 메소드로 시간 차이 구하기
시간 정보를 가지고 있는 두 moment 객체 a, b에 대하여
a.diff(b)와 같이 작성하면 두 시간 차이를 milliseconds 단위로 반환받을 수 있다.
또는a.diff(b, 'days')와 같이 계산 단위를 명시할 수도 있다. ('days' : 일 단위로 반환) -
나 같은 경우
1년 이상의 경과시간을 가지면 n년전, 1개월 이상의 경과시간을 가지면 n개월 전, ...
이렇게 경과시간의 값에 따라 단위를 다르게 표현하고자 했다.
duration 객체는 시간 정보를 통해 생성하고, 이 시간정보에 대해 다른 단위로 반환해준다.
기본적으로는
moment.duration(milliseconds 단위의 시간 값);
위와 같이 생성하고, moment.duration(2, 'seconds');와 같이 원하는 시간 단위를 명시해줄 수 있다. (2초에 해당하는 시간 값을 가지게 됨)
또 해당 객체에 asYears(), asMonths(), asWeeks()...와 같은 메소드를 호출해서 그 단위로 변환된 값을 반환받을 수 있다.
따라서 diff메소드로 구한 시간 차이를 사용해 duration 객체를 획득하고,
시간 차이의 값에 따라 적절한 단위로 변환시켜 값을 돌려받도록 했다.
중복된 코드를 줄이기 위해, 각 시간 단위 별 값들을 배열로 만든 뒤 반복문으로 검사하였다.
// elapsedTime 클래스를 가지는 모든 태그에 획득한 경과시간을 출력
$(".elapsedTime").each(function() {
let elapsedTime = getElapsedTime($(this).attr("data-created-date"));
$(this).text(elapsedTime);
});
// 작성일에 대한 문자열을 전달하면 경과시간을 적절한 단위로 반환하는 함수
function getElapsedTime(createdDateString) {
let now = moment();
let createdDate = moment(createdDateString, 'YYYY-MM-DD HH:mm:ss');
// 경과시간 정보
let duration = moment.duration(now.diff(createdDate));
// 경과시간에 대해 문자열로 표시할 단위 옵션
let durationOptions = [
{"dur" : duration.asYears(), "option" : "년 전"},
{"dur" : duration.asMonths(), "option" : "개월 전"},
{"dur" : duration.asWeeks(), "option" : "주 전"},
{"dur" : duration.asDays(), "option" : "일 전"},
{"dur" : duration.asHours(), "option" : "시간 전"},
{"dur" : duration.asMinutes(), "option" : "분 전"},];
// 반복문으로 duration의 값을 확인해 어떤 단위로 반환할지 결정한다.
// ex) 0.8년전이면 "8개월 전" 반환
for (let durOption of durationOptions) {
if (durOption.dur >= 1) {
return Math.round(durOption.dur) + durOption.option;
}
}
// 분 단위로 검사해도 1 이상이 아니면(반복문에서 함수가 종료되지 않으면) "방금 전" 반환
return "방금 전"
}
위와 같이 언제나 '현재 시점'으로부터 경과시간을 표시해주는 것을 확인할 수 있다.
