[Typescript / Dayjs] 1분만에 글 작성 경과 시간 구현하기 (몇 분 전, 몇 시간 전, 며칠 전) (measure time elapsed on typescript, javascript)

작성 경과 시간

유튜브 등을 보면 영상이 올라온 경과 시간등이 표시된다.

 

커뮤니티 등을 개발하다보면 글 작성 경과 시간을 표시해줄 필요가 있는데 Dayjs를 사용하면 간단하게 구현할 수 있다.

 

Dayjs는 기존의 구린 자바스크립트 기본 날짜 함수인 Date를 개선시켜준 라이브러리로 무척 가볍고 사용하기 편하다.

Day.js · 2kB JavaScript date utility library

 

자바스크립트에서 날짜를 다룬다면 무조건 무조건 무조건 쓸 것을 추천한다.

 

우선 dayjs 라이브러리를 설치해준다.

npm i dayjs

 

경과시간 함수를 만들기 위해선 duration 플러그인을 사용해야한다.

Day.js · 2kB JavaScript date utility library

 

typescript 환경에서는 다음과 같이 duration 플러그인을 불러올 수 있다.

import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)

 

시간 경과를 반환하는 함수는 다음과 같이 작성할 수 있다. (typescript)

import dayjs, { Dayjs } from 'dayjs'
import duration, { Duration } from 'dayjs/plugin/duration'
dayjs.extend(duration)

export function getTimeDiff(timeToCompare: Dayjs): string {
  const timeDiffDuration: Duration = dayjs.duration(dayjs().diff(timeToCompare))
  const yearDiff: number = parseInt(timeDiffDuration.format('Y'))
  const monthDiff: number = parseInt(timeDiffDuration.format('M'))
  const dateDiff: number = parseInt(timeDiffDuration.format('D'))
  const hourDiff: number = parseInt(timeDiffDuration.format('H'))
  const minuteDiff: number = parseInt(timeDiffDuration.format('m'))
  const secondDiff: number = parseInt(timeDiffDuration.format('s'))

  if (yearDiff > 0) {
    return `${yearDiff}년 전`
  } else if (monthDiff > 0) {
    return `${monthDiff}달 전`
  } else if (dateDiff > 0) {
    return `${dateDiff}일 전`
  } else if (hourDiff > 0) {
    return `${hourDiff}시간 전`
  } else if (minuteDiff > 0) {
    return `${minuteDiff}분 전`
  } else if (secondDiff > 0) {
    return `${secondDiff}초 전`
  } else {
    return ''
  }
}