[TIL] Safari(ios)에서 new Date 인식 오류

프로젝트 중 챌린지를 시작하면 챌린지가 생성된 날짜를 기준으로 그 주의 달력을 표시하는 페이지가 있었다.

서버에서는 "2023-06-27(Wed)" 형식으로 날짜를 보내줬고,

getChallengeCalendar 함수를 통해서 날짜를 인식, 그 주의 요일과 일자만 뽑아서 달력을 만들었다.

 

// 챌린지 진행 주차 캘린더 구하기
      const getChallengeCalendar = (dateStr: string) => {
        const date = new Date(dateStr);
        const weekday = date.getDay();

        const startDate = new Date(
          // 일요일이 아니라 월요일 부터 시작하고 싶어서 -2
          date.getTime() - (weekday > 0 ? weekday - 2 : 6) * 86400000
        );

        const weekDates: { day: string; date: string }[] = [];

        const weekD = ['월', '화', '수', '목', '금', '토', '일'];
        for (let i = 0; i < 7; i += 1) {
          const currentDate = new Date(startDate.getTime() + i * 86400000);
          const formattedDate = currentDate
            .toISOString()
            .split('T')[0]
            .slice(8);
          const dayIndex = i % 7;
          weekDates.push({ day: weekD[dayIndex], date: formattedDate });
        }

        return weekDates;
      };

 

근데 PC에서는 잘 나왔는데 모바일에서는 Invaild Date라고 하면서 아예 페이지 자체가 로드가 안 됨...

원인은 ios에서는 new Date 함수에서 날짜의 형식을 “YYYY-MM-DD HH-MM-SS" 또는 YYYY,MM,DD,HH,MM,SS 이렇게 맞춰줘야 하는데 다른 형식으로 보내서 인식하지 못했던 것이다.

다른 방법으로는 Date를 다루는 외부 라이브러리(moment.js 또는 day.js)를 사용할 수도 있다. 하지만 우리는 시간이 너무 촉박해서 서버측과 상의 후 데이터 포맷을 바꿔서 보내주는 방법으로 선택을 했다. 

 

최종 프로젝트를 하며 느낀점은 웹과 모바일 환경이 너무 다르다는 걸 많이 깨달았다. PC에서는 너무 잘되는데 모바일에서는 에러가 팡팡 터져서 곤혹스러웠던 경험을 자주 해서 크로스브라우징의 중요성을 다시 한번 느꼈다. ㅠ