2019-08-04

15 minutes read (About 2324 words)

chapter15. 날짜와 시간

자바스크립트의 Date 객체는 원래 넷스케이프 프로그래머 켄 스미스가 만들었다.
사실 자바의 java.util.Date를 가져온 것

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

0초(UTC: 1970년 1월 1일 0시 0분 0초)
타임존(UTC, 때때로 그리니치 표준시 GMT)라고도 불린다.

타임존이란?
타임존은 동일한 로컬 시간을 따르는 지역을 의미하며, 주로 해당 국가에 의해 법적으로 지정된다. 보통 국가별로 각자의 고유한 타임존을 사용하고 있으며, 미국이나 캐나다처럼 면적이 넓은 나라인 경우 지역별로 각기 다른 타임존을 사용하기도 한다.

GMT
한국의 타임존은 보통 GMT+09:00 으로 표현된다. 여기서 GMT는 Greenwich Mean Time의 약자로서 경도 0도에 위치한 영국 그리니치 천문대를 기준으로 하는 태양 시간을 의미한다. GMT 시간은 1925년 2월 5일부터 사용하기 시작하였으며, 1972년 1월 1일까지 세계 표준시로 사용되었다.

UTC
UTC는 지구 자전주기의 흐름이 늦어지고 있는 문제를 해결하기 위해 1972년에 세슘 원자의 진동수에 기반한 국제 원자시를 기준으로 다시 지정된 시간대이다. 즉, UTC는 좀더 정확한 시간측정을 위해서 GMT를 대체하기 위해 제정된 새로운 표준이며,시간적으로는 둘 사이에 아주 미세한 차이밖에 없지만, 소프트웨어에서 사용할 때는 UTC라고 하는 것이 더 정확한 표현일 것이다

자바스크립트는 보통 이 숫자를 사람이 읽기 편한 그레고리력 날짜로 변환한다.
자바스크립트의 Date 인스턴스는 모두 유닉스 시간 원점으로부터 몇 밀리초가 지났는지를 나타내는 숫자이다.
숫자형 표현이 필요하면 valueOf() 메서드를 사용한다.

// ## 15.1 날짜, 타임존, 타임스탬프, 유닉스 시간
const d = new Date();
console.log(d); //2019-08-04T12:36:34.573Z
console.log(d.valueOf()); //1564922215240

15.2 Date 객체 만들기

Date 객체는 네 가지 방법으로 만들 수 있다.
매개변수 없이 호출하면 현재 날짜에 해당하는 Date 객체를 반환
문자열을 제공하면 그 문자열을 해석해서 그에 맞는 날짜를 반환
숫자를 넣으면 유닉스 타임스탬프로 해석

//자바스크립트 월은 0으로 시작, 0은 1월이고, 1은 2월
new Date(2015,0); //Thu Jan 01 2015 00:00:00 GMT+0900 (한국 표준시)
new Date(2015,1); //Sun Feb 01 2015 00:00:00 GMT+0900 (한국 표준시)
new Date(2015,1,14); //2015년 2월 14일 0시
new Date(2015,1,14,13); ////2015년 2월 14일 1시
new Date(2015,1,14,13,30,5); //Sat Feb 14 2015 13:30:05 GMT+0900 (한국 표준시)

//유닉스 타임스탬프로 날짜 생성
new Date(0); //Thu Jan 01 1970 09:00:00 GMT+0900 (한국 표준시)
new Date(1000);

//날짜 문자열 해석
new Date('June 14,2013'); //Fri Jun 14 2013 00:00:00 GMT+0900 (한국 표준시)

리스본이나 그리니치 등 UTC 지역에 살지 않는 한, 예제에서 UTC로 표기한 시각은 독자의 콘솔에 표시되는 내용과 다르다.
즉 타임존을 명시할 방법이 없다.
Date 객체는 항상 UTC 기준으로 저장하고, 출력 시 운영제체에 에서 정의한 표준시에 맞게 변환

15.3 Moment.js

Moment.js는 타임존을 지원하는 버전과 지원하지 않는 버전 2가지가 있다.

