📌 배경
-
시작 날짜와 기간을 선택하면 해당 로그를 출력해주는 기능을 개발중이었다.
-
윈도우의 크롬 환경에서는 잘 되었고, PC 크롬의 모바일 환경에서도 잘 작동하였다.
-
하지만, IOS 모바일 크롬 환경에서 쿼리문이 제대로 작동하지 않는 문제를 발견
-
API를 호출하고 쿼리문을 실행하는 것을 보니 종료 날짜값이
NaN으로 들어가고 있는것을 확인했다.
-
종료 날짜는 시작 날짜에서 기간을 선택한 값만큼 더해서 (가공되는 과정이 있음) 쿼리문에 넣어주게 되는데 여기서 뭔가 문제가 있겠구나라고 파악했다.
let endDate = new Date(startDate)- 종료 날짜의 계산을 시작 날짜를 Date 객체에 담고 계산하는 과정이 있었다.
- 이 코드가 실행되고 endDate를 보니 NaN으로 찍히는 것
📌 해결
- IOS, Safari와 같은 환경에서 Date 객체는 다른 포맷으로 인식한다.
// 윈도우, 안드로이드 등 일반적인 환경
const date = "2023-07-19 00:00:00"
const dateObject = new Date(date); // 정상
// IOS, Safari 환경
const dateObject = new Date(date); // Invalid Date를 리턴
// 2023/07/19 00:00:00 으로 변경해줘야 함-
따라서 - (하이픈) 을 / (슬래쉬)로 바꿔줘야 한다.
-
하이픈을 슬래쉬로 바꿔줘도 윈도우, 안드로이드 환경 등에서는 잘 작동한다.
-
IOS, Safari와 같은 환경을 고려했을 때 날짜 객체 사용 시
-를/로 변경해서 사용해야 함을 알았다. -
정규식을 사용해 변환함
// 먼저, 하이픈을 슬래쉬로 바꿔주고,
let convertDate = startDate.replace(/-/g, "/");
// 바꾼것을 Date 객체 안에 넣어주면 됨
let convertStartDate = new Date(convertDate);moment.js외부 라이브러리를 사용해도 되지만, 정규식 사용하는게 더 깔끔할 것 같아서 정규식으로 바꿨다.
참고
Frontend Developer