[TIL][JavaScript] Date 날짜

본 TIL( Today I Learned )은 그날그날의 공부한 내용들을
나중에 보더라도 쉽게 찾을 수 있도록 정리하고 있습니다.

잘못된 부분과 새로 배우는 내용이 있을 경우나
더욱 가독성이 좋아지도록 지속적으로 수정될 예정입니다.

1차 작성일자 : 2021.06.15
2차 수정일자 :

1. Date 객체의 생성

---

자바스크립트에서 날짜를 다루기 위해선
Date 객체를 생성해야 한다.

Date 객체를 생성하는 방법은 크게 네 가지가 있다.

1. 생성자에 인자를 주지 않고 생성

let date1 = new Date();
console.log(date1.toLocaleString());
//결과 Tue Jun 15 2021 07:55:57 GMT+0900 (대한민국 표준시)

new Date() 생성자에 인자를 주지 않고 생성하면
현재 시간을 가진 Date 객체가 생성된다.

2. 생성자 인자로 원하는 연, 월, 일, 시, 분, 초 입력하기

//let date1 = new Date(year, month, day, h, m, s, ms)  이렇게 설정 가능
let date1 = new Date( 2019, 11, 24 );
let date2 = new Date( 2019, 11, 24, 06, 30, 22);
console.log(date1);
//결과 Tue Dec 24 2019 00:00:00 GMT+0900 (대한민국 표준시)
console.log(date2);
//결과 Tue Dec 24 2019 06:30:22 GMT+0900 (대한민국 표준시)

인자로 연, 월, 일, 시, 분, 초를 주어
원하는 시간을 가진 Date 객체를 만들어 낼 수 있다.

그런데 뭔가 이상한 점이 보인다. 분명 11월을 입력했는데
결과는 12월인 Dec가 나타난다.
Date 객체에 월을 줄때는 1월(0) ~ 12월(11)이기 때문에
11을 월의 인자로 줄 경우, 12월로 설정되게 되니 주의해야 한다.

그리고 연과 월을 준 뒤 일을 건너뛰고 시간을 주려는 의도로
new Date( 2019, 11, 16 )처럼 인자를 준다면
16을 일로 인식하기 때문에 2019년 12월 16일이 되니 주의하자.

let date1 = new Date( 2019, 12-1, 24 );

만약, 2019년 12월 24일을 설정하고 싶다면
나중에 코드를 읽을때 가독성을 위해 위처럼 12-1로 해 두는 것이 좋다.

let date1 = new Date( 9, 12-1, 24 );
let date2 = new Date( 99, 12-1, 24 );
console.log(date1);
//결과 Fri Dec 24 1909 00:00:00 GMT+0830 (대한민국 표준시)
console.log(date2);
//결과 Fri Dec 24 1999 00:00:00 GMT+0900 (대한민국 표준시)

그리고 연도에 한자리를 입력하면 190X년
두자리를 입력하면 19XX년이 된다.

3. 생성자 인자로 날짜 포맷을 주기

//"연-월-일 시:분:초:ms"
let date1 = new Date("2019-10-05");
let date2 = new Date("2019-10-05 18:24:33");
console.log(date1);
//결과 Sat Oct 05 2019 09:00:00 GMT+0900 (대한민국 표준시)
console.log(date2);
//결과 Sat Oct 05 2019 18:24:33 GMT+0900 (대한민국 표준시)

생성자 인자로 지정된 날짜 포맷을 지킨 문자열을 줄 경우
훨씬 쉽게 원하는 날짜 정보를 가진 Date 객체를 만들 수 있다.

연, 월, 일, 시, 분, 초를 따로 줬을 때
월을 11로 주면 12월이 되는데, 이 방식으로 11월을 준다면
그대로 11월로 설정이 된다.

4. 생성자 인자로 밀리세컨드(ms)를 주기

let date1 = new Date(1623000000000);
console.log(date1);	
//결과 Mon Jun 07 2021 02:20:00 GMT+0900 (대한민국 표준시)

ms단위로 날짜 객체를 만들 수 있는데
이렇게 만들 필요성이 있나 싶을 수 있다.

