[해결] Invalid date cross-browsing 날짜객체 에러(크로스 브라우징)

실시간 시계를 표시하는 컴포넌트가 있는 프로젝트를 배포하고 나서

테스트과정에 문제를 발견했다.

 

프로젝트 특성상 크로스 브라우저를 체크할 필요는 없지만 IOS환경인 safari 브라우저에서

date객체를 사용한 시계, 날짜들이 표시되지 않고 Invalid date가 발생하는 것이다.

정상 케이스 (크롬)

비정상 케이스 (사파리)

발생하는 문제를 파악하기위해 찾아보니 의외로 간단한 문제였고

이는 cross browsing 개발을 할때에 고려해야하는 사항이다.

 

문제점

chrome에서는 정상작동이며 safari에서만 날짜가 표기되지 않는다.

 

원인

safari에서는 YYYY.MM.DD형식의 DateFormat을 지원하지 않는다.

즉 date객체에서 포맷을 변경할때 주의해야하는 건데,

기존에는 moment를 사용하여 현재 시각을 받아서 포맷을 바꾸어주는 간단한 함수를 했다.

현재시각 포맷함수

 

해결

세가지 해결책이 제시된다.

1. 모든 브라우저에서 포맷을 'YYYY.MM.DD' 에서 'YYYY-MM-DD'로 바꾸는 방법

2. 'YYYY-MM-DD'로 시간을 가져와 랜더링할때 '-'를 '.'으로 바꿔주는 방법

3. 함수내에서는 포맷을하지 않고 랜더링할때 저장된 time값을 랜더링할때 포맷을 바꿔주는 방법

 

하나씩 보자.

 

1번 해결책

아주 간단하게 해결이 가능하나 의도된 기획, 디자인에 맞지 않을 수 있다.

1번 해결책

2번 해결책

역시 간단하게 해결이 가능하나 조금더 고민해볼 필요가 있다.

2번 해결책 함수는 그대로

랜더할때 글자만 바꿔주기

3번 해결책

상황에 따라 다르겠지만 좋은 방법으로 보인다.

3번해결책 함수수정

랜더링할때 포맷팅

3번 해결책으로 이 문제는 간단하게 해결했다.