JavaScript (자바스크립트)에서 날짜/시간 비교, 계산하기 - Date.now

개발/javascript&typescript1 2025. 12. 11. 08:18

1. 날짜 비교의 기본 – ms 값으로 비교하면 된다

Date 객체는 "대소 비교 연산자"를 그대로 적용할 수 있습니다.

const d1 = new Date(2025, 0, 10); // 2025-01-10
const d2 = new Date(2025, 0, 20); // 2025-01-20

console.log(d1 < d2);  // true
console.log(d1 > d2);  // false
console.log(d1 <= d2); // true
console.log(d1 == d2); // false

 

Date 객체끼리 비교 연산을 하면 내부적으로 숫자로 변환되기 때문에 이렇게 사용할 수 있습니다.

 

또는 직접 타임스탬프를 비교하는 방법도 있습니다.

d1.getTime() < d2.getTime();
Date.now() > d1.getTime();

둘 중 어떤 방식이든 결과는 동일합니다.

객체 비교 자체가 ms 비교이기 때문에 대부분 d1 < d2 같은 간단한 표현을 사용합니다.

 


2. 날짜가 같은지 비교(연/월/일 단위 비교)

연/월/일만 비교하고 싶을 때는 시·분·초를 날려야 합니다.

function isSameDate(a, b) {
  return (
    a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate() === b.getDate()
  );
}

const d1 = new Date(2025, 5, 10, 10, 30);
const d2 = new Date(2025, 5, 10, 23, 50);

console.log(isSameDate(d1, d2)); // true

시간이 다르더라도 "같은 날짜"로 평가하는 패턴은 UI, 예약 일정 등에서 자주 필요합니다.

 


 

3. 날짜 차이 계산(며칠 차이인지)

가장 기초가 되는 방법은 "타임스탬프 차이 / 하루 밀리초"입니다.

 

 

하루(24시간)의 ms 값

1초 = 1000ms  
1분 = 1000 × 60  
1시간 = 1000 × 60 × 60  
1일 = 1000 × 60 × 60 × 24 = 86400000ms

 

날짜 차이 구하기

function diffDays(a, b) {
  const diff = b.getTime() - a.getTime();
  return Math.floor(diff / (1000 * 60 * 60 * 24));
}

const start = new Date(2025, 0, 1);
const end   = new Date(2025, 0, 10);

console.log(diffDays(start, end)); // 9일 차이

시간 차이, 분 차이도 동일한 방식

const diffMs = end.getTime() - start.getTime();
const diffHours = diffMs / (1000 * 60 * 60);
const diffMinutes = diffMs / (1000 * 60);
const diffSeconds = diffMs / 1000;

정답은 단순하지만 "타임존 영향으로 하루가 뒤틀릴 수 있음" 같은 이슈가 있어서,

실무에서는 이 계산 방식이 올바르게 동작하도록 "날짜를 0시 기준으로 맞춰놓고 계산"하는 경우가 많습니다.

 


 

4. 날짜를 더하기 / 빼기 (며칠 후, 몇 시간 후)

Date는 setter가 자동 보정을 지원하기 때문에 단순하게 계산할 수 있습니다.

 

 

4-1. 며칠 후 계산

function addDays(date, days) {
  const d = new Date(date);
  d.setDate(d.getDate() + days);
  return d;
}

const now = new Date(2025, 0, 10); // 2025-01-10
console.log(addDays(now, 5));      // 2025-01-15
console.log(addDays(now, -3));     // 2025-01-07

 

4-2. 몇 시간 후 계산

function addHours(date, hours) {
  const d = new Date(date);
  d.setHours(d.getHours() + hours);
  return d;
}

addHours(new Date(), 2);

4-3. setMonth, setFullYear 도 동일하게 활용 가능

const d = new Date(2025, 0, 31);

d.setMonth(d.getMonth() + 1);
console.log(d); // 2025-03-03 (자동 보정)

이처럼 월을 더할 때 자동으로 보정되어 넘어가기 때문에

"1월 31일 + 1개월 = 2월 31일(없는 날) → 3월 3일" 같은 결과가 자연스럽게 나옵니다.

 

이 동작이 편리할 때도 있고, 원하지 않은 경우도 있으니 주의가 필요합니다.

 


 

5. 자동 보정(overflow)으로 인해 발생하는 문제들

Date 객체는 다음과 같은 자동 보정 기능이 있습니다.

new Date(2025, 0, 32); // 2025-02-01
new Date(2025, 1, 29); // 2025-03-01 (2025년 2월은 28일까지)

장점:

 

  • 날짜 계산을 빨리 할 수 있음
  • 직접 월별 일수를 신경 쓸 필요 없음

 

단점:

 

  • 1개월 후를 의도했는데 2개월 후로 넘어가는 등 예기치 않은 값이 생길 수 있음
  • 시간대(UTC vs 로컬)에 따라 날짜가 바뀌는 경우도 존재

 

따라서 계산이 많이 필요할 때는 dayjs, date-fns 같은 라이브러리를 쓰면 더 안전합니다.

 


6. 상대적 시간 구하기 ("3일 전", "2시간 후")

실무에서 정말 많이 등장하는 패턴입니다.

 

 

기본 원리

const now = Date.now();
const past = new Date(2025, 0, 8).getTime();

const diff = now - past;
const diffDays = Math.floor(diff / (1000 * 60 * 60 * 24));
console.log(diffDays + "일 전");

 

시간 단위별로 나누어 표현

function timeAgo(date) {
  const diff = Date.now() - date.getTime();

  const sec = Math.floor(diff / 1000);
  if (sec < 60) return sec + "초 전";

  const min = Math.floor(sec / 60);
  if (min < 60) return min + "분 전";

  const hour = Math.floor(min / 60);
  if (hour < 24) return hour + "시간 전";

  const day = Math.floor(hour / 24);
  if (day < 7) return day + "일 전";

  return Math.floor(day / 7) + "주 전";
}

console.log(timeAgo(new Date(Date.now() - 3600 * 1000))); // "1시간 전"

SNS 타임라인처럼 상대 시간을 보여줄 때 자주 사용하는 패턴입니다.

 


반응형

7. 날짜 비교와 계산 시 유의해야 할 점

 

 

1) 타임존 차이

서버가 UTC로 값을 보내고,

클라이언트는 로컬 시간을 표시하는 경우:

 

  • 날짜 차이가 9시간씩 어긋나서 "하루 전/후"가 잘못 계산되는 문제
  • ISO 문자열을 파싱할 때 Z가 붙어 있는지 여부에 따라 해석이 달라지는 문제

 

가능하면:

 

  • 서버는 UTC 기준 ISO 8601로 내려주고
  • 클라이언트에서 로컬 변환 후 계산하는 것을 추천합니다.

 

 

2) 문자열 파싱은 ISO 형식만 안정적

new Date("2025/12/10"); // 환경 따라 다르게 해석됨

반드시 ISO 또는 직접 파싱 사용을 권장합니다.

 

 

반응형
admin