[리빙 포인트] 브라우저에서 Date 객체를 사용하고 싶을 땐

tl;dr

• 조심스럽게 사용하는 것이 좋다.
• Date 객체는 브라우저의 구현에 따라 기본 시간대를 UTC 기준 혹은 해당 브라우저가 속한 Timezone 기준으로 해석한다.
• DateString이 표준에 근거한 형식으로 사용되고 있는지 확인해야 한다.
• 브라우저에 따라 차이가 발생하기 때문에 날짜 처리를 위한 라이브러리를 사용하는 것이 안전하다.

뱅크샐러드에서는 금융사에서 제공하는 다양한 이벤트들을 모아 한눈에 볼 수 있도록 서비스하고 있습니다. 특히 신용카드의 연회비를 지원해주는 이벤트는 인기가 높아 신청하는 비율이 훨씬 높습니다. 이런 이벤트를 서비스하는 데 있어서 중요한 건 역시 “정확한 기간표시" 입니다. 기간 착오로 인해 사용자들에게 피해를 줄 수 있기 때문이죠.

API를 통해 받아온 날짜를 해석하는 과정에서 JavaScript가 지원하는 Date 객체를 사용했고, 그로 인해 발생한 문제를 공유하고자 합니다.

new Date(“ … ”) 는 위험하다

평소 저희 웹팀은 명확한 필요성을 느끼지 못하면 외부 라이브러리를 사용하기보다는 기본적으로 지원되는 객체들을 확장하여 사용합니다.

DateString 을 해석하는 것도 마찬가지로 특별히 외부 라이브러리의 필요성을 느끼지 못해 아래와 같이 사용했습니다.

위 코드로 똑같이 new Date("2018-02-02T12:12:12")를 실행시켜 찍히는 결과를 브라우저별로 확인해봤습니다.

위 결과와 같이 IE9과 Safari에서는 특별한 기호 없이 DateString을 입력했을 경우 UTC 시간으로 해석된 결과가 나오는 걸 보실 수 있습니다.

이와 같이 오차가 발생하는 이유는 new Date 호출 시에 실행되는 Date.parse 함수가 브라우저마다 구현이 다르기 때문입니다. 그리고 예시로 입력한 2018-02-02T12:12:12 값은 완벽한 표준이 아니기 때문에 브라우저에 따라 다른 결과를 얻게 됩니다.

결론

• DateString은 표준을 지켜 사용하는 것이 안전하다.
• 아무래도 브라우저의 구현에 종속적인 Date 객체보다는 Moment.js 등의 외부 라이브러리를 이용하는 것이 안전할 수 있다.

특히 외부 OpenAPI나 여러 Host를 참조하고 있는 웹사이트라면 한 번쯤 문제가 발생할 수 있는 부분입니다. 작은 팁이지만 도움이 되면 좋겠습니다.

읽어주셔서 감사합니다 :)