Moment.js 호출

//웹 기반 프로젝트시
 <script src="http:////cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.4.0/moment-timezone.min.js"></script>

//노드에서 사용하기
npm install moment --save moment-timezone
//불러오기
const moment = require('moment-timezone');

15.5 날짜 데이터 만들기

Date 객체를 써서 날짜를 만들어도 되긴 하지만, 타임존을 명시하지 않고 날짜를 생성할 때는 어느 타임존이 사용되는지 생각해야하고, 어느 지역에서 날짜를 생성하느냐에 따라 달라지게 된다.
예) 버지니아 앨링턴의 서버에서 날짜 관련 코드를 만들면, 캘리포니아 로스앤잴레스의 사용자 브라우저에서는 3시간의 차이가 발생

15.5.1 서버에서 날짜 생성하기

서버에서 날짜를 생성할 땐 UTC를 사용하거나 타임존을 명시하는 편이 좋다.UTC 날짜를 사용할 수 있는 환경이라면 Date 객체의 UTC 메서드를 사용하라

const d = new Date(Date.UTC(2016,4,27)); 
console.log(d);
/*Fri May 27 2016 09:00:00 GMT+0900 (한국 표준시)
*/

Date.UTC는 Date의 매개변수를 똑같이 받지만, 새 Date 인스턴스를 반환하지 않고 해당 날짜의 숫자형 값을 반환한다.
이 숫자를 Date 생성자에 넘기면 날짜 인스턴스를 얻을 수 있다.

특정 타임존에 있는 서버에서 날짜를 생성할 땐 moment.tz를 써서 Date 인스턴스를 만들면 타임존을 손으로 변환할 필요가 없다.

moment.tz

//특정 타임존에 있는 서버에서 날짜를 생성
const moment = require('moment-timezone');
const d = moment.tz([2016,3,27,9,19],'America/Los_Angeles').toDate();
console.log(d); //2016-04-27T16:19:00.000Z

15.6 날짜 데이터 전송하기

일반적으로 Date 객체를 그냥 전송해도 안전하지만,
자바스크립트에서 날짜를 전송하는 가장 확실한 방법은 JSON을 사용하는 것
날짜는 JSON에서 1:1 대칭이 되게끔 파싱할 수 없으므로, JSON 명세에는 날짜에 대한 데이터 타입을 정의하지 않는다.

// ## 15.6 날짜 데이터 전송하기
const before = { d: new Date() };
before.d instanceof Date //true
const json = JSON.stringify(before);
const after = JSON.parse(json);
after.d instanceof Date; //false
typeof after.d; // "string"

즉, JSON으로 바로 날짜를 다룰 수는 없지만, 전송된 문자열에서 날짜를 ‘복구’하는 것은 가능하다.

1
2
3

//전송된 문자열에서 날짜 복구하기
after.d = new Date(after.d);
after.d instanceof Date; //true

원래 날짜가 어느 타임존에 있던, 일단 JSON으로 인코드된 날짜는 UTC이다. 그리고 JSON으로 인코드된 문자열을 Date 생성자에 넘겨서 얻은 날짜는 사용자의 타임존을 기준으로 표시된다.

문자를 인코드하지 않고 valueOf() 메서드로 얻은 숫자를 그냥 전송해도 된다.

const before = { d: new Date() };
typeof before.d //"object"
const json = JSON.stringify(before);
const after = JSON.parse(json);
typeof after.d //"string"
const d = new Date(after.d);
// console.log(d); /Sun Aug 04 2019 22:54:52 GMT+0900

15.7 날짜 형식

Moment.js의 format 메서드를 서서 날짜를 원하는 형식으로 만들 수 있다.
예를 들어 문자열 YYYY는 네 자리 연도로 바뀐다.

const moment = require('moment-timezone');
const d = new Date(Date.UTC(1093,4,10));
//다음 기준은 로스앤잴리스에 사는 사람 기준
d.toLocaleDateString(); //"1093. 5. 10."
d.toLocalFormat();//
d.toLocaleTimeString();
d.toTimeString();
d.toUTCString();

