React(89) 글 작성시간 계산함수 만들기 (몇분전/몇시간전/몇일전)

 

 

 

 

게시글 작성 시간을 현재시간 기준으로 표시해주는 유틸성 함수를 만들어 보려고 한다

moment.js 라이브러리를 활용하면 아 - 주 간편하게 시간계산함수를 만들수있다

그럼 몇 분 전, 몇 시간 전, 몇 일 전 을 표시하는 함수를 만들어보자

 

결과화면 미리보기

시간정보가 친절하게 나온다

 

 

 

---

React(89) 글 작성시간 계산함수 만들기 (몇분전/몇시간전/몇일전)

 

 

Date 객체로 작성시간을 매개변수로 받아오자
today 날짜를 구한뒤 diff 내장함수로 day, hour, minute 의 차이를 구하면 된다.

export const getDayMinuteCounter = (date?: Date): number | string => {
  if (!date) {
    return '';
  }

  const today = moment();
  const postingDate = moment(date);
  const dayDiff = postingDate.diff(today, 'days');
  const hourDiff = postingDate.diff(today, 'hours');
  const minutesDiff = postingDate.diff(today, 'minutes');
  
  if (dayDiff === 0 && hourDiff === 0) { // 작성한지 1시간도 안지났을때
    const minutes = Math.ceil(-minutesDiff);
    return minutes + '분 전';		 // '분' 로 표시
  }

  if (dayDiff === 0 && hourDiff <= 24) { // 작성한지 1시간은 넘었지만 하루는 안지났을때, 
    const hour = Math.ceil(-hourDiff);
    return hour + '시간 전';		 // '시간'으로 표시
  }

  return -dayDiff + '일 전';		 // '일'로 표시
};