RangeError: Invalid Date

TL;DR

• Safari 브라우저는 YYYY.MM.DD 패턴의 문자열로 Date 객체를 생성할 수 없다.
• Chrome 과 Safari 브라우저 모두 YYYY-MM-DD 패턴의 문자열로 Date 객체를 생성할 수 있다.
• Chrome 과 Safari 브라우저 모두 YYYYMMDD 패턴의 문자열로 Date 객체를 생성할 수 없다.

RangeError: Invalid Date

크롬 브라우저를 사용하는 안드로이드에서는 정상적으로 동작했던 코드가 사파리 브라우저를 사용하는 iOS 에서 RangeError 가 발생했다. Invalid Date는 Date 객체를 생성하려고 할때 올바르지 않은 String 이 주어진 경우의 오류를 의미한다. 최근 수정된 코드를 보니 YYYY.MM.DD 패턴의 문자열을 가져와서 코드 로직 상 Day.js 라이브러리에 의해 날짜 객체를 생성하고 있음을 확인할 수 있었다. 그리고 dayjs()로 객체를 생성할 때 내부적으로 자바스크립트의 Date 객체를 생성하기 때문에 오류가 발생한 것으로 보인다.

Safari Date RFC822

크롬 브라우저를 사용하는 안드로이드에서는 정상적으로 동작하는 코드이기 때문에 사파리 브라우저에서 Invalid Date 가 표시되는 것에 대해 검색해보니 전통적으로 YYYY-MM-DD 패턴의 문자열인 RFC822 를 지원하지 않는다는 글이 대부분을 차지하고 있다. 최근에 수정되었는지 알기 어려우나 JavaScript 콘솔에서 YYYY-MM-DD 패턴으로도 Date 객체를 생성할 수 있음을 확인할 수 있었다. 기본적으로는 YYYY-MM-DD 와 YYYY-MM-DD'T'HH:mm:ss 와 같은 패턴을 주로 사용하기 때문에 사파리 브라우저에서 Date 객체를 생성하는데 문제는 없었던 것으로 보인다.

YYYY.MM.DD → YYYY-MM-DD

그러면, YYYY.MM.DD 는 왜 사용하게 되었을까를 살펴보자면 특정 이슈를 해결하기 위해 수정된 코드에서는 동일한 날짜를 표시하기 위하여 해당 변수를 가져와서 사용했고 해당 변수의 값은 YYYY.MM.DD 형태로 구성된 String 객체였던 것이다. 사실은 그 변수 자체적으로는 YYYY.MM.DD 형태로 표시되는게 맞으므로 올바르게 되어있던 부분이지만, 사파리 브라우저에서 YYYY.MM.DD 처럼 콤마로 표시된 문자열로 날짜를 생성할 때에는 불가능하기 때문에 콤마를 대시로 치환해서 YYYY-MM-DD 형태로 사용해야한다.

크로스 브라우징 이슈

가끔씩 프론트엔드를 수정하다보면 크로스 브라우징 문제가 생각보다 다양함을 느낀다. 분명히 표준으로 정의되어있는 것 같지만 브라우저마다 동작이 다르다. 프론트엔드 개발자가 아니기도 하고 자바스크립트의 Date를 직접 다루지 않고 Day.js와 같은 라이브러리를 사용했기에 이러한 문제가 있을리라고는 생각하지를 못했다. 과거 프로젝트에서는 Moment.js를 사용했는데 동일한 오류를 경험해본 적은 없었던 것 같다. 여담이지만, IT 시스템 개발에서는 모든 것이 통일된다는 것을 가정할 순 없는데 시계열 데이터베이스 중에서는 2025.08.21D00:00:00.000000 형태로 날짜를 표현하면서 ISO 8601 포맷을 지원하지 않는 것도 있다.