JS에서 날짜를 보여주기 전 고려해야 할 것들

왜 공부하게 되었지?

 

얼마 전 받았던 코드 리뷰에서 Date를 파싱할 때 고려해야 할 사항을 한 가지 알게 되었습니다. 수정 자체가 오래 걸리거나 어려운 내용은 아니지만, 앞으로도 Date를 제대로 다루기 위해선 이에 대한 이해가 꼭 필요할 것 같아 공부한 내용을 글로 정리해보았습니다.

 

 

문제가 무엇일까?

제 코드의 문제점은 api를 통해 받은 시간값이 ‘국제 표준시’ 에 해당하기 때문에, 한국에서 볼 때는 한국 시간과 표준 시간의 차이만큼 오차가 발생할 수 있다는 것입니다. 이 문제를 해결하기 위해서는 국제 표준시만큼의 격차를 먼저 알아야 합니다.

 

우리가 국제 표준시라고 부르는 그리니치 표준시(GMT)는 1972년 1월 1일부터 시행된 표준 시간이며 협정 세계시(UTC: Universal Time Coordinated) 라고도 부릅니다. 1970년 1월 1일 자정을 0 밀리초로 설정하여 기준을 삼아 그 후로 시간의 흐름을 밀리초로 계산합니다.

 

우리가 흔히 사용하는 자바스크립트의 Date() 객체도 이 국제 표준시를 기준으로 시작됩니다. Date() 객체를 생성하며 인자에 0을 넘겨주면 이 시간을 확인할 수 있습니다.

 

const beginTime = new Date(0);
console.log(beginTime);
// Thu Jan 01 1970 09:00:00 GMT+0900 (한국 표준시)

 

Chrome 기준으로, “1970년 1월 1일 목요일 오전 9시 GMT +0900 (한국 표준시)” 라고 출력됩니다. 이 결과로 미루어보아, 한국 시간과 표준 시간의 차이는 +9시간인 것을 알 수 있습니다. 그리니치 천문대의 시간이 자정일때, 한국은 오전 9시가 될 것 입니다.

 

 

해결 방법은?

따라서 응답을 받아 온 값에 9시간 만큼을 더해주어야 우리가 보기에 자연스러운 시간이 될텐데, 연산을 하기 위해 Date 객체에 넣어주겠습니다. 제가 사용했던 api를 통해 넘어오는 시간 데이터는 "YYYY-MM-DDTHH:MM:SSZ” 과 같은 형태인데, 다행히 Date() 객체가 인수로 받을 수 있는 형식이니 그대로 적용해보겠습니다.

 

const dateObject = new Date("2022-03-25T18:12:31Z");
console.log(dateObject);
// Sat Mar 26 2022 03:12:31 GMT+0900 (한국 표준시)

 

놀랍게도 Date() 객체가 자동으로 한국 표준시를 적용하여 자동으로 9시간을 더한 채 저장해 준 모습입니다. 별다른 작업 없이도 한국 기준의 시간이 정확히 출력되네요.

 

그러나 여기서 주의해야 할 점은, Date() 가 항상 같은 작업을 보장하지는 않는다는 점입니다. 정확히는 자바스크립트 엔진의 버젼이나 시스템 상태에 따라 다른데, 아티클에서 소개한 사례를 직접 확인보겠습니다.

 

 

왼쪽은 IE, 오른쪽은 Chrome의 결과

 

아티클이 작성될 시기에는 어땠는지 모르겠으나, 현재 버젼의 크롬과 익스플로러의 결과 값은 같았습니다. 그러나 date 문자열에 ‘Z’ 를 포함했을 경우, 둘 모두 9시간이 추가된 값으로 저장되는 것으로 미루어보면 시스템 시간에 따라 결과값이 변하는 것으로 추정되기에 주의하여 사용해야 하는 것은 마찬가지 입니다. 참고

 

 

정리

사용자에게 보여줄 데이터 중 날짜에 관한 것은 그 사용자의 환경을 고려했을때 단순히 일관성 있는 데이터를 보여주는 것만으로는 모자랄 수 있습니다.

 

이 글에서 알아본 예시로는 Date 객체가 date String 방식으로 선언되었을때 브라우저에 따라, 또는 각 시스템에 설정된 시간대에 따라 다른 동작을 할 가능성이 있다는 점입니다. 날짜의 경우 이외에도 다양한 방면에서 문제가 생길 수 있으니 개발자는 Date를 표시해주기 전, 항상 이러한 특성을 염두해두고 사용해야 될 것입니다.

 

 

참고한 문서

자바스크립트에서 타임존 다루기 (1)

자바스크립트에서 타임존 다루기 (2)

Mdn docs : Date