문제 발생

web 환경에서는 오류가 발생하지 않지만 RN의 web view 환경에서는 다음과 같은 오류가 발생했다.

문제 인식

RN web view가 iOS는 JavascriptCore, Android는 Chrominum 기반의 Blink 엔진으로 서로 브라우저 엔진이 달라 발생한 문제.

다음 코드에서 받아온 날자를 Date객체에 넘겨주는 부분에서 해당 이슈가 발생했다.

{format(new Date(joinAt), '(yyyy.MM.dd ') + `${t('home.joined')})`}

이 둘은 어떻게 다르게 해석하는데?

Chrome에서는 한자리 날짜의 경우 앞에 0처리를 하지 않아도 정상 동작하지만, Safari에서는 0처리를 해줘야 정상 동작한다.

new Date('2021-1-1');
//Chrome: Fri Jan 01 2021 09:00:00 GMT+0900 (대한민국 표준시)
//Safari: Invalid Date

new Date('2021-01-01');
//Chrome: Fri Jan 01 2021 09:00:00 GMT+0900 (대한민국 표준시)
//Safari: Fri Jan 01 2021 09:00:00 GMT+0900 (KST)

해결 방안

서로 다른 브라우저가 Date 객체를 해석하는 방식이 달라 발생한 문제로 받아오는 날짜를 표준 형식으로 받아오면 좋지만 백엔드에 수정 및 베포가 수행되는것 보다 프론트에서 Date 객체 없이 날짜 포멧을 정해주는 함수를 만들어도 충분히 가능한 영역이라 생각해 날짜 포멧 함수를 작성해 해결하는 방법을 선택했다.

다음과 같은 formatting 함수를 추가했고 기존 Date 객체가 있던 부분을 대체했다.

function formatDate(dateList: number[]) {
    const year = dateList[0];
    const month = formatNumber(dateList[1]);
    const day = formatNumber(dateList[2]);
    return `${year}.${month}.${day}`;
  }

  function formatNumber(num: number) {
    return num < 10 ? '0' + num : num;
  }

<span className="text-caption text-sign-caption">
    {joinAt && `(${formatDate(joinAt)} ${t('home.joined')})`}
  </span>

함수를 작성 하던 중 정의된 ProfileResponse 의 joinAt 필드의 타입이 실제 받아오는 데이터와 다름을 확인.