2022년 자바스크립트 날짜는 여전히 혼란스럽습니다 📅

Javascript는 특히 날짜 작업을 할 때 겸손한 언어가 될 수 있습니다(또는 완전히 실망스럽기도 합니다!). 나는 최근에 직장에서 끝내고 있는 새로운 기능에 대한 단위 테스트를 작성하는 이상한 경험을 했습니다. 내 컴퓨터에서 테스트를 실행했을 때 모두 ✅를 통과했습니다. 그러나 실망스럽게도 목요일 오후 4시 30분에 테스트가 지속적 통합 환경에서 실행되었을 때 날짜가 하루 쉬었습니다! 여기에서 내 테스트에서 내 "모의 날짜"를 생성하는 역할을 하는 겉보기에 무해해 보이는 코드 행인 전시회 A를 볼 수 있습니다.

(면책 조항: 입력 날짜 형식은 내가 결정한 것이 아니라 내 앱이 의존하는 API에서 날짜 표현이 반환되는 방식입니다.)

const date = new Date('2022-07-01');

console.log(new Date(date).toLocaleDateString()); // 6/30/2022

내가 잘못한 곳

우선, 내가 입력한 날짜가 아니라 1일 전이라는 것을 인식했어야 했습니다. 그러나 날짜 형식은 당시 내가 작업한 작업의 가장 중요한 부분이 아니었고 하루가 끝나고 피곤했기 때문에 내 스냅샷에 저장된 날짜가 1이라는 것을 알아차리지 못했습니다. 내가 넣은 것보다 하루 뒤.

CI 환경에서 실행되는 테스트 코드로 빨리 감기 - 그리고 💣 - 실패했습니다! 어떻게 이런 일이 있을 수 있지? 저는 전문적인 Typescript/Javascript 개발자입니다. 확실히 지금쯤이면 이 언어의 모든 단점을 알고 있었겠죠!!??

이로 인해 몇 가지 테스트와 생각을 하게 되었고 마지막으로 (처음부터 해야 했던 것) 인터넷 검색을 하게 되었고 여기까지 왔습니다.

https://stackoverflow.com/questions/7556591/is-the-javascript-date-object-always-one-day-off#:~:text=Javascript's Date class doesn't,%3A00 GMT-0400

그 범인

결과적으로 Date와 같은 형식의 문자열을 사용하여 YYYY-MM-DD를 구성할 때 Date.parse 메서드는 날짜 입력 문자열 지정의 보다 엄격한 형식인 ISO-8601을 사용합니다. 이로 인해 자정에 UTC 참조 프레임에서 구문 분석됩니다. 나는 America/New_York 시간대(연중 시간에 따라 -4:00 EST 또는 -5:00 EDT)에 있기 때문에 - UTC 시간으로 지정된 날의 자정은 항상 EST 또는 EDT 시간으로 "하루 전"입니다. 🤯.

이 약간 불안정한 동작을 처리할 때 사용할 수 있는 두 가지 전략이 있습니다.

내가 어떻게 대처했는지

그래서 제 경우에는 UI에 올바르게 맞도록 타임스탬프의 형식을 약간 변경해야 했습니다. 소스 API는 EST/EDT 시간대에서 항상 YYYY-MM-DD 형식으로 보장된 날짜를 제공했습니다. 이것을 알면 UTC 시간으로 내가 만든 javascript 날짜 개체를 간단히 참조할 수 있습니다. 이것이 구문 분석되는 방식이기 때문입니다. 이렇게 하면 우발적인 "1일 휴무"변환을 방지할 수 있으므로 서식을 적용하고 항상 날짜를 입력 날짜와 정확히 동일하게 유지할 수 있습니다(입력 날짜의 시간대가 내가 "유지"하려는 것이라고 가정할 때) 이 경우에는 사실입니다).

function formatDateString(dateString: string) {
  const date = new Date(dateString);

  let day: string | number = date.getUTCDate();
  day = day >= 10 ? day : "0" + day;

  let month: string | number = date.getUTCMonth() + 1; // another JS quirk - month's are zero indexed 0-11
  month = month >= 10 ? month : "0" + month;

  const year = date.getUTCFullYear();

  return `${month}/${day}/${year}`;
}

console.log(formatDateString("2022-07-01")); // 07/01/2022

결론

날짜를 너무 많이 사용하지 않고 date-fns 또는 dayjs와 같은 라이브러리를 사용합니다. 이 경우 "이것은 단순한 날짜 형식 변환입니다. 무엇이 잘못될 수 있습니까?"라고 생각했습니다. 결국, 제 인생에서 30분을 더 시간을 들여 제대로 만들었지만, 전반적으로 이전에 알지 못했던 이 언어의 기이함을 볼 수 있어서 감사합니다!