SookDev

🧩 사파리에서 moment.js 가 안먹힌다?

PWA 를 적용한 개인프로젝트 진행 중, 날짜부분에서 NaN, Invalid date 로 표시되는 버그를 발견하였다. 개발 시 크롬에서만 테스트를 했기 때문에 빌드 후 사파리에서 PWA 다운로드하니 발견된 문제였다.

사파리에서 크로스브라우징 문제때문에 new Date() 가 안된다는것은 알고있었기에 moment.js 로 사용했음에도 에러가 나길래 찾아봤더니 moment.js 를 사용하더라도 형식에 맞게 날짜를 써줘야 했다.

내가 작성한 코드를 보면 YYYY.MM.DD 의 형태로 사용했다.


export const dummyDate = {
  startDate: "2023.01.01",
	...
};

const today = moment().format("YYYY.MM.DD");
const startDate = moment(dummyDate.startDate).format("YYYY.MM.DD"); 
const endDate = moment(dummyDate.startDate)
						    .add(dummyDate.goalDate, "d")
						    .format("YYYY.MM.DD");
const progressDate = moment(today).diff(moment(startDate), "days");
const remainDate = moment(endDate).diff(moment(today), "days");

구글링 한 결과 사파리에서의 moment.js 는 다음과 같은 형태만 받는다


MM-dd-yyyy
yyyy/MM/dd
MM/dd/yyyy
MMMM dd, yyyy
MMM dd, yyyy

원래 원하던 형태는 아니지만 날짜가 NaN으로 나오는 이슈는 해결하였다.

만약 YYYY.MM.DD 형태로 꼭 쓰고싶다면 replace, split 등 자바스크립트로 직접 바꿔줘야한다.

하지만 나는 개인프로젝트라서 패스!

🧩🧩 결론

🧸

다른 프로젝트도 마찬가지로, 배포 전 크로스브라우징 이슈를 고려하여 QA 를 꼼꼼히 하도록 하자!

moment.js 사파리 크로스브라우징

🧩 사파리에서 moment.js 가 안먹힌다?

🧩🧩 결론