[Javascript] iOS Safari에서 new Date() 연산 이슈

프로젝트 진행 간 시간에 따른 분기가 필요하여 현재 시간과 DB에 저장되어 있던 객체의 저장시간대를 비교하는 로직이 필요하였다.

 

1. 문제 확인

스크립트의 Date 객체를 이용하여 DB에서 호출된 시간데이터를 변환하고 현재 시간과의 차이를 마이너스로 계산하였다.

const lastStayTime = new Date(DB 저장객체 시간데이터);
const now = new Date();
const diff = now - lastStayTime;

 

해당 로직은 별다른 이슈없이 계산되었고 여러번에 거친 테스트에도 문제없이 동작하였다.

 

하지만 아이패드에서 해당 로직이 제대로 동작하지 않는다는 이야기를 전해들었다.

 

아이패드 크롬에서도 웹과 다른 화면을 보여주었고 사파리 또한 동일한 화면을 보여주었다.

 

2. 문제 처리

아이패드 크롬과 사파리 모두 웹과 다른 화면을 보여줬기에 이상했다. 모바일 크롬 또한 웹 크롬과 동일한 엔진을 사용하고 있다고 알고 있기에 크로스 브라우징 이슈라면 사파리에만 일어나야 된다는 생각을 하였기 떄문이다.

 

어쨌든 동일한 현상을 도출해보기 위해 웹 사파리를 열었고 세팅 후 계산 부분을 콘솔로 확인해보았다.

웹 크롬에서 잘 되던 계산이 웹  사파리에서는 시간계산이 되지 않고 있었다.

 

웹 크롬 콘솔창

웹 사파리 크롬창

 

서칭하여 확인해보니 사파리쪽에 시간을 인식하는 부분이 좀 더 까다롭고 형태를 맞춰야되는 것으로 보인다. 

(시간 지칭하는 문자열에 공백이 있더라도 크롬은 잘 인식하여 처리 / 사파리는 X 등)

 

조금 더 찾아보니 이러한 시간계산 이슈에는 널리 알려진 라이브러리를 사용하여 크로스 브라우징 이슈를 막는 것을 추천하고 있었다.

Day.js나 Moment.js가 대표적인 시간 관련 라이브러리인데 이전에 사용 경험이 있는 Moment.js를 가지고 처리하기로 마음먹었다.

<AS-IS>
const lastStayTime = new Date(DB 저장객체 시간데이터);
const now = new Date();
const diff = now - lastStayTime;

<TO-BE>
import moment from 'moment'; # 라이브러리 불러오기

const lastStayTime = moment(DB 저장객체 시간데이터, "YYYY.MM.DD HH:mm:ss");
const now = moment();
const diff = now.diff(lastStayTime);

 

위와 같이 수정을 진행하였더니 웹/모바일 크롬, 웹/모바일 사파리까지 모두 정상적으로 시간이 계산되어 처리되는 것을 확인할 수 있었다.

 

프론트를 하다보면서 가끔씩 이러한 크로스 브라우징 이슈가 나오는데 원인 찾는건 힘들다..힘들어😊