자바스크립트 날짜와 시간

2018-03-01

자바스크립트에서 제공하는 Date 객체는 기능이 충분하지 않으므로, 해당 포스트에서는 Moment.js를 사용한다.

1. 날짜, 타임존, 타임스탬프, 유닉스 시간

  • 타임존은 모두 UTC를 기준으로 한 시차로 나뉜다. UTC는 때때로 그리니치 표준시, 즉 GMT(Greenwich Mean Time)이라고 불리기도 한다.
  • UTC는 영국 그리니치 천문대(경도 0)를 기준으로 하는 세계의 표준시간대로서, 우리나라보다는 9시간이 느림(한국은 UTC+9)
  • 자바스크립트의 날짜는 1970년 1월 1일 UTC로부터 몇 밀리초가 지났는지 나타내는 숫자이다.
const d = new Date();
// 타임존이 들어간 그레고리력 날짜
console.log(d); //Wed Mar 07 2018 09:50:13 GMT+0900 (대한민국 표준시)
// 유닉스 타임스탬프
console.log(d.valueOf()) // 1520385344936
  • 위의 결과로 보면 타임존이 UTC로부터 시차 기준으로도 나오고(GMT+0900) 타임존 이름으로도 나오는 걸 볼 수 있다 (대한민국 표준시)
  • 자바스크립트에서 Date 인스턴스는 모두 유닉스 시간 원점(1970년 1월 1일 0시 0분 0초)으로부터 몇 밀리초가 지났는지 나타내는 숫자이다.
  • 자바스크립트는 보통 이 숫자를 사람이 읽기 편한 그레고리력 날짜로 변환한다. 숫자형 표현이 필요하면 valueOf() 메서드를 쓰면 된다.

2. Date 객체 만들기

  • Date 객체 예제
  • 위의 예제를 테스트해보면 결과가 항상 현재 지역의 표준시에 따라 나온다는 것을 알 수 있다.
  • 이것이 자바스크립트 Date 객체의 가장 큰 문제이다. 타임존을 명시할 방법이 없다. Date 객체는 항상 내부적으로는 UTC 기준으로 저장하고, 출력할 때 운영체제에서 정의한 표준시에 맞게 변환한다.
  • 하지만 노드가 자바스크립트를 서버로 가져감에 따라 타임존을 더 일관되게 처리할 방법이 필요해졌다.

3. Moment.js

  • Moment.js는 타임존을 지원하는 버전과 지원하지 않는 버전 두 가지가 있지만 포스트 예제는 모두 타임존 버전을 기준으로 한다.
  • 웹 기반 프로젝트를 만들고 있다면 cdnjs 같은 CDN을 통해 Moment.js를 불러올 수 있다.
<script src="//cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.14/moment-timezone.min.js"></script>
  • 노드를 사용할 때는 npm install --save moment-timezone 명령으로 Moment.js를 설치하고 require 명령으로 스크립트에 불러올 수 있다.
const moment = require('moment-timezone');



4. 날짜 데이터 만들기

4-1. 서버에서 날짜 생성하기

  • 서버에서 날짜를 생성할 때는 항상 UTC를 사용하거나 타임존을 명시하는 편이 좋다.
  • 특정 지역을 기준으로 날짜를 생성한다면 뜻하지 않은 예외가 발생하기 쉽다.
  • UTC 날짜를 사용할 수 있는 환경이라면 Date 객체의 UTC 메서드를 사용한다.
console.log(new Date(2018,2,7,1)); // Wed Mar 07 2018 01:00:00 GMT+0900 (대한민국 표준시)
console.log(new Date(Date.UTC(2018,2,7,1))); // Wed Mar 07 2018 10:00:00 GMT+0900 (대한민국 표준시)
  • 특정 타임존에 있는 서버에서 날짜를 생성할 떄는 moment.tz를 써서 Date 인스턴스를 만들면 타임존을 따로 변환하지 않아도 된다.
  • moment-timezone.js 예제

4-2. 브라우저에서 날짜 생성하기

브라우저는 운영체제를 통해 타임존 정보를 알 수 있고, 사용자는 일반적으로 그 지역의 시간을 선호한다.

5. 날짜 데이터 전송

  • 서버에서 브라우저로 날짜를 전송하거나 브라우저에서 서버로 날짜를 전송할 때는 복잡할 수 있다
  • 서버와 브라우저가 다른 타임존에 있떠라도 사용자는 자신의 타임존 기준으로 날짜를 보고 싶어 할 것이다.
  • 자바스크립트의 Date 인스턴스는 날짜를 저장할 때 UTC를 기준으로 유닉스 타임스탬프를 저장하므로, Date 객체를 그냥 전송해도 안전하다.
  • 날짜 JSON 전송 예제


6. 날짜 형식

  • Date 객체에서 제공하는 날짜 형식은 별로 다양하지 않다. Moment.js를 이용하면 원하는 형식을 쉽게 만들 수 있다.
  • Moment.js의 format 메서드를 써서 날짜를 원하는 형식으로 바꿀 수 있다.
  • 날짜 형식 예제


7. 날짜 구성 요소

8. 날짜 비교

  • 단순한 날짜 비교는 자바스크립트에 내장된 비교 연산자를 통해 할 수 있다
  • Date 인스턴스는 날짜를 타임스탬프(숫자)로 저장하므로 숫자에 쓸 수 있는 비교 연산자를 그대로 쓰면 된다.
  • 날짜 비교 예제


9. 날짜 연산