반응형
250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Archives
Today
Total
관리 메뉴

가끔 보자, 하늘.

JavaScript의 Date 객체 정리 본문

개발 이야기/개발 및 서비스

JavaScript의 Date 객체 정리

가온아 2019. 8. 27. 14:26

JavaScript의 Date 객체는 아래의 특징을 가지고 있습니다. 다른 언어에서도 크게 다르지 않습니다.

- Date 객체는 UTC, 1970년 1월 1일 0시를 기준으로 하며, 밀리세컨트로 시간값을 기록합니다. 
- 만약 입력된 값이 유효하지 않다면 NaN값이 반환됩니다.
- 월은 0부터 시작하며 11이 12월이 됩니다.
- 요일은 0부터 시작하며 0이 일요일, 6일 토요일이 됩니다. 
* 크로스 브라우징 문제가 일부 있습니다. 작성 전 이에 대한 문제를 검토해 보시기 바랍니다. (https://www.google.com/search?q=js+date+cross+browser+format) 보다 상세한 내용은 이 곳(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date)을 참고하세요.

아래 예제에서는 JavaScript Date 객체 사용법을 알아보겠습니다.

var date1 = new Date('2019-01-01T00:00:00.000Z'); 
var date2 = new Date('2019-01-01T00:00:00'); 

console.log( "RAW DATE = ",date1, " / ", date2);  
// 결과 (1) : RAW DATE = 2019-01-01T00:00:00.000Z / 2018-12-31T15:00:00.000Z 
console.log( "toString = ",date1.toString(), " / ", date2.toString());  
// 결과 (2) : toString = Tue Jan 01 2019 09:00:00 GMT+0900 (GMT+09:00) / Tue Jan 01 2019 00:00:00 GMT+0900 (GMT+09:00)  

 

date1에는 UTC(협정 세계시, Coordinated Universal Time)로, date2에는 현지 시간을 입력했습니다. Date는 입력된 값을 분석하여 UTC로 값을 보관합니다. 

이를 그대로 출력하면 "결과 (1)"과 같이 UTC 기준으로 출력되는 것을 확인할 수 있습니다. Seoul은 시간은 UTC 기준 +9 시간이므로 UTC로 표현하게 되면 9시간 전의 시간으로 표기됩니다. 두 값을 특정한 조건이나 Date의 함수를 사용하지 않고 출력하면 UTC 기본값으로 출력됩니다. 그래서 date1은 입력값과 동일하게, date2는 9시간 전으로 출력되는 것을 확인할 수 있습니다.  

이제 문자열로 시간을 표현하기 위해서 toString 함수를 사용하니 "결과 (2)"과 같이 date1, date2 모두 현지 시간으로 출력되는 것을 확인할 수 있습니다. date1는 UTC+9에 맞춰 입력된 시간에 +9시간이 되어 출력되고, date2는 현지 시간으로 입력한 값이 그대로 보이는 것을 확인할 수 있습니다. 

그럼 시간 데이타에서 getHours()로 시간을 알아보면 어떻게 나오게 될까요?

var date1 = new Date('2019-01-01T00:00:00.000Z'); 
var date2 = new Date('2019-01-01T00:00:00'); 

console.log( "hours = ",date1.getHours() ," / ", date2.getHours() ); 
// 결과 (3) : hours = 9 / 0 
console.log( "hours = ",date1.getUTCHours() ," / ", date2.getUTCHours() ); 
// 결과 (4) : hours = 0 / 15 

getHours 함수는 현지 시간값을 기준으로 값을 반환하며, UTC 시간값을 기준으로 값을 반환받길 원한다면 getUTCHours 함수를 사용할 수 있습니다. setHours와 setUTCHours도 마찬가지입니다.

var date1 = new Date('2019-01-01T00:00:00.000Z'); 
var date2 = new Date('2019-01-01T00:00:00'); 

date1.setHours(9); 
date2.setHours(9); 

console.log( "DATE1 = ",date1 ," / DATE2 = ", date2 ); 
// 결과 (4) : DATE1 =  2019-01-01T00:00:00.000Z  / DATE2 =  2019-01-01T00:00:00.000Z 

setHours 함수는 첫 인자를 UTC가 아닌, 현지 시간의 시간값으로 인지합니다. 그러므로 당연히 내부에서도 시간값을 설정할 때 UTC가 아닌 현재 시간을 기준으로 주어진 시간값을 설정하게 됩니다. 

date1의 경우 현지 시간은 2019-01-01 09:00:00 이었으며, setHours에서 9시로 지정되었기 때문에 수정된 것은 없습니다. 그래서 출력하면 UTC 기준으로 2019-01-01T00:00:00.000Z 입니다.

date2의 경우 현지 시간은 2019-01-01 00:00:00 이었으며, setHours에서 9시로 지정되어 2019-01-01 09:00:00로 수정되었습니다. 그래서 출력하면 UTC 기준으로 2019-01-01T00:00:00.000Z 입니다. (결과 (1)에서는 2018-12-31T15:00:00.000Z 이었습니다.)


지금까지 JavaScript에서 Date 객체에 대해서 간단히 알아보았습니다. 


반응형