1. 개요
날짜를 다루는데 사용되는 자바스크립트 객체인 Date 객체의 기능과 여러가지 내장함수를 알아본다. 또한 Date객체를 활용하여 일정 시간 이전의 날짜를 계산하는 방법을 알아본다. 일정 시간 이전의 날짜를 계산할 때 2월의 경우 윤날이 포함되어 있는 해는 한달이 28일 일수도 있고 29일 일수도 있다. 이런 경우 때문에 날짜의 계산이 까다로워지는데 이를 처리하는 방법 또한 알아본다.
2. Date 객체란?
특정 시점에 대한 시간과 날짜에 관한 정보를 알아낼 수 있는 객체이다. 날짜에 관한 정보를 저장하고 관련된 메서드도 제공해준다. Date 객체를 활용하면 생성 및 수정 시간을 저장하거나 시간을 측정할 수 있고, 현재 날짜를 출력하는 용도 등으로도 활용할 수 있다.
2-1. 객체 생성
new Date()를 호출하면 새로운 Date 객체가 만들어지고 해당 객체를 변수에 저장할 수 있다. 객체의 인자로 숫자만 넣을 수 있으며 객체의 인자에 아무것도 넣지 않으면 기본적으로 객체가 생성되는 시점의 시간이 설정된다.
let now = new Date();
console.log(now); // 현재 날짜 및 시간이 출력됨2-1-1. 인자를 넣어 생성할 경우
객체에는 순서대로 년, 월, 일, 시, 분, 초, 밀리세컨드를 인자로 넣어 생성할 수 있다.
new Date(year, month, date, hours, minutes, seconds, ms)
let d = new Date(2022, 3, 29, 0, 34, 20, 0); //2022년 4월 29일 0시 34분 20초 0ms월은 1월이 0부터 시작한다. 따라서 위 코드에서 3은 4월로 출력되었다.
2-1-2. 인자를 하나만 넣어 생성할 경우
new Date(milliseconds)
위와 같이 인자를 하나만 넣어 생성할 경우 UTC 기준(UTC+0) 1970년 1월 1일 0시 0분 0초에서 milliseconds 밀리초(1/1000 초) 후의 시점이 저장된 Date 객체가 반환된다.
console.log(new Date(0)); //Thu Jan 01 1970 09:00:00 GMT+0900
console.log(new Date(566634956675)); //Wed Dec 16 1987 15:35:56 GMT+09003. Date 객체의 다양한 메서드
3-1. 날짜 구성요소 얻기
3-1-1. getFullYear()
년도를 반환한다.
let now = new Date();
const year = now.getFullYear();
console.log(year)
// 출력
// 2022※ 주의 ※
여러 자바스크립트 엔진이 더는 사용되지 않는 비표준 메서드 getYear()을 구현하고 있다. 이 메서드는 두 자릿수 연도를 반환하는 경우가 있기 때문에 절대 사용해선 안 된다. 연도 정보를 얻고 싶다면 getFullYear()를 사용하자!
3-1-2. getMonth()
월을 반환한다.
let now = new Date();
let month = now.getMonth();
console.log(month)
// 출력
// 103-1-3. getDate()
일을 반환한다.
let now = new Date();
let date = now.getDate();
console.log(date)
// 출력
// 213-1-4. getDay()
일요일을 나타내는 0부터 토요일을 나타내는 6까지 숫자 중 하나를 반환한다.
let now = new Date();
const dayName = now.getDay();
console.log(dayName)
// 출력
// 63-1-5. getHours(), getMinutes(), getSeconds(), getMilliseconds()
각각 시, 분, 초, 밀리초를 반환한다.
let now = new Date();
const hours = now.getHours();
console.log(hours)
const minutes = now.getMinutes();
console.log(minutes)
const seconds = now.getSeconds();
console.log(seconds)
const milliSeconds = now.getMilliseconds();
console.log(milliSeconds)
// 출력
// 20
// 46
// 33
// 3953-1-6. getTime()
주어진 일시와 1970년 1월 1일 00시 00분 00초 사이의 간격(밀리초 단위)인 타임스탬프를 반환한다.
let now = new Date();
console.log(now.getTime()); //16676313602973-2. set 함수
위에서 설명한 get 함수를 각각 get만 set으로 치환하면 날짜를 설정할 수 있는 함수를 쓸 수 있다.
let now = new Date();
now.setFullYear(2021);
console.log(now.getFullYear());
// 출력
// 20214. 일정 기간 이전 또는 이후의 날짜 구하기
처음에 언급한 것처럼 일정기간 이전 또는 이후의 날짜를 구하는 것은 윤날의 존재 때문에 어려움이 있다. 오늘이 3월3일이라고 가정하고 그 해 2월의 일수가 29일인 경우 다음과 같이 일주일 전의 날짜를 구하려고 하면 오차가 생긴다.
let before7days = new Date(year, now.getMonth(), now.getDate() - 7);윤날인 2월 29일이 있으므로 3월 3일의 일주일 전은 2월 25일이 나와야 하지만 자바스크립트에서는 2월의 말일이 28일로 설정되어 있기 때문에 2월 24일을 반환하는 오류가 발생한다. 이를 보완하기 위해 milliseconds를 이용하여 올바르게 날짜를 구할 수 있는 방법이 있다.
4-1. 일정 기간 이전 또는 이후의 날짜를 구하는 함수 만들기
getTime()으로 현재 날짜와 "1970년 1월 1일 0시 0분 0초"의 시간 간격(밀리초 단위)을 구해서 여기에 원하는 시간 간격(밀리초 단위)만큼 더하거나 빼준다. 그렇게 구한 값을 인자값으로 전달해 새로운 Date 객체를 만들어 원하는 날짜를 구한다.
function getIntervalDate(day) {
let now = new Date();
let dayMilliseconds = 60 * 60 * 24 * 1000; //하루를 밀리초로 나타냈을 때
let currentMilliseconds = now.getTime(); // "1970년 1월 1일 0시 0분 0초"와 현재 날짜의 시간 차이를 밀리초 단위로 구함
let intervalDate = currentMilliseconds + day * dayMilliseconds; //원하는 일수만큼 dayMilliseconds에 곱하고 그것을 위에서 구한 currentMilliseconds에 더해줌
return new Date(intervalDate); //위에서 구한 intervalDate를 인자로 넣어 원하는 날짜값을 가진 Date 객체를 생성할 수 있다
}4-2. 날짜를 원하는 형태로 반환하는 함수
위에서 만든 함수를 변형하여 날짜 형식을 format 인수로 받아서 원하는 날짜를 해당 형식으로 반환하는 함수를 만들어 본다. 예를 들어 getIntervalDateFormat(7, "YYYY-MM-DD")이라고 하면 7일 후의 날짜를 "YYYY-MM-DD" 형식으로 반환한다.
function getIntervalDateFormat(day, format) {
let now = new Date();
let dayMilliseconds = 60 * 60 * 24 * 1000;
let currentMilliseconds = now.getTime();
let intervalDate = currentMilliseconds + day * dayMilliseconds;
let d = new Date(intervalDate);
let year = d.getFullYear();
let month = (d.getMonth() + 1).toString().padStart(2, 0);
let day = d.getDate().toString().padStart(2, 0);
return format
.replace("YYYY", year)
.replace("MM", month)
.replace("DD", day);
}원하는 날짜를 가진 Date객체를 d변수에 넣어주는 부분까지는 구조가 4-1의 함수와 같다. 다만 return값이 원하는 형식을 가진 문자열이어야 한다. 날짜 구성요소를 얻어오는 함수를 써서 year, month, day를 구한다. 그것을 string형태로 변환하고 padStart()로 두자리 숫자로 만든다(padStart()는 원하는 자리수만큼 숫자를 원하는 수로 채우는 함수이다). 그것을 replace()함수를 써서 format의 문자열을 바꿔준다. 이것을 return으로 반환하면 원하는 형식으로 된 날짜를 구할 수 있다.
결론
Date 객체는 크게 어려운 내용은 없지만 날짜를 다루는 객체라는 특성상 실무에서 굉장히 자주 쓰이는 객체이다. 따라서 관련 메서드를 잘 알아둘 필요가 있다. 특히 윤날의 존재 때문에 날짜 계산이 까다롭다는 문제가 있었다. 이것을 목차 4에서 설명한 방법으로 해결할 수도 있고 다른 방법이 있다면 또 알아보는 것도 좋은 공부가 될 것이라 생각한다.
