[js]moment.js를 이용한 타임존/시간/날짜 설정: 시간의 종류가 3가지였다?!

안녕하세요.

오늘은 moment.js를 사용하는 방법과 컴퓨터에서의 시간의 종류와 개념을 먼저 정리해보려 합니다.

시간, 날짜와 관련된 함수는 다양하죠. 저는 보통 내장 함수를 많이 이용하고는 하였는데, 이번에 나라에 따른 표준시간대를 사용해야하는 일이 있어서 moment.js를 사용하게 되었습니다.

제가 가지고 있던 개념상 시간은 로컬 시간대와 실제 저희의 시간, 2종류로만 생각했었습니다만, 제 무지에 의해 삽질을 1시간정도 하고서야 이게 써봐야 차이를 알겠구나-를 깨닫고 글을 쓰게 되었답니다 ㅋㅋㅋㅋㅋㅋ

자 그럼 사담은 여기까지만 쓰고 한 번 알아봅시다!

ps. 참고로 moment.js는 개발지원이 중지된 친구(업데이트x, 버그 등 수정사항 수정x)라서 만약 뭘 쓸지 고민하고 계신 분께는 다른 Js로 사용하시길 권장드리며 시작합니다.

---

1. javascript에서의 시간

javascript에서 시간은 GMT만 사용하진 않습니다. UTC를 함께 혼용한다는 사실. (그래서 더 헷갈리곤 합니다. 아무래도 오래전부터 쓰다보니 국제표준시의 가준이 바뀌면서 혼용하는게 아닌가 짐작해봅니다.)

우선, 차이점은 다음과 같습니다.

GMT	그리니치 표준시. 영국을 기준으로 영국보다 이르면 +, 영국보다 느리면 -로 표기.
UTC(국제 표준시간대)	협정 세계시. 모든 나라가 동일한 시간대이다.

GMT든 UTC든 공통점은 '영국'을 기준으로 합니다. UTC도, 굳이 나누면 GMT와 같이 UTC +, -로 표기는 가능하지만 사실상 의미가 없는데, javascript에서 혼용해서 쓰다보니 그렇게 표기하는 듯 합니다.

그렇다면 한국표준시로 표기하는 GMT+0900도 이해가 되시나요? 저희는 영국 기준 9시간 빠르다는 의미가 됩니다. (저희와 시간대를 함께 쓰는 것이 일본 등 주변국이 함께 있다고 하지만, 거기까지 깊게 들어가지는 않겠습니다.)

이제, DATE함수와 moment.js를 함께 살펴보겠습니다.

js에서 오늘 날짜를 찍어봤습니다.

첫번째 줄은 제가 찍은 시간대로 출력되었고, 두번째 줄은 현재 시간에 동기화되어 출력되었습니다.

console.log(new Date('2023-05-12 08:00:00')); //Fri May 11 2023 08:00:00 GMT+0900 (한국 표준시)
console.log(new Date('2023-05-12T00:00:00Z')); //Fri May 11 2023 09:00:00 GMT+0900 (한국 표준시)

여기서 T는 날짜와 시간을 구분하는 구분자의 역할, Z는 UTC|GMT를 의미합니다.

즉, Z가 없으면 위와 같이 로컬 시간이 출력되게 되는 것입니다.

아래는 moment.js로 시간을 출력해보았습니다.

import moment from 'moment-timezone';

moment.locale('ko');
const now = moment.tz("Asia/Seoul").format('LLLL');
console.log(now); //result: 2023년 5월 12일 금요일 오전 8:45
console.log(moment()); //result: Fri May 12 2023 08:45:44 GMT+0900(한국표준시)
console.log(moment.tz('Asia/Seoul')); //Fri May 12 2023 17:45:44 GMT+0900

'엥 저기 있는 L은 뭐지'라는 의문이 드셨죠? moment.js에서 format('LLLL'); 는 년, 월, 일, 요일, 시간의 형태로 표기하는 함수이고, 'YYYY-MM-DD'와 같은 형식도 당연히 가능합니다.

