[번역] 자바스크립트 Temporal 기능이 곧 도입됩니다

출처: https://developer.mozilla.org/en-US/blog/javascript-temporal-is-coming/

자바스크립트 Temporal 객체의 구현이 브라우저의 실험 버전에 도입되기 시작했습니다. 이로써 자바스크립트에서 날짜와 시간을 다루는 작업이 훨씬 더 간단하고 현대적으로 변화할 것이기 때문에, 웹 개발자들에게 매우 반가운 소식입니다.

스케줄링, 국제화, 또는 시간에 민감한 데이터를 활용하는 애플리케이션은 이제 내장 기능을 통해서 더 효율적이고, 정확하며, 일관된 날짜, 시간, 기간, 그리고 캘린더를 다룰 수 있게 될 것입니다. 아직 모든 브라우저에서 안정적으로 지원되기까지는 갈 길이 멀고, 구현 과정에서 변경이 있을 수도 있지만, 현재 시점에서 Temporal의 모습과 그 매력, 그리고 Temporal이 해결하는 문제들을 미리 살펴볼 수 있습니다.

여러분이 빠르게 익힐 수 있도록, 이번 주 MDN에 상세한 설명과 예제가 포함된 270 페이지 이상의 Temporal 관련 문서가 추가되었습니다.

Temporal 객체란 무엇인가요?

Temporal 객체를 이해하기 위해서는 자바스크립트의 Date 객체를 살펴봐야 합니다. 자바스크립트가 1995년에 만들어졌을 때, Date 객체는 결함이 많았던 자바의 java.util.Date 초기 구현에서 가져왔습니다. 자바는 이 구현을 1997년에 교체했지만, 자바스크립트는 알려진 문제들에도 불구하고 거의 30년 동안 동일한 API를 사용해 왔습니다.

자바스크립트 Date 객체의 주요 문제는 사용자 로컬 시간과 UTC만 지원하고, 시간대(time zone)를 따로 지원하지 않는다는 점입니다. 게다가, 파싱 동작을 신뢰할 수 없으며, Date 객체 자체가 변경 가능하다는 점은 추적하기 어려운 버그를 야기합니다. 이 외에도 서머타임(Daylight Saving Time)에 대한 계산이나 과거의 달력 체제 변화와 같은 매우 복잡하고 다루기 어려운 문제도 존재합니다.

이러한 문제들 때문에 자바스크립트에서 날짜와 시간을 다루는 작업은 복잡하고 버그가 발생하기 쉽습니다. 이는 일부 시스템에는 심각한 결과를 초래할 수 있습니다. 그래서 대부분의 개발자들은 애플리케이션의 날짜와 시간을 좀 더 잘 다루기 위해 Moment.js나 date-fns와 같은 전용 라이브러리에 의존해 왔습니다.

Temporal은 Date 객체를 완전히 대체할 수 있도록 설계되었으며, 날짜와 시간 관리를 신뢰 가능하고 예측 가능하게 합니다. Temporal은 타임존, 캘린더 표현에 대한 지원과 변환, 비교, 계산, 포맷팅 등을 위한 다양한 내장 메서드를 추가로 제공합니다. API의 기능은 200개 이상의 유틸리티 메서드에 걸쳐 있으며, 이러한 모든 정보는 MDN의 Temporal 문서에서 확인할 수 있습니다.

핵심 개념

Temporal에서는 고유한 시점(Instants), 지역 시간(Wall-clock times), 그리고 기간(Durations)을 주요 개념으로 다룹니다. 이러한 개념들을 처리하기 위해 API는 다음과 같은 전체적인 구조를 가지고 있습니다.

• 기간: Temporal.Duration 두 시점 간의 시간 차이
• 시점:
  • 고유한 시점:
    • 타임스탬프 형식: Temporal.Instant
    • 시간대를 포함한 날짜-시간: Temporal.ZonedDateTime
  • 시간대가 없는 날짜/시간("Plain"):
    • 전체 날짜와 시간: Temporal.PlainDateTime
      • 날짜만: Temporal.PlainDate
        • 연도와 월만: Temporal.PlainYearMonth
        • 월과 일만: Temporal.PlainMonthDay
      • 시간만: Temporal.PlainTime
