[JavaScript] 날짜 및 시각 관련 API (Date 객체)

지금까지 Python과 JavaScript를 이용한 풀 스택 개발 업무를 진행하면서, Python에서 날짜나 시각을 다루는 일은 꽤 자주 있었지만 의외로 JavaScript에서 날짜나 시각을 다루는 일은 많이 없었던 것 같다. 그래서인지 JavaScript에서 날짜나 시각을 다루는 일에는 상대적으로 미숙했다. 그래서 이번 포스팅을 통해 JavaScript가 제공하는 날짜 및 시각 관련 API를 깔끔하게 정리하고 익혀두기로 하였다.

 

1. Date : JavaScript의 날짜 및 시각 관련 API

Date는 JavaScript에서 날짜 및 시각을 나타내는 객체를 생성하기 위한 생성자 함수의 이름이자, 그러한 객체의 타입을 일컫는다. JavaScript에서는 이를 통해 날짜 및 시각 관련 API를 제공하고 있다.

 

※ 날짜 및 시각 : 년(Year), 월(Month), 일(Date), 시(Hour), 분(Minute), 초(Second), 밀리초(Millisecond)

 

Date 객체는 내부적으로 숫자 값을 하나 가지는데, 이는 UTC 기준 1970.01.01 00:00부터 이 객체가 나타내고자 하는 날짜 및 시각까지 흐른 시간을 밀리초(Millisecond)로 나타낸 숫자 값이다. 그리고 아래에서 관련 API를 소개할 때 사용하는 '현재'라는 표현은 기본적으로 JavaScript가 실행되고 있는 시스템에 설정된 시간대를 기준으로 한다는 것을 기억하자. 따라서 JavaScript가 실행되는 지역에 따라 '현재'의 기준이 달라질 수도 있다.

 

※ UTC(Coordinated Universal Time, 협정 세계시)와 GMT(Greenwich Mean Time, 그리니치 평균시)는 초의 소수점 단위에서만 차이가 나기 때문에 일상에서는 같은 의미로 사용된다. 기술적인 표기에서는 UTC가 더 많이 사용된다. KST(Korean Standard Time)는 대한민국의 시간대를 나타내며, UTC/GMT에 9시간을 더한 것과 같다. 즉, 협정 세계시보다 9시간 빠르다.

 

2. Date 객체 생성 방법

new 연산자를 이용하여 Date() 생성자를 호출하면 Date 객체가 생성된다.

 

2-1. new Date()

인자를 전달하지 않으면 현재의 날짜 및 시각을 나타내는 Date 객체가 생성 및 반환된다.

// Mon Jul 05 2021 18:42:58 GMT+0900 (대한민국 표준시)
console.log(new Date());

 

2-2. new Date(milliseconds)

인자로 밀리초를 나타내는 숫자 값을 전달하면 UTC 기준 1970.01.01 00:00부터 해당 시간이 흐른 시점의 날짜 및 시각을 나타내는 Date 객체가 생성 및 반환된다.

// 하루(1일)를 밀리초로 환산
const oneDay = 1000 * 60 * 60 * 24;

// Thu Jan 01 1970 09:00:00 GMT+0900 (대한민국 표준시)
console.log(new Date(0));

// Fri Jan 02 1970 09:00:00 GMT+0900 (대한민국 표준시)
console.log(new Date(oneDay));

 

2-3. new Date(dateString)

인자로 날짜 및 시각을 나타내는 문자열 값을 전달하면 해당 날짜 및 시각을 나타내는 Date 객체가 생성 및 반환된다. 이때 해당 문자열 값은 Date.parse() 메소드가 해석할 수 있는 형식이어야 한다.

// Mon Jul 05 2021 18:42:58 GMT+0900 (대한민국 표준시)
console.log(new Date('Jul 05, 2021 09:42:58 UTC'));

// Mon Jul 05 2021 18:42:58 GMT+0900 (대한민국 표준시)
console.log(new Date('Jul 05, 2021 18:42:58'));

