다양한 국제적 상황에서 날짜와 시간을 효과적으로 처리하기 위한 현대적인 솔루션인 JavaScript Temporal API에 대한 심층 가이드입니다.
JavaScript Temporal API: 전 세계 사용자를 위한 현대적인 날짜 및 시간 처리
JavaScript의 `Date` 객체는 오랫동안 개발자들에게 골칫거리였습니다. 이 객체의 가변성, 일관성 없는 API, 그리고 부실한 타임존 지원으로 인해 Moment.js나 date-fns와 같은 수많은 라이브러리가 그 간극을 메워왔습니다. 이제 Temporal API를 통해 JavaScript는 명확성과 정밀도를 향상시켜 날짜와 시간을 처리할 수 있는 현대적인 내장 솔루션을 제공합니다. 이 글에서는 Temporal API의 기능, 이점, 그리고 다양한 국제적 맥락에서의 사용법에 초점을 맞춰 포괄적으로 살펴보겠습니다.
Temporal API란 무엇인가?
Temporal API는 `Date` 객체의 단점을 해결하기 위해 설계된 JavaScript의 새로운 전역 객체입니다. 이는 날짜, 시간, 타임존, 달력 시스템을 다루기 위한 깔끔하고 불변적인 API를 제공합니다. 결정적으로, 실제 사용 사례와 기대에 더 가깝게 날짜와 시간 개념을 표현하여 국제화를 훨씬 더 간단하게 만드는 것을 목표로 합니다.
주요 특징:
- 불변성(Immutability): Temporal 객체는 불변입니다. 즉, 날짜나 월을 더하는 등의 작업은 원본 객체를 수정하는 대신 새로운 객체를 반환합니다. 이는 버그의 흔한 원인을 제거하고 코드를 더 쉽게 이해할 수 있게 만듭니다.
- 명확한 API: Temporal은 일반적인 날짜 및 시간 작업을 위한 일관되고 직관적인 API를 제공합니다.
- 타임존 지원: Temporal은 타임존에 대한 강력한 지원을 포함하여, 기존 `Date` 객체의 복잡성 없이 다른 위치의 날짜와 시간을 다룰 수 있게 해줍니다. IANA 타임존 데이터베이스를 사용하여 정확하고 최신 정보를 보장합니다.
- 달력 시스템: 그레고리력 외에도 Temporal은 대체 달력 시스템을 지원하여 다양한 문화와 지역의 요구를 충족합니다.
- 향상된 정밀도: Temporal은 나노초 정밀도를 제공하여 밀리초 기반의 `Date` 객체의 한계를 해결합니다.
기본 Temporal 객체
Temporal API는 여러 새로운 객체 타입을 도입합니다. 다음은 핵심적인 객체들 중 일부입니다:
- `Temporal.PlainDate`: 타임존이 없는 날짜(연, 월, 일)를 나타냅니다.
- `Temporal.PlainTime`: 날짜나 타임존이 없는 시간(시, 분, 초, 밀리초, 마이크로초, 나노초)을 나타냅니다.
- `Temporal.PlainDateTime`: 타임존이 없는 날짜와 시간을 나타냅니다.
- `Temporal.ZonedDateTime`: 특정 타임존을 포함한 날짜와 시간을 나타냅니다.
- `Temporal.Instant`: 유닉스 시간(1970년 1월 1일 UTC) 이후의 나노초 단위로 측정된 특정 시점을 나타냅니다.
- `Temporal.TimeZone`: 타임존을 나타냅니다.
- `Temporal.Duration`: 시간의 길이(예: 2시간 30분)를 나타냅니다.
- `Temporal.YearMonth`: 연도와 월을 나타냅니다.
- `Temporal.MonthDay`: 월과 일을 나타냅니다.
날짜 다루기
`Temporal.PlainDate` 생성하기
`Temporal.PlainDate`를 생성하려면 생성자를 사용할 수 있습니다:
const plainDate = new Temporal.PlainDate(2024, 10, 27); // 연, 월 (1-12), 일
console.log(plainDate.toString()); // 출력: 2024-10-27또한 ISO 8601 형식의 문자열을 받는 `from` 메서드를 사용할 수도 있습니다:
const plainDateFromString = Temporal.PlainDate.from('2024-10-27');
console.log(plainDateFromString.toString()); // 출력: 2024-10-27날짜 구성 요소 가져오기
`year`, `month`, `day`와 같은 속성을 사용하여 개별 날짜 구성 요소에 접근할 수 있습니다:
console.log(plainDate.year); // 출력: 2024
console.log(plainDate.month); // 출력: 10
console.log(plainDate.day); // 출력: 27날짜 연산
일, 주, 월, 또는 연도를 더하거나 빼려면 `plus`와 `minus` 메서드를 사용합니다. 이 메서드들은 새로운 `Temporal.PlainDate` 객체를 반환합니다:
const nextWeek = plainDate.plus({ days: 7 });
console.log(nextWeek.toString()); // 출력: 2024-11-03
const lastMonth = plainDate.minus({ months: 1 });
console.log(lastMonth.toString()); // 출력: 2024-09-27날짜 비교하기
`compare` 메서드를 사용하여 날짜를 비교할 수 있습니다:
const date1 = new Temporal.PlainDate(2024, 10, 27);
const date2 = new Temporal.PlainDate(2024, 11, 15);
console.log(Temporal.PlainDate.compare(date1, date2)); // 출력: -1 (date1이 date2보다 빠름)시간 다루기
`Temporal.PlainTime` 생성하기
`Temporal.PlainTime`을 생성하려면 생성자를 사용합니다:
const plainTime = new Temporal.PlainTime(10, 30, 0); // 시, 분, 초
console.log(plainTime.toString()); // 출력: 10:30:00또는 ISO 8601 시간 문자열과 함께 `from` 메서드를 사용합니다:
const plainTimeFromString = Temporal.PlainTime.from('10:30:00');
console.log(plainTimeFromString.toString()); // 출력: 10:30:00시간 구성 요소 가져오기
console.log(plainTime.hour); // 출력: 10
console.log(plainTime.minute); // 출력: 30
console.log(plainTime.second); // 출력: 0시간 연산
const later = plainTime.plus({ minutes: 15 });
console.log(later.toString()); // 출력: 10:45:00날짜와 시간 함께 다루기
`Temporal.PlainDateTime` 생성하기
`Temporal.PlainDateTime`을 직접 생성하거나 `Temporal.PlainDate`와 `Temporal.PlainTime`을 결합하여 만들 수 있습니다:
const plainDateTime = new Temporal.PlainDateTime(2024, 10, 27, 10, 30, 0);
console.log(plainDateTime.toString()); // 출력: 2024-10-27T10:30:00
const date = new Temporal.PlainDate(2024, 10, 27);
const time = new Temporal.PlainTime(10, 30, 0);
const combinedDateTime = date.toPlainDateTime(time);
console.log(combinedDateTime.toString()); // 출력: 2024-10-27T10:30:00타임존(시간대)
다른 지역의 사용자를 다루는 애플리케이션에서는 타임존을 올바르게 처리하는 것이 중요합니다. Temporal API는 `Temporal.ZonedDateTime`과 `Temporal.TimeZone` 객체를 통해 강력한 타임존 지원을 제공합니다.
`Temporal.ZonedDateTime` 생성하기
`Temporal.ZonedDateTime`을 생성하려면 `Temporal.PlainDateTime`과 타임존 식별자가 필요합니다. 타임존 식별자는 IANA 타임존 데이터베이스를 기반으로 합니다(예: `America/Los_Angeles`, `Europe/London`, `Asia/Tokyo`).
const plainDateTime = new Temporal.PlainDateTime(2024, 10, 27, 10, 30, 0);
const timeZone = 'America/Los_Angeles';
const zonedDateTime = plainDateTime.toZonedDateTime(timeZone);
console.log(zonedDateTime.toString()); // 출력: 2024-10-27T10:30:00-07:00[America/Los_Angeles] (오프셋은 서머타임 규칙에 따라 달라짐)
또는 `Instant`로부터 `Temporal.ZonedDateTime`을 생성할 수도 있습니다.
const instant = Temporal.Instant.fromEpochSeconds(1666866600); // 예시 타임스탬프
const zonedDateTimeFromInstant = instant.toZonedDateTimeISO(timeZone); // 'America/Los_Angeles'와 같은 타임존
console.log(zonedDateTimeFromInstant.toString());타임존 간 변환하기
`withTimeZone` 메서드를 사용하여 `Temporal.ZonedDateTime`을 다른 타임존으로 변환할 수 있습니다:
const newTimeZone = 'Europe/London';
const zonedDateTimeInLondon = zonedDateTime.withTimeZone(newTimeZone);
console.log(zonedDateTimeInLondon.toString()); // 출력: 2024-10-27T18:30:00+01:00[Europe/London]타임존 오프셋 다루기
`Temporal.TimeZone` 객체의 `getOffsetStringFor` 메서드는 주어진 `Temporal.Instant`에 대한 오프셋 문자열을 제공합니다:
const timeZoneObject = new Temporal.TimeZone(timeZone);
const offsetString = timeZoneObject.getOffsetStringFor(zonedDateTime.toInstant());
console.log(offsetString); // 출력: -07:00 (서머타임 규칙에 따라 다름)정확한 계산을 위해서는 올바른 IANA 타임존 식별자를 사용하는 것이 필수적입니다. 이 식별자들은 서머타임 및 타임존 경계의 변경 사항을 반영하기 위해 정기적으로 유지 관리되고 업데이트됩니다.
기간(Durations)
`Temporal.Duration` 객체는 시간의 길이를 나타냅니다. 날짜와 시간에 더하거나 뺄 때 사용할 수 있습니다.
`Temporal.Duration` 생성하기
생성자를 사용하여 연, 월, 일, 시, 분, 초, 밀리초, 마이크로초, 나노초를 지정하여 `Temporal.Duration`을 생성할 수 있습니다:
const duration = new Temporal.Duration(1, 2, 3, 4, 5, 6, 7, 8, 9); // 연, 월, 일, 시, 분, 초, 밀리초, 마이크로초, 나노초
console.log(duration.toString()); // 출력: P1Y2M3DT4H5M6.007008009S또는 ISO 8601 기간 문자열을 사용하여 생성할 수도 있습니다:
const durationFromString = Temporal.Duration.from('P1Y2M3DT4H5M6S');
console.log(durationFromString.toString()); // 출력: P1Y2M3DT4H5M6S날짜와 시간에 기간 추가하기
const plainDate = new Temporal.PlainDate(2024, 10, 27);
const duration = new Temporal.Duration(0, 0, 7); // 7일
const newDate = plainDate.plus(duration);
console.log(newDate.toString()); // 출력: 2024-11-03월이나 연도가 포함된 기간을 날짜에 더할 때는 월이나 연도의 일수가 다를 수 있으므로 신중한 고려가 필요합니다.
달력 시스템
Temporal API는 그레고리력 외에 다른 달력 시스템도 지원합니다. 이는 다양한 문화적 맥락에서 날짜를 처리해야 하는 애플리케이션에 매우 중요합니다. 지원은 아직 발전 중이지만, 향후 확장을 위한 기반을 제공합니다.
대체 달력 사용하기
특정 달력을 사용하려면 Temporal 객체를 생성할 때 지정할 수 있습니다:
const hebrewDate = new Temporal.PlainDate(5785, 1, 1, { calendar: 'hebrew' });
console.log(hebrewDate.toString()); // 특정 출력은 구현 및 형식에 따라 다를 수 있습니다. 이 글을 작성하는 시점에는 많은 환경에서 폴리필이 필요합니다.중요: 비 그레고리력 달력에 대한 지원은 폴리필이나 특정 브라우저/환경 지원이 필요할 수 있습니다. 최신 정보는 Temporal API 문서와 브라우저 호환성 표를 확인하세요.
날짜와 시간 형식 지정하기
Temporal API는 날짜 및 시간 조작에 중점을 두지만, 형식 지정은 일반적으로 국제화 API의 일부인 `Intl.DateTimeFormat` 객체에 의해 처리됩니다. Temporal 객체는 `Intl.DateTimeFormat`과 원활하게 작동합니다.
`Intl.DateTimeFormat` 사용하기
다음은 `Intl.DateTimeFormat`을 사용하여 `Temporal.PlainDate`의 형식을 지정하는 방법입니다:
const plainDate = new Temporal.PlainDate(2024, 10, 27);
const formatter = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
console.log(formatter.format(plainDate)); // 출력: October 27, 2024
const formatterGerman = new Intl.DateTimeFormat('de-DE', { year: 'numeric', month: 'long', day: 'numeric' });
console.log(formatterGerman.format(plainDate)); // 출력: 27. Oktober 2024필요에 맞게 형식 옵션을 사용자 정의할 수 있습니다. `Intl.DateTimeFormat`의 첫 번째 인수는 로케일이며, 이는 형식 지정에 사용되는 언어와 지역별 규칙을 결정합니다. 다른 로케일(예: 'en-US', 'de-DE', 'fr-FR', 'ja-JP')을 사용하면 다른 출력 형식이 생성됩니다.
`Temporal.ZonedDateTime` 형식 지정하기
`Temporal.ZonedDateTime`의 형식 지정도 비슷하지만, 출력에 타임존 정보를 포함할 수도 있습니다:
const plainDateTime = new Temporal.PlainDateTime(2024, 10, 27, 10, 30, 0);
const timeZone = 'America/Los_Angeles';
const zonedDateTime = plainDateTime.toZonedDateTime(timeZone);
const formatter = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZoneName: 'short' });
console.log(formatter.format(zonedDateTime)); // 출력: October 27, 2024, 10:30 AM PDT (타임존 약어는 서머타임 규칙에 따라 달라짐)국제화 모범 사례
전 세계적인 맥락에서 날짜와 시간을 다룰 때는 다음 모범 사례를 염두에 두십시오:
- IANA 타임존 식별자 사용: 정확한 타임존 처리를 위해 항상 IANA 타임존 식별자(예: `America/Los_Angeles`, `Europe/London`)를 사용하십시오.
- 서머타임(Daylight Saving Time) 인지: 서머타임(DST)은 타임존 오프셋에 영향을 줄 수 있습니다. Temporal API는 DST 전환을 자동으로 처리합니다.
- 형식 지정을 위해 `Intl.DateTimeFormat` 사용: 사용자의 로케일에 따라 날짜와 시간의 형식을 지정하려면 `Intl.DateTimeFormat` 객체를 사용하십시오.
- 달력 시스템 고려: 애플리케이션이 다른 문화적 맥락의 사용자를 지원해야 하는 경우 대체 달력 시스템 사용을 고려하십시오.
- 날짜와 시간을 UTC로 저장: 데이터베이스에 날짜와 시간을 저장할 때는 타임존 문제를 피하기 위해 UTC(협정 세계시)로 저장하는 것이 가장 좋습니다. 그런 다음 표시를 위해 현지 시간으로 변환합니다. Temporal은 UTC와의 상호 변환 메서드를 제공합니다.
- 철저한 테스트: 모든 사용자에게 애플리케이션이 올바르게 작동하는지 확인하기 위해 다양한 타임존, 로케일, 달력 시스템으로 테스트하십시오.
Temporal API와 기존 Date 객체 비교
다음은 Temporal API와 기존 `Date` 객체의 주요 차이점과 장점을 강조한 표입니다:
| 기능 | 기존 `Date` 객체 | Temporal API |
|---|---|---|
| 가변성 | 가변적 (원본 객체를 수정함) | 불변적 (새로운 객체를 반환함) |
| 타임존 지원 | 제한적이며 종종 문제가 발생함 | IANA 타임존 데이터베이스 기반으로 강력하고 정확함 |
| API | 일관성 없고 사용하기 어려움 | 명확하고, 일관적이며, 직관적임 |
| 정밀도 | 밀리초 | 나노초 |
| 달력 시스템 | 그레고리력으로 제한됨 | 대체 달력 시스템 지원 (지원은 발전 중) |
| 국제화 | 강력한 국제화를 위해 외부 라이브러리 필요 | 내장 지원 및 `Intl.DateTimeFormat`과의 원활한 통합 |
브라우저 지원 및 폴리필
비교적 새로운 API이므로 Temporal API에 대한 브라우저 지원은 아직 발전 중입니다. 최신 브라우저 호환성 표(예: MDN Web Docs)를 확인하여 어떤 브라우저와 환경이 이를 기본적으로 지원하는지 확인하십시오. 기본 지원이 없는 이전 브라우저나 환경의 경우, 폴리필을 사용하여 Temporal API 기능을 제공할 수 있습니다. 웹에서 "Temporal API polyfill"을 검색하여 적합한 옵션을 찾아보세요.
결론
JavaScript Temporal API는 JavaScript에서 날짜와 시간을 처리하는 데 있어 중요한 진전을 나타냅니다. 이 API의 불변성, 명확한 API, 강력한 타임존 지원, 그리고 달력 시스템 기능은 다양한 국제적 맥락에서 날짜와 시간을 정확하고 신뢰성 있게 다루어야 하는 애플리케이션을 구축하는 개발자에게 강력한 도구가 됩니다. 브라우저 지원은 아직 발전 중이지만, Temporal API의 이점은 새로운 프로젝트에 배우고 채택할 가치가 충분합니다. Temporal API를 받아들이고 국제화 모범 사례를 따름으로써 전 세계 사용자에게 원활하고 정확한 날짜 및 시간 경험을 제공하는 애플리케이션을 만들 수 있습니다.