그래서 now의 값만 출력 형태가 다르게 나타났음을 확인할 수 있습니다.

아래 moment()는 현재시간을 실시간으로 반응하여 출력하고 있고, 마지막 줄은 시간이 혼자 이상하네요. 시간차를 살펴보면 9시간의 간극이 존재합니다.

moment.tz(’Asia/Seoul’)는 항상 서버의 현재 시간을 반환하기 때문에 한국인 저희와 9시간의 차이(서버가 한국에 없고 다른 나라(?)에 존재하는구나-라고 이해하시면 덜 헷갈리실 겁니다..저도 처음엔 이게 정말 헷갈렸거든요ㅋㅋㅋㅋ)가 발생하였고,

moment() 함수와 new Date() 함수는 각각 브라우저와 UTC 시간대를 기준으로 시간을 반환한다는 사실을 알 수 있었습니다.

시간대를 설정하는 방법은 다음과 같이 작성할 수 있습니다.

moment.tz.setDefault("Asia/Seoul");

아까 상단의 구문과 다른 점은 setDefault가 있죠.

moment.tz.setDefault("Asia/Seoul")은 모든 moment() 함수 호출에 대한 기본 설정을 변경해주는 역할을 한다면, moment.tz("Asia/Seoul")은 특정 시점의 시간을 변환합니다.

 

저는 이 개념이 잡히지 않아서 삽질을 시작했었답니다. 타임존 셋팅이 잠시 미웠었어요. 맨 마지막에 작성된 삽질 구문을 보면서 직접 한번 예제들의 시간과 마지막 구문의 시간을 비교해보세요 :D

시간대에 관해서, 또 구문을 통한 예제들을 알아보며 설명을 드렸는데 조금이나마 이해가 되셨다면 좋겠습니다. 저도 아직 종종 헷갈리기 때문에 저만의 방법으로 외워보고 있습니다😂

또, 여기서 그치지 않고 브라우저의 시간도 브라우저별로 다르기 때문에, 서비스에 따라 해당 브라우저의 공식 문서를 참고하는 것이 좋습니다. (크롬, 윈도우, 오페라 등등)

 

2.  moment.js 설치방법

설치방법은 간단합니다. 아래 중 작업 환경에 맞추어 설치하시거나

npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor
bower install moment --save # bower (deprecated)

설치 없이 다음처럼 작성하여 바로 사용하실 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

 

3. 삽질 try~

참고로 이 글을 쓰게 된 저의 삽질은 단 한 줄이 문제였습니다.

아래 제 문제의 구문을 보시고, 여러분도 한번 왜 그런지 생각해보시면 이번 글을 이해하는데 도움이 되실 것 같습니다.

혹시나 제가 잘못 쓴 부분이 있거나 이해가 안되는 부분이 있다면 댓글 남겨주세요. 다양한 시각과 접근이 늘 재밌더라구요😉

import moment from "moment-timezone";

moment.tz.setDefault("Asia/Seoul");
moment.locale('ko');

//현재시간 23년 5월 12일 오전 10시 기준으로 생각해보세요.
const now = moment().locale('ko').format('LLLL');
console.log(now); //2023년 5월 12일 금요일 오전 10:00
console.log(moment()); //Fri May 12 2023 19:00:29 GMT+0900
console.log(moment.tz('Asia/Seoul')); //Fri May 12 2023 19:00:29 GMT+0900

유용하셨길 바라면서 이만 줄이겠습니다. 기지개도 한번 켜시면서 오늘도 화이팅입니다.

읽어주셔서 감사합니다 😊

---

참고로 시간대에 관해 더 자세한 내용은 해당 사이트를 참고하시면 좋을 것 같아 남깁니다.

왜 내가 작성한 JavaScript Date 코드가 서버에서는 다르게 보이는 거죠? | 요즘IT