JavaScript Temporal, 날짜와 시간을 다루는 새로운 방법

JavaScript Temporal, 날짜와 시간을 다루는 새로운 방법

JavaScript의 새로운 Temporal 객체가 브라우저 실험 버전에 드디어 등장하기 시작했는데요.

 

이 소식은 웹 개발자들에게 무척 반가운 소식입니다. 왜냐하면 JavaScript에서 날짜와 시간을 다루는 일이 앞으로 획기적으로 간편해지고 현대적으로 바뀔 예정이기 때문인데요.

 

스케줄링, 국제화, 시간에 민감한 데이터를 다루는 애플리케이션은 이제 내장 기능으로 효율적이고 정확하며 일관된 날짜, 시간, 기간(duration), 달력(calendar)을 사용할 수 있습니다.

 

물론 안정적이고 모든 브라우저에서 지원되기까지는 다소 시간이 걸릴 것이고, 구현 중에 바뀔 수 있지만, 지금 바로 Temporal이 왜 매력적인지, 어떤 문제를 해결하는지 살펴볼 수 있는데요.

 

이해를 돕기 위해 MDN에는 이번 주에만 270페이지가 넘는 Temporal 문서가 추가되었으며, 상세한 설명과 예제를 제공합니다.

---

JavaScript Temporal이 뭔지 알아볼까요?

Temporal을 이해하려면 기존 JavaScript의 Date 객체를 살펴봐야 하는데요.

 

1995년 JavaScript가 처음 만들어질 때, Date 객체는 당시 Java의 초기 구현(java.util.Date)을 그대로 복사해왔습니다.

 

Java는 1997년에 이 문제 많은 구현을 교체했지만, JavaScript는 거의 30년 동안 같은 API에 묶여 있었던 거죠.

 

자바스크립트의 Date 객체는 큰 문제점이 몇 가지 있었는데요.

 

대표적으로 사용자의 로컬 시간과 UTC만 지원하고, 시간대(time zone) 지원이 없었습니다. 날짜 문자열 파싱(parsing)도 불안정했고, Date 객체 자체가 변경 가능한(mutable) 특성을 가져서 버그 추적이 까다로웠습니다.

 

일광 절약 시간제(DST)나 역사적 달력 변경 같은 문제도 악명 높았는데요.

 

이런 이유로 JavaScript에서 날짜와 시간을 다루는 작업은 복잡하고 버그가 많았으며, 때론 심각한 결과를 초래하기도 했습니다.

 

그래서 대부분 개발자는 Moment.js나 date-fns 같은 전용 라이브러리를 사용해 날짜와 시간을 관리했습니다.

 

이런 문제를 해결하려고 나온 Temporal은 기존 Date 객체의 완전한 대체제로 설계되었는데요. Temporal은 시간대와 달력 표현을 지원하고, 변환, 비교, 계산, 포맷팅 등 200개 이상의 내장 메서드를 제공합니다.

 

모든 메서드에 관한 자세한 정보는 MDN의 Temporal 문서에서 확인 가능합니다.

---

Temporal 핵심 개념을 살펴봅시다.

Temporal의 핵심 개념은 크게 순간(instants), 벽시계 시간(wall-clock times), 기간(duration)으로 나뉘는데요. API 구조는 아래처럼 이 개념들을 명확히 다룹니다.

• Duration: Temporal.Duration 두 시간 사이의 차이
• 시간의 지점(Points in time):
  • 고유한 순간: Temporal.Instant (타임스탬프)
  • 시간대가 포함된 날짜/시간: Temporal.ZonedDateTime
• 시간대가 없는 날짜와 시간("Plain"):
  • 날짜와 시간 모두: Temporal.PlainDateTime
  • 날짜만: Temporal.PlainDate
  • 연도와 월: Temporal.PlainYearMonth
  • 월과 일: Temporal.PlainMonthDay
  • 시간만: Temporal.PlainTime
• Now: 현재 시간을 다양한 형태로 얻는 Temporal.Now

---

Temporal을 코드로 만나봅시다.

Temporal의 가장 기본적인 예제는 현재 날짜와 시간을 ISO 문자열로 얻는 건데요.

 

이제 복잡한 계산 없이 시간대도 쉽게 지정 가능합니다.

// 시스템 시간대의 현재 날짜와 시간
const dateTime = Temporal.Now.plainDateTimeISO();
console.log(dateTime); // 예: 2025-01-22T11:46:36.144

// "America/New_York" 시간대의 현재 시각
const dateTimeInNewYork = Temporal.Now.plainDateTimeISO("America/New_York");
console.log(dateTimeInNewYork); // 예: 2025-01-22T05:47:02.555

 

다양한 달력 시스템도 쉽게 쓸 수 있는데요. 예를 들어 다가오는 한국 설날(음력 1월 1일)을 찾아볼까요?

// 한국 설날은 음력 1월 1일입니다.
const koreanNewYear = Temporal.PlainMonthDay.from({
  monthCode: "M01",
  day: 1,
  calendar: "korean",
});
const currentYear = Temporal.Now.plainDateISO().withCalendar("korean").year;
let nextKoreanNY = koreanNewYear.toPlainDate({ year: currentYear });
// 올해 설날이 지났다면 내년 날짜로 변경합니다.
if (Temporal.PlainDate.compare(nextKoreanNY, Temporal.Now.plainDateISO()) <= 0) {
  nextKoreanNY = nextKoreanNY.add({ years: 1 });
}
console.log(
  `다음 한국 설날은 ${nextKoreanNY.withCalendar("iso8601").toLocaleString()}입니다.`,
);
// 출력 예시: 다음 한국 설날은 1/29/2025입니다.

 

유닉스 타임스탬프(Unix timestamp)로 특정 날짜까지 남은 시간을 계산하는 방법도 자주 사용하는데요.

// 타임스탬프: 1851222399924
const launch = Temporal.Instant.fromEpochMilliseconds(1851222399924);
const now = Temporal.Now.instant();
const duration = now.until(launch, { smallestUnit: "hour" });
console.log(`발사까지 ${duration.toLocaleString("en-US")} 남았습니다.`);
// 출력: 발사까지 31,600 hr 남았습니다. (브라우저 구현에 따라 다를 수 있음)

 

흥미로운 기능 중 하나는 기간(Duration)을 우아하게 정렬할 수 있는 compare() 메서드인데요.

const durations = [
  Temporal.Duration.from({ hours: 1 }),
  Temporal.Duration.from({ hours: 2 }),
  Temporal.Duration.from({ hours: 1, minutes: 30 }),
  Temporal.Duration.from({ hours: 1, minutes: 45 }),
];

durations.sort(Temporal.Duration.compare);
console.log(durations.map((d) => d.toString()));
// 결과: [ 'PT1H', 'PT1H30M', 'PT1H45M', 'PT2H' ]

---

Temporal 브라우저 지원 현황 및 체험 방법

브라우저 지원은 아직 초기 단계이고 실험적인 버전에 포함되고 있는데요.

 

현재 Firefox Nightly가 가장 성숙한 구현을 제공합니다.

 

Firefox Nightly에서 javascript.options.experimental.temporal 설정을 활성화하면 사용할 수 있습니다.

 

호환성에 대한 자세한 내용은 Temporal 브라우저 호환성 문서에서 확인할 수 있습니다.

 

추가로 Temporal polyfill 페이지에서 개발자 도구 콘솔을 통해 별도 설정 없이 Temporal을 시험해 볼 수 있습니다.

 

지금이 바로 Temporal을 체험하며 JavaScript에서 날짜와 시간을 다루는 현대적 방법을 준비할 좋은 시점입니다.

 

---