// Mon Jul 05 2021 18:42:58 GMT+0900 (대한민국 표준시)
console.log(new Date('2021/07/05/18:42:58'));

※ 하지만 이러한 Parsing 방식은 브라우저마다 동작의 차이가 있을 수 있기 때문에 사용을 권장하지 않는다.

 

2-4. new Date(year, month[, day, hour, minute, second, millisecond])

인자로 년, 월, 일, 시, 분, 초, 밀리초를 나타내는 숫자 값들을 전달하면 해당 날짜 및 시각을 나타내는 Date 객체가 생성 및 반환된다. 이때 년(year)과 월(month)은 필수이며, 지정하지 않은 나머지 값들은 기본값(0 또는 1)로 자동 설정된다. 그리고 month는 0부터 시작한다는 것에 주의하자. 즉, 0은 1월을 나타내고 11은 12월을 나타낸다.

// Thu Jul 01 2021 00:00:00 GMT+0900 (대한민국 표준시)
console.log(new Date(2021, 6));

// Mon Jul 05 2021 18:42:58 GMT+0900 (대한민국 표준시)
console.log(new Date(2021, 6, 5, 18, 42, 58, 981));

 

3. Date 메소드

다음은 Date 생성자 자체가 가지고 있는 날짜 및 시각 관련 메소드들이다. 기본적으로 다음 메소드들은 밀리초를 나타내는 숫자 값을 반환한다는 공통점이 있다.

 

3-1. Date.now()

UTC 기준 1970.01.01 00:00부터 현재까지 흐른 시간을 밀리초로 나타낸 숫자 값을 반환한다.

// 1625477648936
console.log(Date.now());

 

3-2. Date.parse(dateString)

UTC 기준 1970.01.01 00:00부터 dateString이 나타내는 날짜 및 시각까지 흐른 시간을 밀리초로 나타낸 숫자 값을 반환한다.

// 1625478178000
console.log(Date.parse('Jul 05, 2021 09:42:58 UTC'));

// 1625478178000
console.log(Date.parse('Jul 05, 2021 18:42:58'));

// 1625478178000
console.log(Date.parse('2021/07/05/18:42:58'));

※ 앞서 말했듯, 이러한 Parsing 방식은 브라우저마다 동작의 차이가 있을 수 있기 때문에 사용을 권장하지 않는다.

 

3-3. Date.UTC(year, month[, day, hour, minute, second, millisecond])

UTC 기준 1970.01.01 00:00부터 인자로 전달된 날짜 및 시각까지 흐른 시간을 밀리초로 나타낸 숫자 값을 반환한다. 단, 인자로 전달된 값들은 전부 UTC 기준의 시간대로 취급된다.

// 1628121600000
console.log(Date.UTC(2021, 7, 5));

// 1628156578981
console.log(Date.UTC(2021, 7, 5, 09, 42, 58, 981));

 

4. Date.prototype 메소드

다음은 Date 객체들이 공통으로 사용할 수 있는 날짜 및 시각 관련 메소드들이다.

 

4-1. 날짜 및 시각 조회/설정 메소드

다음은 날짜 및 시각 정보를 조회하거나 설정하는 메소드들이다. 이름에 UTC가 들어가면 시간대 기준이 UTC임을 의미한다.

분류	메소드	설명
년 (Year)	Date.prototype.getFullYear()	연도를 나타내는 네 자리 숫자 값을 반환한다.
	Date.prototype.getUTCFullYear()
	Date.prototype.setFullYear()	연도를 나타내는 네 자리 숫자 값을 설정한다. (+ 월, 일도 함께 설정할 수 있다.)
	Date.prototype.setUTCFullYear()
월 (Month)	Date.prototype.getMonth()	월(0 ~ 11)을 나타내는 숫자 값을 반환한다.
	Date.prototype.getUTCMonth()
	Date.prototype.setMonth()	월(0 ~ 11)을 나타내는 숫자 값을 설정한다. (+ 일도 함께 설정할 수 있다.)
	Date.prototype.setUTCMonth()
