moment 를 활용해 카운트 다운 만들기

Javascript에서 시간표현을 편리하게 이용하기 위해서 moment 를 자주 사용한다.
화면에서 특정 시간까지 몇일 몇시간 몇분 몇초가 남았는지 카운트 다운을 표현하기 위해
moment를 활용해 적용해 보았다.

monent 설치방법

npm install moment
or
yarn add moment

또는 javascript 파일을 직접 받아 선언 후 사용해도 동일하게 이용 가능하다.
https://momentjs.com/

Duration을 이용해 남은 일 수 카운트다운 만들기

let currentTime = moment()
let targetTime = moment('2023-12-31 23:59:59', 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')

let diffTime = moment(targetTime).diff(currentTime, 'milliseconds')
let duration = moment.duration(diffTime, 'milliseconds')

//카운트 다운
let interval = 1000 //1초

function fnSetCount() {
  duration = moment.duration(duration - interval, 'milliseconds');

  //duration 일수 구하기
  let days = parseInt(duration.asDays());

  // 일수 2자리 맞추기
  if(days !== 0) {
    $('.day').text(days)
  } else if (days < 10) {
    $('.day').text('0' + days)
  } else {
    $('.day').text('00')
  }

  //화면에 표시
  $('.hour').text(moment(duration.hours(), 'h').format('HH'))
  $('.minute').text(moment(duration.minutes(), 'm').format('mm'))
  $('.second').text(moment(duration.seconds(), 's').format('ss'))
}

//interval 로 1초마다 카운트다운 갱신
if(diffTime > 0) {
  fnSetCount();

  setInterval(fnSetCount, interval);
}

주의할 점은 duration.days() 이용 시 0~30 사이의 값만 반환하기때문에 30일 이상의 일수를 표현하기 위해서는 asDays() 함수를 이용해야 한다.

참고 : https://momentjscom.readthedocs.io/en/latest/moment/08-durations/08-days/