본문 바로가기
개발/FRONT

아이폰(IOS)에서 new Date 포맷 오류

by 잠킴98 2023. 12. 31.
반응형

어느 날 web, 안드로이드(aos)에서는 되는데 아이폰에서는 안 되는 문제가 생겼다. 

로직을 보아하니, 스크립트에서 날짜 계산하는 로직부분에서 문제였는데 

검색해보니 IOS에서는 보안상의 문제로 날짜 포맷을 인식 못하는 이슈가 있다고 한다. 

개발하다보면 핸드폰의 기종마다 모두 테스트 하기에는 어려운 문제들이 많기 때문에 

이런 문제들은 나올때마다 난감하면서도 어렵게 느껴지기도 한다. 

 

심지어 나는 태어나서 한번도 애플 제품으르 사용한 적이 없는.. 순정 안드로이드파이기 때문에 

이번 오류는 더욱 더 어렵게 느껴지기도 했다. 

아이폰이나 맥북이 없어서 디버깅도 어렵고.. 설사 있다고 한들 환경 설정부터 다시 해서 디버깅을 해야하는 상황은...

상상만해도 피곤하다. 정말정말 방법이 없을 때는 그렇게도 할 수 있다지만 최대한 피하고 싶은게 맥북에 환경 셋팅을 다시 해서 디버깅을 하는 것이다. 심지어 난 터미널 환경은 또 익숙하진 않고 윈도우의 GUI가 최적화된 인물인데...

 

검색을 좀 해본 결과, 윈도우에서 사파리 브라우저를 다운 받을 수 있었다. 

물론 현재 애플에서는 윈도우용 사파리를 더 이상 지원하지 않는다. 

구글은 크롬, 맥은 사파리.. 서로의 OS 최적화된 브라우저를 쓰는 것이 성능상 가장 좋고 확장성의 면에서도 베스트이기 때문에 애플에서는 윈도우용 사파리를 지원하지 않는다고 한다. 

 

그렇지만 예전에 지원했던 과거의 사파리를 다운 받을 수 있었다. 

버전은 5.1.4인데... 다운 받아보니 뭔가 옛날 브라우저라는 느낌이 물씬난다.

 

그래도 이 옛날 사파리 브라우저로 개발자 도구의 콘솔을 이용해 스크립트의 날짜 포맷의 오류를 확인 할 수 있었다.

크롬과 같은 로직을 비교해 보기도 했다.

 

Chrome 크롬

 

마지막 new Date(2023, 12, 31, 01, 12, 32); 는 월+1이 추가된 상태라서 다음달로 나온다. 

 

 

Safari 사파리 

 

 

크롬하고 비교해봤을 때 2, 3번째 new Date 날짜 형식이 Invalid Date가 나온 걸 확인 할 수 있다. 

 

이 현상을 해결하기 위해서는 날짜 형식을 "YYYY/MM/DD HH:MM:SS" 또는 "YYYY, MM, DD, HH, MM, SS" 로 맞춰주거나, moment.js 나 day.js 라이브러를 활용하면 된다. 

 

 

참고로 moment.js 는 아래와 같이 사용한다.

* moment.js 홈페이지에 가면 더 정확한 정보를 알 수 있습니다.

 

Format Dates

moment().format('MMMM Do YYYY, h:mm:ss a'); // 12월 31일 2023, 12:27:05 오후
moment().format('dddd');                    // 일요일
moment().format("MMM Do YY");               // 12월 31일 23
moment().format('YYYY [escaped] YYYY');     // 2023 escaped 2023
moment().format();                          // 2023-12-31T12:27:05+09:00

 

Relative Time

moment("20111031", "YYYYMMDD").fromNow(); // 12년 전
moment("20120620", "YYYYMMDD").fromNow(); // 12년 전
moment().startOf('day').fromNow();        // 12시간 전
moment().endOf('day').fromNow();          // 12시간 후
moment().startOf('hour').fromNow();      // 30분전

 

Calendar Time

moment().subtract(10, 'days').calendar(); // 2023.12.21.
moment().subtract(6, 'days').calendar();  // 지난주 월요일 오후 12:28
moment().subtract(3, 'days').calendar();  // 지난주 목요일 오후 12:28
moment().subtract(1, 'days').calendar();  // 어제 오후 12:28
moment().calendar();                      // 오늘 오후 12:28
moment().add(1, 'days').calendar();       // 내일 오후 12:28
moment().add(3, 'days').calendar();       // 수요일 오후 12:28
moment().add(10, 'days').calendar();    // 2024.01.10

 

Multiple Locale Support

moment.locale();         // ko
moment().format('LT');   // 오후 12:29
moment().format('LTS');  // 오후 12:29:04
moment().format('L');    // 2023.12.31.
moment().format('l');    // 2023.12.31.
moment().format('LL');   // 2023년 12월 31일
moment().format('ll');   // 2023년 12월 31일
moment().format('LLL');  // 2023년 12월 31일 오후 12:29
moment().format('lll');  // 2023년 12월 31일 오후 12:29
moment().format('LLLL'); // 2023년 12월 31일 일요일 오후 12:29
moment().format('llll');  // 2023년 12월 31일 일요일 오후 12:29
반응형

'개발 > FRONT' 카테고리의 다른 글

Cookie and JavaScript  (1) 2024.01.03
Json Array에서 공백 배열 찾기  (0) 2024.01.03
NUXT에 대하여  (0) 2023.12.30
VUE에 대해서  (0) 2023.12.30
java List 쪼개기  (0) 2023.12.30