자바나 자바스크립트 등의 여러 언어들에서는 날짜 객체의 시간값을
1970년 01년 01일 0시 0분 0초 0000ms 부터 카운트한 ms값으로
반환해 줄 수 있다.
(자바스크립트에선 Date.now()로 현재 시간의 ms를,
Date객체명.getTime( )으로 Date 객체가 가진 시간의 ms를 반환 가능)

이러한 ms값을 저장해두었다가
특정 날짜 객체를 만들 때 사용하는 것이 가능하다.

2. 날짜 정보 가져오기

Date 객체에서 원하는 날짜 정보만 가져올 수 있는데
보통 getXXX( ) 메서드들이 사용된다.

getXXX( ) 메서드들의 뒤에 UTC를 붙이면 UTC 날짜 정보를
얻을 수 있다.

1) 그리니치 평균시

let date1 = new Date();
console.log( date1 );
//출력
Tue Jun 15 2021 08:29:55 GMT+0900 (대한민국 표준시)

아무런 메서드의 사용 없이 날짜 객체를 바로 출력하면
위와 같이 그리니치 평균시(GMT)로 날짜 정보를 가져올 수 있다.

2) 날짜 정보를 밀리초(ms)로 - getTime()

let date1 = new Date();
console.log( date1.getTime() );
// 출력 1623713465183

getTime( ) 메서드로 1970년 01년 01일 0시 0분 0초 0000ms 부터
날짜 객체에 저장된 시간 사이의 ms를 반환해준다.

3) 날짜 정보를 밀리초(ms)로 - Date.now()

console.log( Date.now() );
// 출력 1623713618544

getTime( ) 메서드처럼 ms를 반환하는데
1970년 01년 01일 0시 0분 0초 0000ms부터
현재 시간 사이의 ms를 반환해준다.

4) 연도(year) - getYear(), getFullYear()

let date1 = new Date();
console.log( date1.getYear() );
// 출력 121
console.log( date1.getFullYear() );
// 출력 2021

getYear( )메서드와 getFullYear( ) 메서드는 연도를 반환해준다.

getYear( )의 경우 연도-1900을 한 값이 저장되어 있어
2021-1900인 121이 출력되는 것이고
getFullYear( )의 경우 연도가 그대로 출력되어 2021이 출력된다.

4) 월(month) - getMonth()

let date1 = new Date();
console.log( date1.getMonth() );
// 출력 5

getMonth( ) 메서드는 월을 반환해준다.

그런데 지금 글을 작성하는 날짜가 6월인데 5를 반환한다.
왜냐하면 1월은 0, 12월은 11로
실제 월보다 -1의 값을 저장하고 있기 때문이다.

월을 다룰때는 항상 조심하도록 하자.

5) 일(date) - getDate()

let date1 = new Date();
console.log( date1.getDate() );
// 출력 15

getDate( ) 메서드는 일을 반환해준다.

글을 작성하는 날짜가 15일인데, 그대로 반환해준다.

6) 시(hour) - getHours()

let date1 = new Date();
console.log( date1.getHours() );
// 출력 8

getHours( ) 메서드는 시간을 반환해준다.

글을 작성하는 현재 시간이 08시인데, 그대로 반환해준다.

7) 분(minute) - getMinutes()

let date1 = new Date();
console.log( date1.getMinutes() );
// 출력 42

getMinutes( ) 메서드는 분을 반환해준다.

글을 작성하는 현재 분이 42분인데, 그대로 반환해준다.

8) 초(second) - getSeconds()

let date1 = new Date();
console.log( date1.getSeconds() );
// 출력 17

getMinutes( ) 메서드는 초를 반환해준다.

글을 작성하는 현재 초가 17초인데, 그대로 반환해준다.

9) 밀리초(ms) - getMilliSeconds()

let date1 = new Date();
console.log( date1.getMilliseconds() );
// 출력 536

getMilliSeconds( ) 메서드는 밀리초를 반환해준다.

글을 작성하는 현재 밀리초가... 얼마인지 볼수는 없는데
그대로 반환해준다.

10) 요일(day) - getDay()

let date1 = new Date();
console.log( date1.getDay() );
// 출력 2

