프로그래밍/javascript

javascript에서 시간 다루기 moment, new Date()

콘파냐 2021. 10. 14. 11:44
반응형

시간을 생성하고 표시하는 것은 매우 간단하다.

자바스크립트의 경우

new Date();

를 사용한다.
하지만, 서비스시에 문제가 생기기 마련이다.

시간은 전 세계 공통이 아니다. 한국 시간과 UTC(협정 세계시 또는 GMT) 시간은 9시간의 차이가 있다. 일명 시차라고 하는 이 시간 간격 때문에 우리가 원하는 지역의 시간을 표시하기 위해서는 여러가지 사항을 고려해야한다. 같은 코드를 사용해도 사용하는 플랫폼, 디바이스에 따라서 다른 결과를 표시하기도 한다.
그래서 우리는 UTC시간을 베이스로 두고 지역마다의 시차를 +-로 표시한다. 한국은 +09가 된다.
지역에 따라서 플랫폼에서 사용하는 locale이 다르기 때문에 시간과 locale 두가지를 정확히 알고 적용해야한다. 한국에서는 3시라고 하지만 UTC 시점에서는 전날 16시가 되기 때문이다.

근본은 간단하지만 개발에 사용되는 환경 라이브러리에 따라 변수가 생긴다.
다음은 몇가지 실제 코드 실험이다.

// Chrome 브라우저 콘솔창
new Date("2021-10-14T09:56:01") //Thu Oct 14 2021 09:56:01 GMT+0900 (한국 표준시)
// node 개발환경
new Date("2021-10-14T09:56:01") //2021-10-14T09:56:01.000Z

실행환경이 다른 동일한 코드이다. 시간은 9시 56분으로 동일하지만 locale은 다르다. 여기에서시간 표시에 붙어 있는 TZ에 대해서 먼저 알고 넘어가자.
https://ko.wikipedia.org/wiki/ISO_8601
위키에 아주 자세히 나와 있으며 핵심은, T는 날자와 시간을 구분하는 것이며 ZUTC를 의미한다. 만약 Z가 없는 표기라면 해당 시간을 실행 환경 locale로 하라는 뜻이다.
이런 기본적인 규칙을 토대로 위 두가지 결과를 해석하면 크롬 브라우저의 경우는 Z가 없는 시간 형식을 한국의 locale로 해석하였고 node 환경에서는 UTC로 해석하였다.
개발환경에서는 node를 사용하기 때문에 실행환경(브라우저)에서 원하는 동작이 이루어지지 않을 가능성이 있다.
브라우저 마다 이런 시간 형식을 parsing하는 방법 역시 달라질 수 있다.
이런 점들을 고려하다보면 이미 혼돈이다.

moment의 사용

이 라이브러리를 사용하여 시간형식을 파싱해보니 chrome 환경의 결과와 동일한 결과를 반환한다.

moment("2021-10-14T09:56:01") // "2021-10-14T00:56:01.000Z"

결과를 보면 Z 가 시간 표시 끝에 붙어 있다. UTC표기라는 뜻이다. 따라서 한국 시간으로 환산하면 09:56분이 된다.
실행환경(크롬브라우저)와 동일하게 인식이 된다.

결론

내가 실험한 시간 형식은 Z가 표시되지 않은 시간이었다.
Z가 표시되지 않은 시간은 실행환경에 상대적으로 해석하라는 의미다.
node 환경에서 new Date()를 사용하면 UTC 기준으로 시간을 해석했다.
node 환경에서 moment를 사용하니 OS timezone 설정으로 시간을 해석하는 것 같다.
우리는 Z가 표기된 시간을 사용하는 것이 안정정일 거라 생각하지만, 실제로 개발을 하다보면 지역 시간을 사용하는 것이 더 안정적이다.
지역시간을 사용하면서 locale 표시를 빼먹고 사용할 수도 있다.
이런 경우 UTC가 아닌 다른 시간대를 사용한다면 new Date()보다 moment를 사용하는 것이 안정정이라 판단한다.

반응형