moment(d).format("YYYY-MM-DD");//
console.log(d); //1093-05-10

15.8 날짜의 구성 요소

Date 인스턴스의 각 구성 요소에 접근할 땐 다음 메서드를 사용한다.

const d = new Date(Date.UTC(1815,9,10));
//지금 시각 2019 - 08 - 04 오후 11시 11분 기준
//다음 결과는 로스앤젤리스 기준
d.getFullYear();//1815
d.getMonth(); // 9
d.getDate(); //10
d.getDay(); //2 - (화요일)
d.getHours(); //8 
d.getMinutes(); //27
d.getSeconds(); //52
d.getMilliseconds(); //0

//UTC 기준 메서드
d.getUTCFullYear(); //1815
d.getUTCMonth(); //9
d.getUTCDate(); //10
//etc...

15.9 날짜 비교

날짜 A와 날짜 B중 어느 쪽이 더 앞인가 하는 단순 날짜 비교 때는 자바스크립트에 내장된 비교 연산자를 통해 할 수 있다.
Date 인스턴스는 날짜를 숫자로 지정하므로, 숫자에 쓸 수 있는 비교 연산자를 그대로 사용하면 된다.

const d1 = new Date(1996,2,1);
const d2 = new Date(2009,4,27);

d1 > d2//false;
d1 < d2//true;

15.10 날짜 연산

날짜는 숫자이므로 날짜에서 날짜를 빼면 몇 밀리초가 지났는지 알 수 있다.

const d1 = new Date(1996,2,1);
const d2 = new Date(2009,4,27);

const msDiff = d2- d1 //417744000000
const daysDiff = msDiff/1000/60/60/24; //4835

Array.prototype.sort를 써서 날짜를 정렬 할 수도 있다.

const dates = [];
const min = new Date(2017,0,1).valueOf();
const delta = new Date(2020,0,1).valueOf() - min;
for(let i =0; i <10 ; i++)
    dates.push(new Date(min + delta*Math.random()));

//dates 배열은 랜덤으로 만들었으므로 뒤죽박죽일것
//날짜순으로 정렬하기
dates.sort((a,b) => a-b);
/*
dates
(10) [Thu Jan 12 2017 07:13:33 GMT+0900 (한국 표준시), Sat Jan 14 2017 15:30:06 GMT+0900 (한국 표준시), Tue Jan 31 2017 07:46:50 GMT+0900 (한국 표준시), Sun Apr 23 2017 02:13:01 GMT+0900 (한국 표준시), Mon Sep 18 2017 06:02:23 GMT+0900 (한국 표준시), Thu Dec 07 2017 16:38:18 GMT+0900 (한국 표준시), Sun Dec 17 2017 19:38:32 GMT+0900 (한국 표준시), Mon Apr 02 2018 11:27:48 GMT+0900 (한국 표준시), Mon Jun 03 2019 09:55:56 GMT+0900 (한국 표준시), Fri Dec 27 2019 00:38:29 GMT+0900 (한국 표준시)]
*/

15.11 사용자가 알기 쉬운 상대적 날짜

Moment.js에서 제공하는 목록

날짜를 더하거나 빼는 메서드

메서드를 체인으로 연결하기

‘3일전’과 같이 상대적으로 날짜 표현하기

//Moment.js에서 제공하는 목록입니다.
let m = moment(); //현재
m.add(3,"days");//m은 이제 3일 뒤
m.subtract(2,"years"); //m은 이제 2년 전으로부터 3일이 지난 날짜

m = moment();//리셋
m.startOf("year"); // m은 이제 올해 1월 1일
m.endOf("month");//m은 이제 올해 1월 31일

//메서드를 체인으로 연결
let  m = moment()
.add(10,"hours")
.subtract(3,"days")
.endOf("month");
//m은 이제 3일전으로부터 10시간 뒤인 달의 마지막 순간

//상대적 날짜
m.subtract(10,"seconds").fromNow(); //