일 (Date)	Date.prototype.getDate()	일(1 ~ 31)을 나타내는 숫자 값을 반환한다.
	Date.prototype.getUTCDate()
	Date.prototype.setDate()	일(1 ~ 31)을 나타내는 숫자 값을 설정한다.
	Date.prototype.setUTCDate()
요일 (Day)	Date.prototype.getDay()	요일(0 ~ 6)을 나타내는 숫자 값을 반환한다. (0이 일요일, 6이 토요일이다.)
	Date.prototype.getUTCDay()
시 (Hour)	Date.prototype.getHours()	시(0 ~ 23)를 나타내는 숫자 값을 반환한다.
	Date.prototype.getUTCHours()
	Date.prototype.setHours()	시(0 ~ 23)를 나타내는 숫자 값을 설정한다. (+ 분, 초, 밀리초도 함께 설정할 수 있다.)
	Date.prototype.setUTCHours()
분 (Minute)	Date.prototype.getMinutes()	분(0 ~ 59)을 나타내는 숫자 값을 반환한다.
	Date.prototype.getUTCMinutes()
	Date.prototype.setMinutes()	분(0 ~ 59)을 나타내는 숫자 값을 설정한다. (+ 초, 밀리초도 함께 설정할 수 있다.)
	Date.prototype.setUTCMinutes()
초 (Second)	Date.prototype.getSeconds()	초(0 ~ 59)를 나타내는 숫자 값을 반환한다.
	Date.prototype.getUTCSeconds()
	Date.prototype.setSeconds()	초(0 ~ 59)를 나타내는 숫자 값을 설정한다. (+ 밀리초도 함께 설정할 수 있다.)
	Date.prototype.setUTCSeconds()
밀리초 (Millisecond)	Date.prototype.getMilliseconds()	밀리초(0 ~ 999)를 나타내는 숫자 값을 반환한다.
	Date.prototype.getUTCMilliseconds()
	Date.prototype.setMilliseconds()	밀리초(0 ~ 999)를 나타내는 숫자 값을 설정한다.
	Date.prototype.setUTCMilliseconds()
기타	Date.prototype.valueOf()	UTC 기준 1970.01.01 00:00부터 흐른 시간을 밀리초로 나타내는 숫자 값을 반환한다.
	Date.prototype.getTime()
	Date.prototype.setTime()	UTC 기준 1970.01.01 00:00부터 흐른 시간을 밀리초로 나타내는 숫자 값을 설정한다.
	Date.prototype.getTimezoneOffset()	시스템에 설정된 시간대와 UTC 시간대의 차이를 분으로 나타낸 숫자 값을 반환한다. (= UTC - 시스템)

 

4-2. 문자열 변환 메소드

다음은 날짜 및 시각 정보를 문자열 형태로 바꿔서 반환하는 메소드들이다.

메소드	설명
Date.prototype.toString() == Date()	해당 날짜 및 시각을 나타내는 문자열 값을 반환한다.
Date.prototype.toDateString()	해당 날짜를 나타내는 문자열 값을 반환한다.
Date.prototype.toTimeString()	해당 시각을 나타내는 문자열 값을 반환한다.
Date.prototype.toISOString()	해당 날짜 및 시각을 나타내는 ISO 8601 형식의 문자열 값을 반환한다.
Date.prototype.toJSON()	toISOString() 메소드와 동일하다. JSON.stringify() 메소드에 의해 사용된다.
Date.prototype.toUTCString()	(UTC 기준) 해당 날짜 및 시각을 나타내는 문자열 값을 반환한다.

 

 

 

 

 

 

본 글은 아래 링크의 내용을 참고하여 학습한 내용을 나름대로 정리한 글임을 밝힙니다.

https://poiemaweb.com/js-date

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date