moment.js 이용한 게시글 작성 시간함수

게시글을 올렸을때 오늘 날짜를 기준으로 얼마나 시간이 지났는지에 관한 함수이다.

설치하기

함수를 만들기 전에 날짜를 손쉽게 다룰수 있는 moment.js라이브러리를 설치했다.

npm i moment --save

함수

if (!date) {
  return '';
}

• 매개 변수가 주어지지 않는다면 빈 문자열을 리턴한다.

const today = moment();
const postingDate = moment(date);

• moment()를 사용해 현재 시간의 moment객체를 생성해 today에 할당 해준다.
• moment(date)를 사용해 데이터로 받을 값을 넣어준 moment를 postingDate에 할당 해준다.

const dayDiff = postingDate.diff(today, 'days');
const hourDiff = postingDate.diff(today, 'hours');
const minutesDiff = postingDate.diff(today, 'minutes');

• moment의 diff메서드를 이용해 postingDate와 today 사이의 day, hours, minutes차이를 게산한다.

if (dayDiff === 0 && hourDiff === 0) {
  const minutes = Math.ceil(-minutesDiff);
  return minutes + '분 전';
}

• 만약 하루가 지나지 않았고 시간도 지나지 않았으면 분 단위로 표시한다. minutesDiff절대값을 반올림하고 '분 전'을 추가한다.

if (dayDiff === 0 && hourDiff <= 24) {
  const hour = Math.ceil(-hourDiff);
  return hour + '시간 전';
}

• 하루가 지나지 않았고 시간이 지났으면 시간 단위로 표시한다. hourDiff의 절대값을 반올림하고 '시간 전'을 추가한다.

return -dayDiff + '일 전';

• 모든 조건이 아닌 경우 날짜간 차이를 일 단위로 표시힌다. dayDiff의 절대값을 계산하고 '일 전'을 추가한다.

diff 메서드

diff메서드는 moment.js라이브러리에서 사용가능한 메서드로 두 날짜간의 시간 차이를 계산해줘 주어진 단위에 따라 결과를 반환한다.

momentA.diff(momentB, unit, round);

• momentA: 첫 번째 날짜를 나타내는 moment 객체.
• momentB: 두 번째 날짜를 나타내는 moment 객체.
• unit(optional): 차이를 계산할 단위. 예를 들어, 'years', 'months', 'days', 'hours', 'minutes', 'seconds', 'milliseconds' 등이 있다. 기본값은 'milliseconds'.
• round(optional): 차이를 정수로 반올림해야 하는지 여부를 나타낸다. 기본값은 false.

diff메서드를 사용하면 momentA와 momentB 사이의 날짜 차이를 원하는 단위로 반환할 수 있다. 반환되는 값은 momentA가 B보다 클 경우 양수, 그렇지 않을 경우 음수이다.

const momentA = moment('2023-06-26');
const momentB = moment('2023-06-23');

const daysDiff = momentA.diff(momentB, 'days'); // 3

console.log(daysDiff); // 출력: 3