Safari Invalid Date 문제 (new Date()에 공백 파싱 이슈)



광고 세부 내역 페이지의 날짜 부분에 NaN (not a number) 오류가 있다는 이슈가 올라왔습니다.

뭘까 싶어서 해당 페이지에 접속해 봤는데 잘 나옵니다.

사파리에서 접속하면 그렇게 된다길래 들어가 봤더니, 과연 일수가 표기되어야 할 곳에 NaN이 나오네요.

 

 

뜯어보니 `new Date`에 들어가는 문자열 양식이 문제였습니다.

'`2024-01-02 `' 이런 식으로 끝에 공백 하나가 들어가 있었어요.

이게 크롬이나 다른 브라우저에서는 파싱이 잘 되는데, Safari에서는 파싱을 못하고 `Invalid Date`를 띄웁니다.

그러니 해당 문자열로 숫자 계산을 하려고 하면 JS는 `NaN`을 내뱉겠죠.

 

크롬은 알아서 trim해서 파싱을 해주는 것 같은데, 사파리는 엄격한 기준을 갖고 있는 것 같네요...

 

Safari는 끝에 공백이 들어가면 잘못된 데이트라고 소리지릅니다. 심지어 시간도 GMT 기준 00시로 생성되네요.

크롬은 군말없이 알아서 잘 파싱해줍니다.

 

 

추가로, 예전에는 Safari에서 dash(-)로 이루어진 연월일 날짜 형식도 못 알아들었다고 하네요. (하지만 `2024-01-01T00:00:00`과 같이 완전히 ISO8601 표준을 맞추면 파싱됩니다)

`2024/01/01` 형식으로 작성해야만 인식했었다고 하는데, 지금은 dash를 저렇게 써도 알아듣는 걸 보니 패치했나봅니다.

 

날짜를 다룰 때는 moment 라이브러리를 쓰는 것이 이런 크로스 브라우저 포맷팅 오류를 줄이는 데엔 가장 좋은 것 같네요. (저희 개발팀 선배의 말씀.. 👍)

`moment(date).format('YYYY-MM-DD')` 방식으로 해결했습니다.