Date 내가 해냄

인트로

Date를 생각보다 자주 사용하는데 로컬 시간대로 나타내는 걸 자꾸 까먹어서 아예 정리를 해버렸습니다.

Date에 시간 뺏기는게 싫어요...앞으로 기억 안 날 때마다 바로 블로그로 달려와야겠어요.

---

Date란?

Date는 생성자 함수로 Date 객체를 생성합니다. 이 객체는 날짜와 시간을 나타내는 정수값을 가지게 되는데 이 값은 1970년 1월 1일 00:00:00(UTC) 기점으로 밀리초를 나타냅니다. 

 

왜 1970년 1월 1일 기점이냐? 에 대한 재미있는 기사가 있으니 확인해 보세요.

결론은 "응 그게 편할 것 같아서"라고 합니다.

Unix Tick Tocks to a Billion

---

어떻게 생성하나요?

다양한 방법이 있습니다. 하나씩 보죠

new Date(), Date()

둘이 차이점은 반환하는 데이터 타입이 다르다는 겁니다. new 연산자를 사용하면 객체를 반환하고 사용하지 않으면 문자열을 반환해 줍니다.

const date = new Date();
//Fri Mar 31 2023 22:12:33 GMT+0900 (대한민국 표준시)
console.log(typeof date); //object
const date1 = Date();
console.log(typeof date1); //string
//Fri Mar 31 2023 22:13:10 GMT+0900 (대한민국 표준시)

new Date(milliseconds)

밀리초를 인수로 전달하면 1970년 1월 1일 00:00:00부터 + 밀리초만큼 지난 날짜와 시간을 알려줍니다.

솔직히 잘 안쓸 것 같아요. 

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

new Date(dateString)

원하는 날짜를 가지는 객체를 만들 수도 있습니다.

let date = new Date('July 17, 2023 00:00:00');
//July로 해도 되고 Jul로 해도 되네요
console.log(date);
//Mon Jul 17 2023 00:00:00 GMT+0900 (대한민국 표준시)
date = new Date('2023/07/17/00:00:00')
console.log(date);
//Mon Jul 17 2023 00:00:00 GMT+0900 (대한민국 표준시)

new Date(연, 월[, 일, 시, 분, 초, 밀리초])

다음을 의미하는 숫자로 전달해도 됩니다. 이때 연, 월은 필수입니다. 지정하지 옵션은 0이나 1로 초기화됩니다.

이때 연은 1900년 이후의 정수이기 때문에 0을 입력해도 1900년이라는 것 알아두세요.

 

월의 경우 1월이라고 1을 입력하면 안 됩니다. 배열의 인덱스처럼 0이 1월을 의미합니다. 

11월을 나타내려면 10을 입력해야 하는 것이죠. 주의하세요!

let date = new Date(0,6,17,0,0,0,0);
console.log(date);
//Tue Jul 17 1900 00:00:00 GMT+0827 (대한민국 표준시)
date = new Date(99,6,17,0,0,0,0);
console.log(date);
date = new Date(100,6,17,0,0,0,0);
console.log(date);
//Sat Jul 17 0100 00:00:00 GMT+0827 (대한민국 표준시)

---

Date 메서드

이제 Date의 메서드를 살펴보도록 하죠.

Date.now()

1970... 더 이상 너무 귀찮으니 "그 시점"이라고 하겠습니다. 그 시점부터 현재 시간까지 경과한 밀리초를 숫자로 반환해 줍니다.

let date = Date.now();
console.log(date); //1680269368520

Date.parse()

. 그 시점로부터 인수로 전달된 시간까지의 밀리초를 숫자로 반환해 줍니다.

왜 그 시점을 입력했을 때 0이 아니라 음수값이 나올까요..

바로바로...

KST 기준으로 반환해 줬기 때문입니다. 그 시점은 UTC 기준인데 말이죠. KST가 UTC보다 9시간이 빠르다고 하네요.

let date = Date.parse('Jan 1 1970 00:00:00');
console.log(date); //-32400000

Date.UTC

위와 메서드와 거의 비슷합니다. parse의 경우 인수를 로컬 타임으로 인식했다면 이 메서드는 UTC로 인식합니다.

그리고 이때 인자는 new Date(연, 월[, 일, 시, 분, 초, 밀리초]) 이 형태로 전달해야 합니다.

아니면 NaN이 나옵니다.

let date = Date.UTC('1970/0/1');
console.log(date); //NaN
date = Date.UTC(1970,0,1);
console.log(date); //0

Date.prototype.get*|set*

get

getFullYear, getMonth, getDate, getDay, getHours, getMinutes, getSeconds, getMilliseconds, getTime, getTimezomeOffset

set

setFullYear, setMonth, setDate,             , setHours, setMinutes, setSeconds, setMilliseconds, setTime,

 

메서드 이름을 보면 알 수 있지만 연도나 월, 일을 반환받거나 설정하는 메서드입니다. 이 중에서 값이 특별한 친구들만 보겠습니다.

 

Month의 경우 0~11의 정수를 반환합니다 1월이 0, 12월이 11입니다.

Day의 경우 요일을 말합니다. 이때 요일을 0~6의 정수로 반환합니다. 0이 일요일 6이 토요일입니다.

( 0: 일 1: 월 2: 화 3: 수 4: 목 5: 금 6: 토 )

밀리초는 0~999의 정수를 반환합니다. 

 

getTime은 그 시점으로부터 인수로 전달한 시간까지 경과된 밀리초를 반환합니다. set은 밀리초를 넘기면 그 시점 기준으로 경과된 밀리초를 설정하는 거고요.

 

getTimezoneOffset은 UTC와 locale 시간과의 차이를 분 단위로 반환해 줍니다. KST는 UTC에 9시간을 더한 값입니다.

let today = new Date();
console.log(today.getTimezoneOffset()/60); //-9

Date.prototype.toDateString

사람이 읽을 수 있는 형태로 반환해줍니다.

let today = new Date();
console.log(today.toString());
//Fri Mar 31 2023 22:48:03 GMT+0900 (대한민국 표준시) 
console.log(today.toDateString());
//Fri Mar 31 2023

Date.prototype.totimeString

시간을 사람이 읽을 수 있는 형태로 반환해줍니다.

let today = new Date();
console.log(today.toTimeString());
//22:49:04 GMT+0900 (대한민국 표준시)

Date.prototype.toISOString

let today = new Date();
console.log(today.toISOString());
//2023-03-31T13:50:21.863Z

Date.prototype.toLocaleString

가장 유용하게 쓰겠네요. 인수를 생략하면 브라우저가 동작 중인 시스템의 locale을 적용하고 인수로 설정도 가능합니다.

let today = new Date();
console.log(today.toLocaleString());
//2023. 3. 31. 오후 10:51:44 
console.log(today.toLocaleString('ko-KR'));
//2023. 3. 31. 오후 10:51:48

Date.prototype.toLocaleTimeString

시간만 로컬 기준으로 뱉습니다.

let today = new Date();
console.log(today.toLocaleTimeString('ko-KR'));
//오후 10:52:29

---

참고로 밀리초를 나눠서 정수를 반환할 때는 실제로 지나간 초를 변환해야 하기 때문에 Math.round()가 아니라 Math.floor()를 사용해야 합니다.

---

밀리초는 타이머 이런 거 만들 때 사용하게 될 것 같네요.

Date 마스터가 되는 그날까지..

 

 

MDN & 모던 자바스크립트 Deep Dive 내용을 참고하였습니다.