웹 페이지에서 날짜에 대한 정보를 가져와야할 때가 있다.
현재 시각이나 특정 날짜에 대한 정보 등등
날짜 / 시간 정보가 필요할땐 Date 객체를 이용하면 된다.
그 사용법에 대해 알아보자.
Date 객체 생성 방법
const dateNow = new Date(); // 현재 날짜, 시각
const date1 = new Date("2022"); // 연도
const date2 = new Date("2022-05-01"); // 연도, 월, 일
const date3 = new Date("2022-05-01T12:00:00"); // 연도, 월, 일, 12시00분00초
const date4 = new Date("2022-05-01T12:00:00Z"); // UTC 국제 표준시
위의 예시와 같이, 변수에 new 예약어를 통해 Date 객체를 생성하면된다.
생성자에 매개변수를 입력하지 않을 경우 현재 시각으로 객체가 생성되고,
특정 날짜에 대한 Date 객체를 생성하려면 위의 예시에서와 같이 매개변수를 입력해주면 된다.
위 변수들을 그대로 출력할 경우 다음과 같은 결과를 얻을 수 있다.
생성자에
연도까지만 넘겨주었을 땐, 나머지 값이 1월 1일 09:00:00 (한국 표준시)로 설정되고,
월, 일까지 넘겨주었을 땐, 시각이 09:00:00 (한국 표준시)로,
시각 뒤에 "12:00:00Z" 를 붙여주니 국제 표준시로 바뀌어 한국 시간 기준 21:00:00로 설정된 것을 볼 수 있다.
Date 객체의 메서드
Date객체에 내장된 메서드를 이용하여 필요한 여러 값들을 추출하고, 설정할 수 있다.
| 날짜, 시간 정보를 가져와주는 get 메소드 | |
| 구분 | 설명 |
| getFullYear() | 연도를 4자리 숫자로 표시한다. |
| getMonth() | 월을 표시한다. (0~11 까지의 숫자) |
| getDate() | 일을 표시한다. (1~31 까지의 숫자) |
| getDay() | 요일을 표시한다. (0 = 일요일, 6 = 토요일) |
| getTime() | 1970년 1월 1일 자정부터 흐른 시각을 밀리초로 표시한다. |
| getHours() | 시간을 표시한다. (0~23 까지의 숫자) |
| getMinutes() | 분을 표시한다. (0~59 까지의 숫자) |
| getSeconds() | 초를 표시한다. (0~59 까지의 숫자) |
| getMilliseconds() | 밀리초를 표시한다. (0~999 까지의 숫자) |
| 날짜, 시간을 설정해주는 set 메소드 | |
| 구분 | 설명 |
| setFullYear() | 연도를 4자리 숫자로 설정한다. |
| setMonth() | 월을 설정한다. (0~11 까지의 숫자) |
| setDate() | 일을 설정한다. (1~31 까지의 숫자) |
| setTime() | 1970년 1월 1일 자정부터 흐른 시각을 밀리초로 설정한다. |
| setHours() | 시간을 설정한다. (0~23 까지의 숫자) |
| setMinutes() | 분을 설정한다. (0~59 까지의 숫자) |
| setSeconds() | 초를 설정한다. (0~59 까지의 숫자) |
| setMilliseconds() | 밀리초를 설정한다. (0~999 까지의 숫자) |
여기서 조심해야 할 점이 Month 값을 가져오거나 설정할 때 0 ~ 11까지의 값이 필요하다는 것이다.
예시를 보자.
console.log(`${date4.getFullYear()}년 ${date4.getMonth()}월 ${date4.getDate()}일`);
date4.setFullYear(2021);
date4.setMonth(12);
date4.setDate(25);
console.log(`${date4.getFullYear()}년 ${date4.getMonth()}월 ${date4.getDate()}일`);
콘솔에 값이 어떻게 나올까?
우리가 기대하는 값은
2022년 5월 1일
2022년 12월 25일 일 것이다.
하지만 결과는 우리의 예상과는 다르다.
get과 set메소드를 사용하여 '월'에 해당하는 값을 설정할 때, 0~11까지의 값이 필요하기때문에 이에 맞게 1을 더하거나 빼주어야 한다.
console.log(`${date4.getFullYear()}년 ${date4.getMonth() + 1}월 ${date4.getDate()}일`);
date4.setFullYear(2021);
date4.setMonth((12 - 1));
date4.setDate(25);
console.log(`${date4.getFullYear()}년 ${date4.getMonth() + 1}월 ${date4.getDate()}일`);
잘못된 부분에 대한 지적이나 개선점 등은 댓글로 남겨주시면 감사하겠습니다.
