벌써 30장이네요. 역시 방향만 잘 설정하고 간다면, 끝까지 갈 수 있을 것만 같아요! 🥰

🚦본론

이 객체도 정말 자주 쓰는 친구 중 하나죠.
Date는 빌트인 객체이면서 생성자 함수입니다.
이를 통해 우리는 현재 UTC에 맞는 시간대를 구할 수 있어요.

생성자 함수인 Date

생성자 함수로써, Date에는 인자를 전달할 수 있어요.
인자를 제공하지 않는다면 자바스크립트 코드가 실행된 시스템에 의해 설정된 날짜와 시간을 반환합니다.

console.log(new Date()) // Mon Oct 03 2022 12:23:59 GMT+0900 (한국 표준시) {}

인수를 설정할 때

new Date(milliseconds: number)

milliseconds를 인수로 전달하면, 1970년 1월 1일 기준, 해당milliseconds만큼 over된 시간을 반환합니다.

new Date(0) // Thu Jan 01 1970 09:00:00 GMT+0900 (한국 표준시) {}

new Date(dateString: string)

이때, 만약 문자열을 인수로 전달하면 해당 날짜와 시간을 Date 객체의 format에맞게 변환 후 반환합니다.

new Date('Oct 03, 2022 12:33'); // Mon Oct 03 2022 12:33:00 GMT+0900 (한국 표준시)

new Date(year, month[, date, hour, minute, second, millisecond])

아주 디테일하게 전달할 수도 있는데요, 인수의 순서에 맞게 잘 전달해주면 원하는 날짜를 구할 수도 있답니다 😉

여기서 주의할 것은, month의 경우 0부터 시작함에 유의하여 계산해줍시다.

// 10월 3일을 구할 때

// Bad
// Thu Nov 03 2022 12:34:50 GMT+0900 (한국 표준시) {}
new Date(2022, 10, 3, 12, 34, 50, 300)


// Good
// Mon Oct 03 2022 12:34:50 GMT+0900 (한국 표준시) {}
new Date(2022, 9, 03, 12, 34, 50, 300)

메서드

Date.now()

now 메서드는 Date 객체의 정적 메서드입니다.
따라서 생성자 함수의 인스턴스로 호출할 수 없음에 유의해야 해요.

이 메서드는, 1970년 1월 1일 0시 정각을 기준으로, 현재까지의 경과된 밀리초를 반환합니다.

Date.now(); // 1664768260606

Date.parse(dateString: string)

parse 메서드 역시 Date 객체의 정적 메서드입니다.
인수로 전달 받은 시간까지의 밀리초를 숫자로 반환해주어요.

Date.parse('Jan 1, 1970 00:00:01 UTC') // 1000

Date.UTC(year, month[, date, hour, minute, second, millisecond])

1970년 1월 1일 0시 정각(UTC)를 기점으로 인수로 받은 시간가의 차이를 밀리초로 반환해요!

Date.UTC(2022, 10, 3, 12, 50, 00); // 1667479800000

Date.prototype.getFullYear();

Date 객체가 갖고 있는 시간과 날짜의 연도를 나타내는 정수를 반환해요.

const date = new Date();
date.getFullYear(); // 2022

Date.prototype.setFullYear(year[, month, date]);

Date객체의 연도를 설정할 수 있어요.
이때, 월과 일 역시 지정해서 설정할 수 있습니다!

const date = new Date();
date.setFullYear(2021, 11, 31);
date.getFullYear(); // 2021

Date.prototype.getMonth();

그렇다면 이 친구는 달을 반환하겠죠?
이때, 주의할 것은 0~11의 정수값이 1~12월에 매칭된다는 것입니다! (-1한 값)

const date = new Date();
date.getMonth(); // 2022

Date.prototype.setMonth(month[, date]);

아까처럼, 이번에는 월과 일을 설정해줄 수 있어요!
마찬가지로, 월에는 -1한 값을 설정해주는 것 잊지 마세요 :)

const date = new Date();
date.setMonth(11, 31);
date.getMonth(); // 2022

Date.prototype.getDate();

해당 객체의 일에 해당하는 값을 가져올 수 있습니다!

new Date().getDate(); // 3

Date.prototype.setDate(date)

이번에는 일을 설정해줄 수 있어요!
이때, 만약 이 설정한 값이 최대 날짜를 초과한다면, 다음달로 넘어가게 됩니다.

