[JS] 59. Date 객체를 이용해서 날짜 계산하기

안녕하세요. 박기린 입니다.

이전에 쓴 Date 객체 설명글에 이어서, 실제 앱에서 사용할 수 있는 날짜 계산 방식에 대해 설명해보겠습니다.

 

 

타임스탬프를 이용해서 날짜 계산하기

const future = new Date(2037, 10, 19, 15, 23);
console.log(+future);

Date 객체를 +연산자를 이용해서 Number 타입으로 coercion하면, 타임 스탬프 값으로 변환됩니다. 

(타임 스탬프에 관한 설명이 담긴 글 : https://arnopark.tistory.com/569)

 

이 타임 스탬프를 이용해서 두 날짜 간의 간격을 계산할 수 있습니다.

 

 

 

const calcDaysPassed = (date1, date2) =>
  Math.trunc(date2 - date1) / (1000 * 60 * 60 * 24); // (1000 * 60 * 60 * 24)은 1일을 나타낸다.

const days1 = calcDaysPassed(new Date(2037, 3, 4), new Date(2037, 3, 14));
console.log(days1);

실행결과값

calcDaysPassed 함수에 '2037년 3월 4일'과 '2037년 3월 14일'을 인수로 넘겼습니다.

Math object의 메소드에 의해 Number 타입의 타임 스태프 값으로 변환된 후, 뺄셈이 이뤄졌습니다.

그리고 밀리초(ms) 단위로 1일을 나타내는 (1000 * 60 * 60 * 24)를 나눠줘서, 두 날짜 간의 간격이 10일임을 계산했습니다.

 

 

 

 

---

웹 애플리케이션에서 ‘오늘' ‘하루전' ‘n일 전' 표시 구현

유명한 앱인 '당근마켓'의 메인페이지입니다.

중고거래를 기다리는 다양한 물품들이 등록된 모습입니다. 이때 사진 속의 '1분 전', '18분 전' 이라는 글자에 주목해봅시다.

이 글자는 현재 시간과 글을 올린 시점의 시간 간의 차이를 계산한 후에 나온 값을 출력한 형태입니다.

 

프로그램에서는 시간 정보를 필요로하는 경우가 생기고, 이를 구현하는 방법에 대해 알 필요가 있습니다. JS로 만든 웹 앱을 비롯한 다양한 프로그램에서도 시간 정보를 요구할 것이기 때문에, 시간을 계산할 수 있어야 합니다. 지금부터 그 방법에 대해 간단히 알아보겠습니다.

 

 

 

const formatMovementDate = function(date) {
  const calcDaysPassed = (date1, date2) =>
    date2.getDate() - date1.getDate()

  const daysPassed = calcDaysPassed(date, new Date());
  if (daysPassed === 0) return 'Today';
  if (daysPassed === 1) return 'Yesterday';
  if (daysPassed <= 7) return `${daysPassed} days ago`;
  else {
    const day = `${date.getDate()}`.padStart(2, '0');
    const month = `${date.getMonth() + 1}`.padStart(2, '0');
    const year = date.getFullYear();
    return `${year}/${month}/${day}`;
  } 
};

이 함수를 통해 다양한 시간 정보를 출력할 수 있습니다. 함수의 내용을 하나씩 뜯어보겠습니다.

 

 

const formatMovementDate = function(date) {

이 함수는 date라는 이름의 인수를 받습니다. 인수로 date 객체만 받겠다는 뜻입니다.

 

 

  const calcDaysPassed = (date1, date2) =>
    date2.getDate() - date1.getDate();

두 날짜 간의 간격을 계산해주는 함수입니다.

getDate()가 아니라 getMinutes()을 이용해서 분 단위로 계산을 한 뒤에, 당근마켓처럼 'n분 전'으로 출력을 할 수도 있습니다. 다만, 간단하고 원활한 설명을 위해 본문에서는 날짜 단위로만 계산하겠습니다.

 

 

  const daysPassed = calcDaysPassed(new Date(), date);

dayPassed라는 상수가 있습니다.

인수로 받은 date와 현재 시간 간의 날짜 차이를 계산한 후, 그 값을 dayPassed 안에 넣어줍니다.

( *Date()에 인수를 전달하지 않으면 현재 시각을 뜻합니다. )

 

 

  if (daysPassed === 0) return 'Today';
  if (daysPassed === 1) return 'Yesterday';
  if (daysPassed <= 7) return `${daysPassed} days ago`;

dayPassed 값은 현재 시간과 인수로 받은 시간(date) 간의 날짜 차이를 담아놓은 값입니다.

0일 경우는 동일한 날짜이기 때문에 Today, 1일 차이는 경우는 Yesterday, 7일 차이까지는 'n days ago'로 출력합니다.

 

 

  else {
    const day = `${date.getDate()}`.padStart(2, '0');
    const month = `${date.getMonth() + 1}`.padStart(2, '0');
    const year = date.getFullYear();
    return `${year}/${month}/${day}`;
  } 
};

 

7일이 넘어가는 경우, 인수로 받은 date의 year/month/day를 계산해서 출력합니다.

( padStart()에 대한 설명이 있는 글 : https://arnopark.tistory.com/535 )

 

 

실행결과물 : 2023년 1월 4일 작성 기준