• 현재 시간: 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일입니다.
const chineseNewYear = Temporal.PlainMonthDay.from({
  monthCode: "M01",
  day: 1,
  calendar: "chinese",
});
const currentYear = Temporal.Now.plainDateISO().withCalendar("chinese").year;
let nextCNY = chineseNewYear.toPlainDate({ year: currentYear });
// 만약 nextCNY가 현재 날짜보다 이전이라면, 1년을 앞으로 이동합니다.
if (Temporal.PlainDate.compare(nextCNY, Temporal.Now.plainDateISO()) <= 0) {
  nextCNY = nextCNY.add({ years: 1 });
}
console.log(
  `The next Chinese New Year is on ${nextCNY
    .withCalendar("iso8601")
    .toLocaleString()}`
);
// 다음 중국 설날은 2025년 1월 29일입니다. (이 글을 작성할 당시 기준)

유닉스 타임스탬프는 많은 시스템(API나 데이터베이스 등)에서 시간을 나타내기 위해 사용되는 형식으로 매우 일반적인 사용 사례입니다. 아래 예제는 밀리초 단위의 유닉스 타임스탬프를 받아 이를 기반으로 인스턴스를 생성하고, Temporal.Now를 사용해 현재 시간을 구한 다음, 현재 시점부터 해당 유닉스 타임스탬프까지 몇 시간이 남았는지 계산하는 방법을 보여줍니다.

// 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시간이 남았습니다." <- @js-temporal/polyfill
// "발사까지 PT31600H가 남았습니다." <- Firefox Nightly

현재 Firefox의 구현에서는 toLocaleString 메서드가 지역화된 문자열을 출력하지 않으므로, 위의 예제처럼 (PT31600H) 지역 특정적이지 않은 기간 형식이 반환됩니다. 이는 기술적 한계라기보다는 설계 선택에 더 가깝기 때문에, 기간을 포매팅하는 것이 가능하므로 향후 폴리필(@js-temporal/polyfill)과 Firefox의 구현이 최종적으로 일치할 가능성이 있습니다.

강조할 내용이 많지만, 개인적으로 API에서 흥미롭게 느껴진 하나의 패턴은 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 사용과 브라우저 지원 현황

Temporal 기능이 점진적으로 실험적인 브라우저 릴리스에 포함되기 시작했으며, 현재 Firefox에서 가장 성숙하게 구현되어 있는 것으로 보입니다. Firefox의 경우, Temporal은 최신 개발 버전(Nightly)에 기본적으로 포함되어 있으며, 이를 활성화하려면 javascript.options.experimental.temporal 환경설정을 키면 됩니다. 전체 브라우저 호환성에 대한 자세한 내용을 확인하고 싶다면, (꽤나 방대한)Temporal 객체 브라우저 호환성 섹션에서 확인하실 수 있습니다.

다음은 Temporal 구현에 대한 주요 브라우저 별 추적 링크입니다.

• Firefox: 최신 개발 빌드(Nightly)에서 기본적으로 Temporal을 빌드
• Safari: [JSC] Temporal 구현
• Chrome: Temporal 제안 구현

또한, https://tc39.es/proposal-temporal/docs/ 페이지를 방문하시면 @js-temporal/polyfill을 사용할 수 있습니다. 따라서 TC39 문서 페이지에서 개발자 도구를 열어, 플래그나 환경설정을 변경하지 않고도 어떤 브라우저에서든 콘솔을 통해 일부 예제를 직접 실행해볼 수 있습니다.

실험적인 구현이 점차 도입되고 있는 지금이야말로 Temporal을 시도해 보고, 자바스크립트에서 날짜와 시간을 처리하는 현대적인 접근 방식에 익숙해질 좋은 시점입니다.