const date = new Date();
date.setDate(31);
date.getDate(); // 9

date = new Date();
date.setDate(35);
date.getMonth(); // 10

Date.prototype.getDay()

이 친구는 특이하게 set 메서드가 없네요!
요일을 일요일~토요일을 순차적으로 0~6에 매칭한 결과 값을 반환합니다.

const date = new Date();
console.log(date.getDay()); // 1 (10월 3일 월요일)

정리

하나의 상위 옵션을 set하는 함수는 하위 옵션을 설정할 수 있다

여기서 우리는 Date 함수들의 특징을 알 수 있어요.
뭔가
[year, month, date, hour, minute, second, millisecond] 들이 하나의 계층을 이루고 있다면, 이를 제어하는 상위의 옵션은 하위 옵션을 set할 수 있습니다.

따라서, hour, minute, second, millisecond 역시 이와 똑같은 방식으로 set함수가 설정되며, get함수 역시 다음과 같이 제공합니다.

응용: hours

• Date.prototype.getHours()
• Date.prototype.setHours(hours[, minutes, seconds, milliseconds])

응용: minutes

• Date.prototype.getHours()
• Date.prototype.setHours(minute[, seconds, milliseconds])

응용: seconds

• Date.prototype.getHours()
• Date.prototype.setHours(seconds[, milliseconds])

응용: milliseconds

• Date.prototype.getHours()
• Date.prototype.setHours(milliseconds)

Date.prototype.getTimezoneOffset

UTC간의 차이를 구할 때 사용합니다.
세계시간을 구하는 유틸 함수를 만들 때 종종 사용해요!
이때 주의할 것은, 반환하는 단위가 분 단위입니다.
(아무래도, 보통 세계 시간대 차이를 분 단위까지 환산하기 때문인 것 같습니다.)

const today = new Date();

console.log(today.getTimezoneOffset() / 60); // -9, KST는 UTC 기준 9시간 빠릅니다.

Date.prototype.to[Date, Time, ISO, Locale, LocaleTime]String

이는 한 번에 비교하는 게 편해서, 묶어서 정리하려고 합니다.
시간을 표현할 수 있는 함수들은 크게 다음 5가지입니다.

• Date.prototype.toString()
• Date.prototype.toDateString()
• Date.prototype.toTimeString()
• Date.prototype.toISOString()
• Date.prototype.toLocaleString()
• Date.prototype.toLocaleTimeString()

이들은 다음과 같은 차이가 있습니다.

const date = new Date();

/* toString: "요일 월 일 년 시:분:초 표준시 (기준)"으로 반환*/
console.log(date.toString()); // Mon Oct 03 2022 14:19:07 GMT+0900 (한국 표준시)

/* toDateString: "요일 월 일 년"으로 반환*/
console.log(date.toDateString()); // Mon Oct 03 2022

/* toTimeString: "시:분:초 표준시 (기준)"으로 반환*/
console.log(date.toTimeString()); // 14:19:07 GMT+0900 (한국 표준시)

/* toISOString: ISO 8601 기준으로 "년-월-일T시-분-초.밀리초Z"로 반환 */
console.log(date.toISOString()); // 2022-10-03T05:19:07.407Z

/* locale에 따른 포맷으로 날짜와 시간을 전달합니다. */
console.log(date.toLocaleString('ko-KR')); // 한국: 2022. 10. 3. 오후 2:19:07
console.log(date.toLocaleString('en-US')); // 10/3/2022, 2:19:07 PM

/* locale에 따른 포맷으로 시간을 전달합니다. */
console.log(date.toLocaleTimeString('ko-KR')); // 오후 2:19:07
console.log(date.toLocaleTimeString('en-US')); // 2:19:07 PM

🎉 마치며

휴... 생각보다 쓸 게 많군요.
그래도 저도 많이 헷갈리던 메서드들인데, 차이를 이제 좀 분명히 안 것 같아요.
덕분에, 이번 파트를 하면서 구현해보고 싶은 게 2가지가 생겼어요.

• 세계 시간을 구하는 유틸 함수
• 캘린더 컴포넌트

그래서 아마 이 둘을 구하는 과정들도 따로 시도해보고, 결과를 글로 적을 생각입니다! 🥰
역시 프로그래밍은 자기가 원하는 걸 만들 수 있다는 게 참 매력인 것 같아요!

그럼, 다들 즐거운 코딩하시길 바라며. 이상! 😉