[JavaScript][CrossPlatform]Date가 브라우저에 따라 다르게 동작할 수 있다?

개발 도중에 차트를 사용하는 부분이 있는데 왼쪽은 크롬이고 오른쪽은 사파리였다.

차트가 그려지지 않는 문제가 발생했는데 필자는 이유가 차트에 있는줄 알았다.

 

조사해본결과 iPad의 모든 브라우저, iPone의 모든 브라우저, 그리고 Mac의 사파리만 해당 문제가 발생하였다.

이 문제를... 해결하기 위해서 되게 고민하다가 뜻밖에 "그럼 그려지는 차트들은 뭐지?"라는 생각이 들어서

조사해봤더니 뜻밖의 사실을 발견했다.

바로 아래의 일이 벌어진 것이다.

 

서버에서 날짜를 보낼 때 위처럼 보냈다.("YY-MM-DD HH:mm:ss") 표준은 아니지만 사실상 저렇게 보내는 서버가 많다.

그리고 위의 세 상황을 제외하곤(Edge, Opera, Firefox, Chrome)에서는 문제가 일어나지 않았다.

 

그런데 사파리와 iPone, iPad에서는 위처럼 뜨는 것이다.

똑같은 코드인데 동작하지 않는것이다.

 

makeDate(str) {
    let year = str.substring(0, 4);
    let month = str.substring(5, 7);
    let day = str.substring(8, 10);
    let hour = str.substring(11, 13);
    let minute = str.substring(14, 16);
    let second = str.substring(17, 19);
    let date = new Date(year, month, day, hour, minute, second);
    return date;
}

그래서 받아온 데이터를 저렇게 가공하였다.

물론 좀더 검증하는 코드를 넣어주는게 바람직 하지만 최대한 간단히 짠 것이다.

 

정말 사소한 문제였지만 차트에 일어난 문제가 사실 받아온 데이터의 문제였고

그 데이터가 날짜문제였다는걸 매우 뒤늦게 알았다.

 

결론
1. 크로스 브라우징시 Date를 조심하자
2. 데이터 타입 검증을 꼼꼼히 하자