[JS] Date 객체 크로스 브라우징 이슈 해결과정 (feat. iOS 15.4.1)

모두의 시간 서비스 QA 과정을 거치면서 발견한 크로스 브라우징 문제를 해결했던 경험을 작성한다.

 

1. 문제발생

---

 

사이드 프로젝트로 개발하고 배포까지 진행했던 모두의 시간 서비스를 사용하다가 밤 23:00시경 큰 이슈를 발견했다.

서비스 내에 참여자들이 일정을 등록하는 기한을 설정하는 기능이 있는데, 날짜가 NaN 형식으로 보여지는 문제였다.

 

단순히 Date 객체에 형식을 잘 못 전달했다는 생각이 든 것도 잠시,

다른 팀원은 잘 보인다는 것이었다 🫢

 

 

브라우저 차이 문제인가 싶어서 확인하였지만 그것도 아니었고,

네트워크 문제도 아니었다.

 

그럼 기기 버전 문제라고 생각하여 버전을 비교 해보았는데

안보이는 팀원의 iOS 버전은 15.4.1였고

잘보이는 팀원들의 iOS 버전은 16 이상이었다.

 

 

2. 문제해결

---

문제를 발견하고, 어떤 이슈인지 체크하는데에 시간이 오래걸렸지만

해결방법은 생각보다 간단했다.

const targetDate = new Date(deadLine); // deadLine = '2021-07-06 10:30:06'

기존에는 다음과 같이 Date 객체에 '2021-07-06 10:30:06' 형식으로 값을 전달하고 있었다.

 

Chrom, Safari, IE11 세 개의 브라우저를 전부 지원하는 데이터 포맷은 yyyy-mm-ddThh:mm:ss 와 yyyy/mm/dd hh:mm:ss 인데, 현재는 yyyy-mm-dd hh:mm:ss 포맷을 사용하고 있는 것이 문제였다.

 

const targetDate = new Date(deadLine.replace(' ', 'T'));

그래서 데이터 포맷을 수정하였지만, 여러 레퍼런스를  참고한 결과

생성자를 이용하여 날짜 객체를 다루는 방법으로 Date 객체 생성 시 new Date(year, month, day, hour, min, sec); 사용을 권장하는 사실을 알았다.

 

또한 dayjs나 moment 라이브러리를 활용하여 크로스 브라우징 이슈 문제를 해결할 수 있다고 하여, 라이브러리를 사용하여 해결했다.

 + 현재 moment는 deprecated 되어 dayjs로 사용하는 방향으로 설정했다.

 

https://www.npmjs.com/package/dayjs

dayjs

 

현직에 계신 멘토님께도 조언을 구했는데, 실무에서는 주로 Date 객체를 dayjs 또는 luxon을 많이 사용한다고 한다.

 

3) 최종코드 및 결과

---

const targetDate = dayjs(deadLine).format('YYYY-MM-DD HH:mm:00');

dayjs 라이브러리를 사용하면 Date 형식을 기존과 동일하게 가져갔다. 

 

결과적으로 iOS 버전이 달라도 모든 사용자가 오류없이 일정등록 기간을 확인할 수 있도록 수정하였다.

이번에 hotfix의 진정한 의미를 깨달았다.

실사용자가 많지않은 서비스여서 브랜치를 새로파서 해결을 할까했지만, hotfix 배포 경험도 하나의 값진 경험이라고 생각했다.

 

사소한 오류였지만 밤 늦게 트러블슈팅을 해보는 좋은 경험이었다! 

은근 짜릿했다 역시 개발자가 맞나보다 :)