JavaScript로 작성된 거의 모든 종류의 애플리케이션은 어느 정도 시간이나 날짜와 함께 작동합니다. 처음에는 내장된 Date API로 제한되었습니다. 이 API에는 기본 기능이 포함되어 있지만 수행할 수 있는 작업이 상당히 제한되어 있습니다. Moment.js와 같은 타사 라이브러리와 Intl API 및 새로운 Temporal API와 같은 최신 내장 API는 시간 및 날짜 작업에 훨씬 더 큰 유연성을 추가합니다. Moment.js의 흥망성쇠 Moment.js는 시간과 날짜 작업을 위한 강력한 유틸리티를 갖춘 JavaScript 라이브러리입니다. 여기에는 시간대 조작과 같은 기본 Date API의 누락된 기능이 포함되어 있으며 많은 일반적인 작업을 더 간단하게 만듭니다. Moment에는 날짜와 시간 형식을 지정하는 기능도 포함되어 있습니다. 다양한 응용 프로그램에서 널리 사용되는 라이브러리가 되었습니다. 그러나 Moment에도 문제가 있었습니다. 이는 대규모 라이브러리이므로 애플리케이션의 번들 크기를 크게 늘릴 수 있습니다. 라이브러리는 트리 쉐이킹(라이브러리에서 사용하지 않는 부분을 제거할 수 있는 최신 번들러의 기능)을 지원하지 않기 때문에 해당 기능 중 한두 가지만 사용하더라도 전체 Moment 라이브러리가 포함됩니다. Moment의 또 다른 문제는 Moment가 생성하는 개체가 변경 가능하다는 사실입니다. Moment 개체에서 특정 함수를 호출하면 부작용이 발생하고 해당 개체의 값이 변경됩니다. 이로 인해 예상치 못한 동작이나 버그가 발생할 수 있습니다. 2020년에 Moment의 관리자는 라이브러리를 유지 관리 모드로 전환하기로 결정했습니다. 새로운 기능 개발은 진행되지 않으며 관리자는 새 프로젝트에 이 기능을 사용하지 말 것을 권장합니다. date-fns와 같은 다른 JavaScript 날짜 라이브러리가 있지만 JavaScript에 직접 내장된 API인 Temporal이라는 새로운 플레이어가 있습니다. 이는 원래 Date API의 허점을 메울 뿐만 아니라 Moment 및 기타 라이브러리에서 발견된 일부 제한 사항을 해결하는 새로운 표준입니다. 일시적이란 무엇입니까? Temporal은 최신 JavaScript를 정의하는 ECMAScript 표준에 추가되는 새로운 시간 및 날짜 API입니다. 20266년 3월 현재 TC39 프로세스(JavaScript 언어에 대한 제안 및 추가 사항을 감독하는 위원회)의 4단계에 도달했으며 ECMAScript 사양의 다음 버전에 포함될 예정입니다. Chrome 144+ 및 Firefox 139+ 등 여러 브라우저에서 이미 구현되었으며 Safari도 곧 뒤따를 것으로 예상됩니다. 지원되지 않는 브라우저와 Node.js에도 폴리필을 사용할 수 있습니다. Temporal API는 일반적으로 특정 순간을 나타내는 객체를 생성합니다. 이는 지정된 시간대의 풀타임 및 날짜 스탬프일 수도 있고, 시간대나 날짜 정보가 없는 "벽시계" 시간의 일반적인 인스턴스일 수도 있습니다. Temporal의 주요 기능 중 일부는 다음과 같습니다.
날짜가 있거나 없는 시간. 임시 개체는 특정 날짜의 특정 시간 또는 날짜 정보가 없는 시간을 나타낼 수 있습니다. 시간 없이 특정 날짜를 표시할 수도 있습니다. 시간대 지원. 임시 개체는 시간대를 완전히 인식하며 다양한 시간대에 걸쳐 변환될 수 있습니다. Moment는 시간대도 지원하지만 추가 moment-timezone 라이브러리가 필요합니다. 불변성. 임시 개체가 생성되면 변경할 수 없습니다. 시간 산술 또는 시간대 변환은 기본 개체를 수정하지 않습니다. 대신 새로운 Temporal 객체를 생성합니다. 1 기반 인덱싱. Date API(및 Moment)의 일반적인 버그 원인은 월의 인덱싱이 0이라는 것입니다. 이는 우리 모두가 실제 생활에서 이해하는 것처럼 1월이 1월이 아니라 0월임을 의미합니다. 1 기반 인덱싱을 사용하여 이 문제를 일시적으로 해결합니다. 1월은 1월입니다. 이는 브라우저에 내장되어 있습니다. Temporal은 브라우저 자체의 API이므로 애플리케이션의 번들 크기에 아무것도 추가하지 않습니다.
Date API가 사라지지 않는다는 점에 유의하는 것도 중요합니다. Temporal이 이 API를 대체하지만 제거되거나 더 이상 사용되지 않습니다. 브라우저가 갑자기 Date API를 제거하면 많은 애플리케이션이 중단됩니다. 그러나 Moment는 이제 유지 관리 모드에서 레거시 프로젝트로 간주된다는 점도 명심하세요. 기사의 나머지 부분에서는 Moment 기반 코드를 새로운 Temporal API로 마이그레이션하기 위한 몇 가지 "레시피"를 살펴보겠습니다. 리팩토링을 시작해 보겠습니다! 날짜 및 시간 객체 생성 날짜와 시간을 조작하려면 먼저 이를 나타내는 객체를 만들어야 합니다. 현재 날짜와 시간을 나타내는 Moment 객체를 생성하려면 moment 함수를 사용하십시오. const 지금 = 순간(); console.log(현재); // 순간<2026-02-18T21:26:29-05:00>
이제 필요에 따라 이 개체의 형식을 지정하거나 조작할 수 있습니다.
// UTC로 변환 //경고: 그러면 Moment 개체가 변경되어 UTC 모드로 전환됩니다! console.log(now.utc()); // 순간<2026-02-19T02:26:29Z>
// 형식화된 문자열을 인쇄합니다. 현재 UTC 시간을 사용하고 있습니다. console.log(now.format('MM/DD/YYYY hh:mm:ss a')); // 2026/02/19 오전 02:27:07
Moment에 대해 기억해야 할 중요한 점은 Moment 개체에는 항상 시간과 날짜에 대한 정보가 포함된다는 것입니다. 시간 정보만 사용하면 되는 경우 일반적으로 괜찮지만 일광 절약 시간이나 윤년과 같이 날짜가 시간 계산에 영향을 줄 수 있는 상황에서는 예기치 않은 동작이 발생할 수 있습니다. 임시는 더 유연합니다. Temporal.Instant 개체를 만들어 현재 날짜와 시간을 나타내는 개체를 만들 수 있습니다. 이는 "시대"(1970년 1월 1일 자정 UTC) 이후의 시간으로 정의된 시점을 나타냅니다. Temporal은 나노초 수준의 정밀도로 이 순간을 참조할 수 있습니다. const now = Temporal.Now.instant();
// 에포크 이후 원시 나노초를 확인합니다. console.log(now.epochNanoseconds); // 1771466342612000000n
// UTC 형식 console.log(now.toString()); // 2026-02-19T01:55:27.844Z
// 특정 시간대에 대한 형식 console.log(now.toString({ timeZone: 'America/New_York' })); // 2026-02-18T20:56:57.905-05:00
from 정적 메서드를 사용하여 특정 시간과 날짜에 대한 Temporal.Instant 개체를 만들 수도 있습니다.
const myInstant = Temporal.Instant.from('2026-02-18T21:10:00-05:00');
// 현지 시간대로 순간 형식을 지정합니다. 이는 단지 제어만 가능하다는 점에 유의하세요. // 형식화 - moment.utc처럼 객체를 변경하지 않습니다. console.log(myInstant.toString({ timeZone: 'America/New_York' })); // 2026-02-18T21:10:00-05:00
다음을 포함하여 다른 유형의 임시 개체를 생성할 수도 있습니다.
Temporal.PlainDate: 시간 정보가 없는 날짜입니다. Temporal.PlainTime: 날짜 정보가 없는 시간입니다. Temporal.ZonedDateTime: 특정 시간대의 날짜 및 시간입니다.
이들 각각에는 날짜 및/또는 시간을 지정하는 객체 또는 구문 분석할 날짜 문자열을 사용하여 호출할 수 있는 from 메서드가 있습니다. // 그냥 데이트 const 오늘 = Temporal.PlainDate.from({ 연도: 2026, 월: 2, // 2월에는 2를 사용합니다. 일: 18 }); console.log(today.toString()); // 2026-02-18
// 잠시만요 const lunchTime = Temporal.PlainTime.from({ 시간: 12 }); console.log(lunchTime.toString()); // 12:00:00
// 미국 동부 시간대의 날짜와 시간 const DueAt = Temporal.ZonedDateTime.from({ timeZone: '미국/New_York', 연도: 2026, 월: 3, 일: 1, 시간: 12, 분: 0, 초: 0 }); console.log(dueAt.toString()); // 2026-03-01T12:00:00-05:00[미국/New_York]
파싱 우리는 프로그래밍 방식으로 날짜 및 시간 정보를 생성하는 방법을 다루었습니다. 이제 파싱을 살펴보겠습니다. 구문 분석은 Moment가 내장된 Temporal API보다 더 유연한 영역 중 하나입니다. 날짜 문자열을 moment 함수에 전달하여 구문 분석할 수 있습니다. 단일 인수를 사용하면 Moment는 ISO 날짜 문자열을 기대하지만 사용되는 날짜 형식을 지정하는 두 번째 인수를 제공하는 경우 대체 형식을 사용할 수 있습니다.
const isoDate = moment('2026-02-21T09:00:00'); const formatdDate = moment('2/21/26 9:00:00', 'M/D/YY h:mm:ss');
console.log(isoDate); // 순간<2026-02-21T09:00:00-05:00>
console.log(formattedDate); // 순간<2026-02-21T09:00:00-05:00>
이전 버전에서는 Moment가 임의 형식의 날짜 문자열을 구문 분석하기 위해 최선의 추측을 했습니다. 이로 인해 예측할 수 없는 결과가 발생할 수 있습니다. 예를 들어 02-03-2026은 2월 2일인가요, 아니면 3월 3일인가요? 이러한 이유로 최신 버전의 Moment는 ISO 형식의 날짜 문자열 없이 호출되면(원하는 형식의 두 번째 인수도 제공되지 않는 한) 눈에 띄는 지원 중단 경고를 표시합니다. Temporal은 특별히 형식이 지정된 날짜 문자열만 구문 분석합니다. 문자열은 ISO 8601 형식 또는 해당 확장인 RFC 9557을 준수해야 합니다. 준수하지 않는 날짜 문자열이 from 메서드에 전달되면 Temporal은 RangeError를 발생시킵니다.
// RFC 9557 날짜 문자열 사용 const myDate = Temporal.Instant.from('2026-02-21T09:00:00-05:00[America/New_York]'); console.log(myDate.toString({ timeZone: 'America/New_York' })); // 2026-02-21T09:00:00-05:00
// 알 수 없는 날짜 문자열 사용 const otherDate = Temporal.Instant.from('2/21/26 9:00:00'); // RangeError: 일시적 오류: 연도 값을 구문 분석하는 중 문자가 잘못되었습니다.
날짜 문자열의 정확한 요구 사항은 생성하는 Temporal 개체의 종류에 따라 다릅니다. 위의 예에서 Temporal.Instant에는 전체 ISO가 필요합니다.8601 또는 RFC 9557 날짜 문자열은 시간대 오프셋을 사용하여 날짜 및 시간을 지정하지만 날짜 형식의 하위 집합만 사용하여 PlainDate 또는 PlainTime 개체를 만들 수도 있습니다. const myDate = Temporal.PlainDate.from('2026-02-21'); console.log(myDate.toString()); // 2026-02-21
const myTime = Temporal.PlainTime.from('09:00:00'); console.log(myTime.toString()); // 09:00:00
이러한 문자열은 여전히 예상 형식을 준수해야 합니다. 그렇지 않으면 오류가 발생합니다.
// 비호환 시간 문자열을 사용합니다. 이것들은 모두 RangeError를 발생시킵니다. Temporal.PlainTime.from('9:00'); Temporal.PlainTime.from('오전 9:00:00');
전문가 팁: ISO가 아닌 문자열 처리 Temporal은 안정성을 우선시하므로 02-01-2026과 같은 문자열 형식을 추측하려고 시도하지 않습니다. 데이터 소스가 이러한 문자열을 사용하는 경우 Temporal과 함께 사용하기 전에 문자열 조작을 수행하여 값을 2026-02-01과 같은 ISO 문자열로 다시 정렬해야 합니다.
서식 지정 Moment 또는 Temporal 개체가 있으면 어느 시점에서 이를 형식화된 문자열로 변환하고 싶을 것입니다. 이것은 Moment가 좀 더 간결한 예입니다. 원하는 날짜 형식을 설명하는 토큰 문자열을 사용하여 객체의 형식 메서드를 호출합니다. const 날짜 = 순간();
console.log(date.format('MM/DD/YYYY')); // 2026년 2월 22일
console.log(date.format('MMMM Do YYYY, h:mm:ss a')); // 2026년 2월 22일, 오후 8시 18분 30초
반면 Temporal에서는 좀 더 장황한 설명이 필요합니다. Instant와 같은 임시 개체에는 개체의 속성으로 지정된 다양한 형식 지정 옵션을 허용하는 toLocaleString 메서드가 있습니다.
const 날짜 = Temporal.Now.instant();
// 인수가 없으면 현재 로케일의 기본 형식을 얻습니다. console.log(date.toLocaleString()); // 2026년 2월 22일, 오후 8:23:36 (로캘이 en-US라고 가정)
// 사용자 정의 형식 문자열을 생성하기 위해 형식 지정 옵션을 전달합니다. console.log(date.toLocaleString('en-US', { 월: '길다', 일: '숫자', 연도: '숫자', 시: '2자리', 분: '2자리' })); // 2026년 2월 22일 오후 8시 23분
// 형식 문자열에서 원하는 필드만 전달합니다. console.log(date.toLocaleString('en-US', { 월: '짧음', 일: '숫자' })); // 2월 22일
임시 날짜 형식은 실제로 내부적으로 Intl.DateTimeFormat API(최신 브라우저에서 이미 쉽게 사용할 수 있음)를 사용합니다. 즉, 사용자 정의 서식 지정 옵션을 사용하여 재사용 가능한 DateTimeFormat 개체를 만든 다음 Temporal 개체를 해당 형식 메서드에 전달할 수 있습니다. 이 때문에 Moment와 같은 사용자 정의 날짜 형식을 지원하지 않습니다. '2026년 1분기' 또는 기타 특수 형식이 필요한 경우 사용자 정의 날짜 형식 코드가 필요하거나 타사 라이브러리를 이용할 수 있습니다. const formatter = new Intl.DateTimeFormat('en-US', { 월: '2자리', 일: '2자리', 연도: '숫자' });
const 날짜 = Temporal.Now.instant(); console.log(formatter.format(date)); // 2026년 2월 22일
Moment의 형식 지정 토큰은 작성하기가 더 간단하지만 로케일 친화적이지 않습니다. 형식 문자열은 월/일 순서와 같은 "하드 코드" 항목을 나타냅니다. Temporal과 마찬가지로 구성 개체를 사용하면 주어진 로케일에 자동으로 적응하고 올바른 형식을 사용한다는 이점이 있습니다. const 날짜 = Temporal.Now.instant();
const 형식옵션 = { 월: '숫자', 일: '숫자', 연도: '숫자' };
console.log(date.toLocaleString('en-US', formatOptions)); // 2026년 2월 22일
console.log(date.toLocaleString('en-GB', formatOptions)); // 2026년 2월 22일
날짜 계산 많은 응용 프로그램에서는 날짜에 대한 일부 계산을 수행해야 합니다. 시간 단위(일, 시간, 초 등)를 더하거나 뺄 수 있습니다. 예를 들어 현재 날짜가 있는 경우 지금으로부터 1주일 후의 날짜를 사용자에게 표시할 수 있습니다. Moment 객체에는 이러한 작업을 수행하는 add 및 subtract와 같은 메서드가 있습니다. 이러한 함수는 값과 단위를 사용합니다(예: add(7, 'days')). 그러나 Moment와 Temporal의 매우 중요한 차이점 중 하나는 이러한 날짜 계산을 수행할 때 기본 개체가 수정되고 원래 값이 손실된다는 것입니다. const 지금 = 순간();
console.log(현재); // 순간<2026-02-24T20:08:36-05:00>
const nextWeek = now.add(7, '일'); console.log(nextWeek); // 순간<2026-03-03T20:08:36-05:00>
// 알았습니다 - 원본 개체가 변경되었습니다. console.log(현재); // 순간<2026-03-03T20:08:36-05:00>
원본 날짜 손실을 방지하려면 Moment 개체에 대해 clone을 호출하여 복사본을 만들 수 있습니다. 지금은 const= 순간(); const nextWeek = now.clone().add(7, '일');
console.log(현재); // 순간<2026-02-24T20:12:55-05:00>
console.log(nextWeek); // 순간<2026-03-03T20:12:55-05:00>
반면에 Temporal 개체는 변경할 수 없습니다. Instant, PlainDate 등과 같은 개체를 만든 후에는 해당 개체의 값이 변경되지 않습니다. 임시 객체에는 더하기 및 빼기 메소드도 있습니다. 시간은 어떤 개체 유형에 어떤 시간 단위를 추가할 수 있는지에 대해 약간 까다롭습니다. 예를 들어 인스턴트에는 날짜를 추가할 수 없습니다.
const now = Temporal.Now.instant(); const nextWeek = now.add({일: 7 }); // RangeError: 일시적 오류: 가장 큰 단위는 날짜 단위가 될 수 없습니다.
이는 Instant 개체가 UTC의 특정 시점을 나타내고 달력에 구애받지 않기 때문입니다. 하루의 길이는 일광 절약 시간과 같은 시간대 규칙에 따라 변경될 수 있으므로 Instant에서는 이 계산을 사용할 수 없습니다. 그러나 PlainDateTime과 같은 다른 유형의 객체에 대해서는 이 작업을 수행할 수 있습니다. const 이제 = Temporal.Now.plainDateTimeISO(); console.log(now.toLocaleString()); // 2026/2/24, 오후 8:23:59
const nextWeek = now.add({일: 7 });
// 원래 PlainDateTime은 변경되지 않은 상태로 유지됩니다. console.log(now.toLocaleString()); // 2026/2/24, 오후 8:23:59
console.log(nextWeek.toLocaleString()); // 2026년 3월 3일, 오후 8:23:59
두 Moment 또는 Temporal 개체 사이의 시간이 얼마나 되는지 계산할 수도 있습니다. Moment의 diff 기능을 사용하면 세분성을 위한 단위를 제공해야 합니다. 그렇지 않으면 차이가 밀리초 단위로 반환됩니다. const date1 = 순간('2026-02-21T09:00:00'); const date2 = 순간('2026-02-22T10:30:00');
console.log(date2.diff(date1)); // 91800000
console.log(date2.diff(date1, '일')); // 1
Temporal 객체를 사용하여 이 작업을 수행하려면 다른 Temporal 객체를 해당 객체의 Until 또는 Since 메소드에 전달할 수 있습니다. 그러면 시차에 대한 정보가 포함된 Temporal.Duration 개체가 반환됩니다. Duration 개체에는 차이의 각 구성 요소에 대한 속성이 있으며 시간 차이를 나타내는 ISO 8601 기간 문자열을 생성할 수도 있습니다.
const date1 = Temporal.PlainDateTime.from('2026-02-21T09:00:00'); const date2 = Temporal.PlainDateTime.from('2026-02-22T10:30:00');
// maximumUnit은 나타낼 시간의 가장 큰 단위를 지정합니다. // 기간 계산에서 const diff = date2.since(date1, { maximumUnit: 'day' });
console.log(diff.days); // 1
console.log(diff.hours); // 1
console.log(diff.분); // 30
console.log(diff.toString()); // P1DT1H30M // (ISO 8601 기간 문자열: 1일, 1시간, 30분)
날짜와 시간 비교 순간과 시간 모두 날짜와 시간을 비교하여 어느 것이 다른 것보다 먼저 오는지 결정할 수 있지만 API에서는 다른 접근 방식을 취합니다. Moment는 두 Moment 객체를 비교하기 위해 isBefore, isAfter 및 isSame과 같은 메서드를 제공합니다. const date1 = 순간('2026-02-21T09:00:00'); const date2 = 순간('2026-02-22T10:30:00');
console.log(date1.isBefore(date2)); // 사실
Temporal은 정적 비교 방법을 사용하여 동일한 유형의 두 개체 간의 비교를 수행합니다. 첫 번째 날짜가 두 번째 날짜 이전에 오면 -1을 반환하고, 두 날짜가 같으면 0을, 첫 번째 날짜가 두 번째 날짜 이후에 오면 1을 반환합니다. 다음 예에서는 두 개의 PlainDate 개체를 비교하는 방법을 보여줍니다. Temporal.PlainDate.compare에 대한 두 인수는 모두 PlainDate 개체여야 합니다.
const date1 = Temporal.PlainDate.from({ 연도: 2026, 월: 2, 일: 24 }); const date2 = Temporal.PlainDate.from({ 연도: 2026, 월: 3, 일: 24 });
// date1이 date2보다 앞에 오므로 -1 console.log(Temporal.PlainDate.compare(date1, date2));
// 서로 다른 유형의 두 개체를 비교하려고 하면 오류가 발생합니다. console.log(Temporal.PlainDate.compare(date1, Temporal.Now.instant())); // TypeError: 일시적 오류: 잘못된 PlainDate 필드가 제공되었습니다.
특히 이를 통해 Temporal 개체 배열을 시간순으로 쉽게 정렬할 수 있습니다. // Temporal.PlainDate 객체의 배열 const 날짜 = [ ... ];
// 비교기 함수로 Temporal.PlainDate.compare를 사용합니다. 날짜.정렬(Temporal.PlainDate.compare);
시간대 변환 핵심 Moment 라이브러리는 시간대 변환을 지원하지 않습니다. 이 기능이 필요한 경우 moment-timezone 패키지도 설치해야 합니다. 이 패키지는 트리 쉐이킹이 불가능하므로 번들 크기가 크게 늘어날 수 있습니다. moment-timezone을 설치한 후에는 tz 메소드를 사용하여 Moment 객체를 다른 시간대로 변환할 수 있습니다. 다른 Moment 작업과 마찬가지로 이는 기본을 변경합니다.물체. // 미국 동부 시간을 가정 const 지금 = 순간(); console.log(현재); // 순간<2026-02-28T20:08:20-05:00>
// 태평양 표준시로 변환합니다. // 원래 동부 시간이 손실됩니다. now.tz('아메리카/Los_Angeles'); console.log(현재); // 순간<2026-02-28T17:08:20-08:00>
Temporal.ZonedDateTime 객체를 사용할 때 시간대 기능은 Temporal API에 내장되어 있습니다. 이러한 객체에는 지정된 시간대에서 동일한 순간을 나타내는 새 ZonedDateTime을 반환하는 withTimeZone 메서드가 포함되어 있습니다. // 이번에도 미국 동부 시간을 가정합니다. const now = Temporal.Now.zonedDateTimeISO(); console.log(now.toLocaleString()); // 2026년 2월 28일, 오후 8시 12분 2초(EST)
// 태평양 표준시로 변환 const nowPacific = now.withTimeZone('America/Los_Angeles'); console.log(nowPacific.toLocaleString()); // 2026년 2월 28일, 오후 5시 12분 2초(PST)
// 원본 객체는 변경되지 않고 그대로 유지됩니다. console.log(now.toLocaleString()); // 2026년 2월 28일, 오후 8시 12분 2초(EST)
참고: toLocaleString이 반환하는 형식화된 값은 이름에서 알 수 있듯이 로케일에 따라 다릅니다. 샘플 코드는 en-US 로케일로 개발되었으므로 형식은 2026년 2월 28일, 오후 5시 12분 2초(PST)와 같습니다. 다른 로케일에서는 이와 다를 수 있습니다. 예를 들어, en-GB 로케일에서는 28/2/2026, 17:12:02 GMT-8과 같은 결과를 얻게 됩니다. 실제 리팩토링 다양한 시간대에 걸쳐 이벤트를 예약하는 앱을 구축한다고 가정해 보겠습니다. 이 앱의 일부는 이벤트 시간과 날짜, 현지 시간대, 대상 시간대를 나타내는 ISO 8601 문자열을 사용하는 getEventTimes 함수입니다. 이 함수는 두 시간대의 이벤트에 대해 형식화된 시간 및 날짜 문자열을 생성합니다. 함수에 유효한 시간/날짜 문자열이 아닌 입력 문자열이 제공되면 오류가 발생합니다. Moment를 사용한 원래 구현은 다음과 같습니다(moment-timezone 패키지도 사용해야 함).
'순간 시간대'에서 순간을 가져옵니다.
함수 getEventTimes(inputString, userTimeZone, targetTimeZone) { const timeFormat = 'MMM D, YYYY, h:mm:ss a z';
// 1. 사용자의 시간대에 초기 순간을 생성합니다. const eventTime = 순간.tz( 입력문자열, moment.ISO_8601, // ISO 8601 문자열이 필요합니다. true, // 엄격한 구문 분석 사용자 시간대 );
// inputString이 유효한 날짜를 나타내지 않으면 오류가 발생합니다. if (!eventTime.isValid()) { throw new Error('잘못된 날짜/시간 입력'); }
// 2. 목표 시간 계산 // 중요: 복제해야 합니다. 그렇지 않으면 'eventTime'이 영원히 변경됩니다! const targetTime = eventTime.clone().tz(targetTimeZone);
반환 { 지역: eventTime.format(timeFormat), 대상: targetTime.format(timeFormat), }; }
const 일정 = getEventTimes( '2026-03-05T15:00-05:00', '미국/뉴욕', '유럽/런던', );
console.log(schedule.local); // 2026년 3월 5일, 오후 3시(EST)
console.log(schedule.target); // 2026년 3월 5일, 오후 8:00:00(GMT)
이 예에서는 Moment에 내장되어 있는 ISO 8601의 예상 날짜 형식을 사용하고 있습니다. 또한 엄격한 구문 분석을 사용하고 있습니다. 즉, Moment는 형식과 일치하지 않는 날짜 문자열로 추측을 시도하지 않습니다. ISO가 아닌 날짜 문자열이 전달되면 잘못된 날짜 개체가 발생하고 오류가 발생합니다. 임시 구현은 유사해 보이지만 몇 가지 주요 차이점이 있습니다.
함수 getEventTimes(inputString, userTimeZone, targetTimeZone) { // 1. 입력을 Instant로 직접 구문 분석한 다음 생성합니다. // 사용자 영역의 ZonedDateTime. const instant = 임시.Instant.from(inputString); const eventTime = instant.toZonedDateTimeISO(userTimeZone);
// 2. 대상 영역으로 변환 // 자동으로 새로운 객체를 반환합니다. 'eventTime'은 안전합니다. const targetTime = eventTime.withTimeZone(targetTimeZone);
// 3. Intl을 사용한 형식(내장) const 옵션 = { 연도: '숫자', 월: '짧음', 일: '숫자', 시간: '숫자', 분: '2자리', 두 번째: '2자리', timeZoneName: '짧음' };
반환 { 지역: eventTime.toLocaleString(navigator.언어, 옵션), 대상: targetTime.toLocaleString(navigator.언어, 옵션) }; }
const 일정 = getEventTimes( '2026-03-05T15:00-05:00', '미국/뉴욕', '유럽/런던', );
console.log(schedule.local); // 2026년 3월 5일, 오후 3시(EST)
console.log(schedule.target); // 2026년 3월 5일, 오후 8:00:00(GMT)
Moment를 사용하면 결과 날짜 문자열에 대한 형식 문자열을 명시적으로 지정해야 합니다. 사용자의 위치나 지역에 관계없이 이벤트 시간은 항상 2026년 3월 5일, 3:00:00 형식으로 지정됩니다.오후 EST. 또한 명시적으로 예외를 던질 필요도 없습니다. 잘못된 문자열이 Temporal.Instant.from에 전달되면 Temporal에서 예외가 발생합니다. 한 가지 주목할 점은 엄격한 구문 분석에도 불구하고 Moment 버전이 여전히 더 관대하다는 것입니다. 임시에는 문자열 끝에 시간대 오프셋이 필요합니다. navigator.언어를 사용하고 있으므로 navigator가 Node.js 환경에 정의되어 있지 않기 때문에 이 코드는 브라우저 환경에서만 실행됩니다. 임시 구현은 브라우저의 현재 로케일(navigator.언어)을 사용하므로 사용자는 자동으로 현지 시간 형식으로 형식화된 이벤트 시간을 가져옵니다. en-US 로케일에서는 2026년 3월 5일 오후 3시(EST)입니다. 그러나 예를 들어 사용자가 런던에 있는 경우 이벤트 시간 형식은 2026년 3월 5일, 15:00:00 GMT-5로 지정됩니다. 요약
액션 순간.js 일시적 현재 시간 순간() Temporal.Now.zonedDateTimeISO() ISO 구문 분석 순간(str) 임시.인스턴트.from(str) 시간 추가 .add(7, 'days') (변형) .add({ days: 7 }) (새 객체) 차이 .diff(기타, '시간') .부터(기타).시간 시간대 .tz('영역/이름') .withTimeZone('구역/이름')
언뜻 보면 차이가 약간 다를 수 있지만(Temporal의 경우 때로는 더 장황하고 더 엄격함) 구문이 Moment.js보다 Temporal을 사용하면 몇 가지 주요 이점이 있습니다.
더 명확하다는 것은 놀라움과 의도하지 않은 버그가 줄어든다는 것을 의미합니다. 순간은 좀 더 관대해 보일 수 있지만 "추측"이 수반되어 때로는 잘못된 날짜가 발생할 수 있습니다. Temporal에 유효하지 않은 값을 지정하면 오류가 발생합니다. 코드가 실행되면 유효한 날짜가 있다는 것을 알 수 있습니다. Moment는 특히 moment-timezone 패키지를 사용하는 경우 애플리케이션 번들에 상당한 크기를 추가할 수 있습니다. Temporal은 아무것도 추가하지 않습니다(대상 브라우저에 제공되면). 불변성은 날짜 변환 및 작업을 수행할 때 데이터를 잃거나 덮어쓰지 않을 것이라는 확신을 줍니다. 요구 사항에 따라 다양한 시간 표현(Instant, PlainDateTime, ZonedDateTime). Moment는 항상 UTC 타임스탬프를 둘러싼 래퍼입니다. Temporal은 날짜 형식 지정에 Intl API를 사용합니다. 즉, 토큰을 명시적으로 지정하지 않고도 로케일 인식 형식을 사용할 수 있습니다.
폴리필에 대한 참고 사항 앞서 언급했듯이 @js-temporal/polyfill이라는 npm 패키지로 배포되는 임시 폴리필이 있습니다. 지금 Temporal을 사용하려면 아직 API를 제공하지 않은 Safari와 같은 브라우저를 지원하기 위해 이 폴리필이 필요합니다. 이에 대한 나쁜 소식은 번들 크기가 증가한다는 것입니다. 좋은 소식은 여전히 순간 또는 순간 시간대보다 훨씬 적은 양을 추가한다는 것입니다. 다음은 npm 패키지 크기에 대한 정보를 제공하는 웹사이트인 Bundlephobia.com에서 보고한 번들 크기 비교입니다(번들포비아 분석을 보려면 각 패키지 이름을 클릭하세요).
패키지 축소된 축소 및 gzip으로 압축됨 @js-임시/폴리필 154.1KB 44.1KB 순간 294.4KB 75.4KB 순간 시간대 1MB 114.2KB
또한 폴리필은 역사적으로 메모리 사용량과 관련해 몇 가지 성능 문제를 안고 있었으며, 이 글을 쓰는 시점에서는 알파 상태인 것으로 간주됩니다. 이로 인해 더 성숙한 상태에 도달할 때까지 프로덕션에서 사용하고 싶지 않을 수 있습니다. 또 다른 좋은 소식은 폴리필이 더 이상 필요하지 않을 것이라는 점입니다(물론 이전 브라우저를 지원해야 하는 경우는 제외). 글을 쓰는 시점에서 Temporal은 Chrome, Edge 및 Firefox로 출시되었습니다. Safari에서는 아직 준비가 완료되지 않았지만 최신 기술 프리뷰에서는 런타임 플래그를 통해 사용할 수 있는 것으로 보입니다.
