JS 및 임시 제안의 날짜

내blog에서 영어와 스페인어로 원본 게시물을 확인할 수 있습니다.

If you're a developer, you have used dates at a certain point in your life, and if you have used dates, you probably had a hard time

대부분의 사람들은 나와 동의합니다. Javascript에서 날짜를 처리하는 것 자체가 고통스러울 수 있기 때문에 커뮤니티에서 momentjs , date-fns , luxon , dayjs 및 기타 훌륭한 작업을 수행하는 라이브러리를 만들었습니다! 그러나 무엇보다도 먼저 이 노인과 아마도 다른 모든 사람들의 부모에 대해 이야기하고 싶습니다. MomentJS

약간의 역사

MomentJS는 정말 강력한 라이브러리였으며 지금도 여전히 강력합니다. 최근까지 거의 모든 사람들이 즐겨 찾는 라이브러리였습니다. 이 라이브러리는 2011년에 만들어졌다는 사실을 명심해야 합니다. (더 많은 맥락을 제공하기 위해 ES6은 2015년 6월에 출시되었습니다) 많은 발전을 했기 때문에 이 라이브러리는 그 전에 구축되었습니다.

사람들이 MomentJS가 무겁고 더 새롭고 더 빠른 대안이 나타나기 시작했다는 것을 깨닫기 시작한 후, MomentJS의 끝이 가까워지고 있었습니다. 더 이상 하는 것이 좋습니다.) MomentJS의 주요 문제점은 "트리 쉐이킹"에 대한 지원이 부족하다는 것입니다.

작년에 Chrome Dev Tools는 웹사이트의 크기에 대해 불평하기 시작했고 개발자가 주기를 닫고 MomentJS 시대를 끝내도록 강요하는 momentJS에서 다른 대안으로 전환할 것을 권장했습니다.

마지막으로 중요한 것은 MomentJS 뒤에 있는 팀이 수년에 걸쳐 수행한 모든 노고에 감사하며, 네이티브 JS 날짜 처리 기능의 미래를 형성하는 데 도움을 주는 노력 덕분입니다.

템포럴의 등장

Temporal은 외부 라이브러리 없이 브라우저의 날짜 처리에 대한 기본 지원을 제공하기 위해 향후 JS 버전(이 모든 것이 TC39에서 처리되는 ES6, ES7)에 포함되기를 원하는 제안입니다. 이전에는 날짜를 처리하는 것이 얼마나 어려웠지만 이제 거의 모든 웹 사이트에 하나의 날짜 라이브러리(date-fns, dayjs 등)가 포함되어 있고 페이지를 방문할 때마다 이러한 라이브러리 중 하나에 대한 코드를 지속적으로 다운로드하기 때문에 잘 작동하는 기본 솔루션을 사용하면 시간을 절약할 수 있습니다(죄송하지 않습니다Date Object).

몇 가지 코드 샘플을 시작하겠습니다.

나도 알아요... 날짜와 JS 히스토리로 지루해하지만 맥락을 파악하는 것이 좀 중요했습니다. 이제 재미있는 부분으로 넘어가서 기본적인 날짜 처리 기능을 구현해 보겠습니다!

제안이 아직 수락되지 않았기 때문에 모든 기능을 사용하려면 임시 폴리필을 사용해야 합니다.

$ npm install --save proposal-temporal

const { Temporal } = require('proposal-temporal');

//Or, import it as an ES6 module:
import { Temporal } from 'proposal-temporal/lib/index.mjs';

현재 시간을 처리하고 재생하기 위해 다른 형식/다른 시간대의 날짜를 가져오는 몇 가지 기능이 포함된 Temporal.now 개체를 사용합니다.

Temporal.now = {
    instant: [Function: instant$1],
    plainDateTime: [Function: plainDateTime],
    plainDateTimeISO: [Function: plainDateTimeISO],
    plainDate: [Function: plainDate],
    plainDateISO: [Function: plainDateISO],
    plainTimeISO: [Function: plainTimeISO],
    timeZone: [Function: timeZone],
    zonedDateTime: [Function: zonedDateTime],
    zonedDateTimeISO: [Function: zonedDateTimeISO]
}
Temporal.now.instant() // Temporal.Instant <2021-04-13T00:35:19.899119896Z>
Temporal.now.timeZone() // Temporal.TimeZone <America/Chihuahua>

일반 날짜, 시간, DateTimes

Temporal은 모두 "일반"이기 때문에 내가 그룹화하는 몇 가지 클래스를 추가하지만 그 내부에 강력하게 만들기 위해 많은 메서드를 포함합니다. 먼저 초기화해야 함을 명심하십시오.

const date = new Temporal.PlainDate(2020, 05, 22); // Temporal.PlainDate <2020-05-22
const time = new Temporal.PlainTime(04, 20); // Temporal.PlainTime <04:20:00>

// we can also use some properties to get cool info
const daysInWeek = date.daysInWeek; // 7
const daysInMonth = date.daysInMonth; //31

일부 날짜 차이 샘플

<P862D>로 표시된 이 샘플의 기간은 P(기간) 및 T(시간)로 시작하는 ISO 8601에서 시작됩니다.

const temporalStart = new Temporal.PlainDate(1997, 05, 22);
const temporalEnd = new Temporal.PlainDate(1999, 10, 01);
const temporalDiff = temporalEnd.since(temporalStart);
d = Temporal.Duration.from(temporalDiff); 
// in this sample 
// d = Temporal.Duration <P862D> {
//   days: 862
// }

시간대

시간대는 전 세계의 사용자를 대상으로 하는 웹 앱을 구축할 때 핵심이며 프로그래밍 컨텍스트 밖에서 놀고 머리를 감싸는 것조차 어려울 수 있습니다(또는 적어도 저에게는 너무 어렵습니다 하하).

//know the time at London
Temporal.now.zonedDateTimeISO('Europe/London') //Temporal.ZonedDateTime <2021-04-13T02:26:27.448187407+01:00[Europe/London]>

출처

https://momentjs.com/docs/

https://github.com/tc39/proposal-temporal

https://syntax.fm/show/295/hasty-treat-temporal-date-objects-in-javascript