JS invalid date error 에러

JavaScript는 기본적으로 Date 객체를 제공한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

Date - JavaScript | MDN

Date 객체의 메서드들을 통해 특정 시간을 더하거나 빼는 등의 작업을 아주 손쉽게 할 수 있다.

---

그런데 오늘 release 환경에서 이런 일이 있었다.

 

server에서 생성된 신청지 데이터 속 날짜 를 Date 객체로 변환해, 여러 메서드 들을 사용해야 하는 상황이었다,.

이때 서버 데이터 반환값은

{
    date : 'yyyy-MM-dd',
    hour : 'HH:mm',
}

다음과 같은 형태(yyyy-MM-dd, HH:mm 형태의 문자열)였다.

 

해당 날짜와 시간을 기반으로 Date객체를 생성해 관련된 메서드를 사용해야 하는 상황이었기 때문에...

const date = 'yyyy-MM-dd' // server에서 받은 날짜 형식 문자열
const time = 'HH:mm' // server에서 받은 시간 형식 데이터
const convertedDateTime = new Date(`${date} ${time}`)

다음과 같이 Date 객체를 생성해 사용했다.

console에 찍어보면, 우리가 원하는 형태로 Date객체가 생성됨을 확인할 수 있다.

 

그런데... 배포 후 release 환경에서 테스트를 해보니,

특정 기기(테스트 기기 중 딱 하나였다!)에서 해당 부분이 invalid date error가 반환되고 있었다!

 

영문을 알 수가 없어 이리저리 찾아보니...

1) Date 생성자는 다양한 형식의 날짜 및 시간 문자열을 인식 가능
2) 그러나, 일반적으로 RFC 2822 또는 ISO 8601 형식의 문자열을 인식
3) 해당 형식이 맞지 않을 경우 → invalid date error 반환
4) 이 때... yyyy-MM-dd HH:mm 형식의 문자열은 표준으로 인식되지 X

이 원인이었다. 세상에!

즉... 일부 브라우저에서 해당 형식(yyyy-MM-dd HH:mm)으로 Date객체 생성 시 에러가 반환될 수 있으며

오히려 표준이 아닌 형식이므로 정상적으로 변환되는 것이 신기한(최신 브라우저에서는 지원이 된다고 한다) 일이었던 것!

 

물론 해결책은 간단하다.

const date = 'yyyy-MM-dd' // server에서 받은 날짜 형식 문자열
const time = 'HH:mm' // server에서 받은 시간 형식 데이터
const convertedDateTime = new Date(`${date}T${time}`)

해당 문자열을 T를 포함한 ISO 8601 형식으로 바꿔주면, 모든 기기나 브라우저에서 정상적으로 동작함을 확인할 수 있다.