getDay( ) 메서드는 요일을 반환해준다.

요일을 정수로 반환해주는데 일요일(0) ~ 토요일(6) 이다.

3. 날짜 정보 변경하기

위의 2번에서 했던 날짜 정보 가져오기에서
getXXX 메서드들을 사용했다면
날짜 정보 변경을 위해서는 setXXX 메서드들을 사용해야 한다.

사용법은 매우 간단해서 대표적인 것들만 알아보겠다.

1) 연도(year) - setFullYear()

let date1 = new Date();
date1.setFullYear(2016);
console.log(date1);
//결과
Wed Jun 15 2016 13:47:52 GMT+0900 (대한민국 표준시)

Date 객체의 연도를 설정, 변경할 수 있다.

2) 월(month) - setMonth()

let date1 = new Date();
date1.setMonth(3-1);
console.log(date1);
//결과
Mon Mar 15 2021 13:50:03 GMT+0900 (대한민국 표준시)

Date 객체의 월을 설정, 변경할 수 있다.

다시 한 번 주의해야 하는 점으로
0이 1월이라는 것을 잊지말자.

3) 일(date) - setDate()

let date1 = new Date();
date1.setDate(1);
console.log(date1);
//결과
Tue Jun 01 2021 13:52:06 GMT+0900 (대한민국 표준시)

Date 객체의 일을 설정, 변경할 수 있다.

4) 시(hour) - setHours()

let date1 = new Date();
date1.setHours(19);
console.log(date1);
//결과
Tue Jun 15 2021 19:53:25 GMT+0900 (대한민국 표준시)

Date 객체의 시간을 설정, 변경할 수 있다.

5) 분(minute) - setMinutes()

let date1 = new Date();
date1.setMinutes(33);
console.log(date1);
//결과
Tue Jun 15 2021 13:33:32 GMT+0900 (대한민국 표준시)

Date 객체의 분을 설정, 변경할 수 있다.

6) 초(hour) - setSeconds()

let date1 = new Date();
date1.setSeconds(10);
console.log(date1);
//결과
Tue Jun 15 2021 19:53:25 GMT+0900 (대한민국 표준시)

Date 객체의 초를 설정, 변경할 수 있다.

7) 밀리초로 시간 설정하기 - setTime()

let date1 = new Date();
date1.setTime(1000000000000);
console.log(date1);
//결과
Sun Sep 09 2001 10:46:40 GMT+0900 (대한민국 표준시)

Date 객체의 날짜 정보를 밀리초로 설정, 변경할 수 있다.

new Date( ) 생성자의 인자로 밀리초를 주었을 때 처럼
1970년 1월 1일 0시 0분 0초 000밀리초에서
인자로 온 ms가 더해진 날짜 정보가 저장된다.

4. 메서드의 활용

1) 달의 마지막 날짜가 몇일인지

let date1 = new Date(2021, 6, 0);
colsole.log(date1.getDate());	//결과 30
//21년 6월의 마지막 날은 30일이다.

new Date 생성자의 인자값 중 일을 0으로 줄 경우
전달의 마지막 날짜가 된다.

만약 6월의 마지막 날짜가 몇일인지 확인하고 싶다면
위처럼 연, 월로 2021, 6(6을 줘서 7월이 됨)을 주고
일을 0으로 준 뒤 getDate()로 날짜를 반환받으면
6월의 마지막 날짜가 몇일인지 알 수 있다.

2) 달의 1일이 무슨 요일인지

let date1 = new Date(2021,6-1,1);
let days = "일월화수목금토";
console.log(days[date1.getDay()]); //결과 화

우선 원하는 연도와 월, 일의 Date 객체를 만들고
getDay( ) 메서드를 활용해 요일값 정수를 가져온다.

getDay( )는 요일을 일(0), 월(1), 화(2)... 금(6) 으로
반환해주기 때문에 문자열이나 배열에 일월화수목금토 를
차례대로 넣어두고 getDay( )의 반환값을 인덱스로 하여
요일을 출력해 줄 수 있다.

• 문자열도 배열과 같이 [ ]로 특정 위치의 값(문자)를
  가져올 수 있다.