`Date` 객체
이 글에서는 Date 객체에 대해 설명합니다.
기본 동작 원리부터 실제 업무에서 자주 사용하는 조작까지, 구체적인 예시와 함께 Date 객체를 단계별로 설명하겠습니다.
YouTube Video
Date 객체
Date 객체란 무엇인가요?
자바스크립트의 Date 객체는 날짜와 시간을 다루기 위한 표준 객체입니다. 내부적으로는 1970년 1월 1일 00:00:00 UTC 이후 경과된 밀리초를 기준으로 날짜와 시간을 관리합니다.
먼저, 현재 날짜와 시간을 나타내는 Date 객체를 생성하고 그 내용을 확인해 봅시다.
1const now = new Date();
2console.log(now);- 이 코드는 실행 시점의 현재 날짜와 시간을 나타내는
Date객체를 생성합니다. 표시 형식은 브라우저나 운영체제 등 실행 환경에 따라 다를 수 있습니다.
Date 객체를 생성하는 방법
Date 객체는 필요에 따라 다양한 방법으로 생성할 수 있습니다. 특히 실수하기 쉬운 중요한 점 중 하나는 생성자의 month 인수가 0부터 시작한다는 것입니다. 즉, 월은 0부터 시작합니다.
1const d1 = new Date(); // Current date and time
2const d2 = new Date("2025-01-01"); // Create from an ISO date string
3const d3 = new Date(2025, 0, 1); // January 1, 2025 (month is zero-based)
4const d4 = new Date(2025, 0, 1, 10, 30); // January 1, 2025, 10:30
5
6console.log(d1, d2, d3, d4);new Date(year, month, day)에서month는0이 1월,11이 12월을 의미합니다. 이 규칙을 이해하지 못하면 원하지 않게 한 달이 어긋난 날짜를 생성할 수 있으니 항상 주의해야 합니다.
날짜와 시간의 각 요소 추출하기
Date 객체에서 연도, 월, 일, 시간, 요일을 각각 가져올 수 있습니다. 모든 getter 메서드는 숫자 값을 반환합니다.
1const date = new Date();
2
3console.log(date.getFullYear()); // Year
4console.log(date.getMonth()); // Month (0-based: 0 = January)
5console.log(date.getDate()); // Day of the month
6console.log(date.getHours()); // Hours
7console.log(date.getMinutes()); // Minutes
8console.log(date.getSeconds()); // Seconds
9console.log(date.getDay()); // Day of the week (0 = Sunday, 6 = Saturday)
- 생성할 때와 마찬가지로,
getMonth()도 0부터 시작함에 주의하세요. 표시용으로 사용할 때는 1을 더해 조정하는 것이 일반적입니다. getDay()는 요일을 숫자로 반환합니다. 0은 일요일을, 6은 토요일을 나타냅니다.
날짜와 시간 수정하기
Date 객체는 변경 가능한 객체이므로 생성 후에도 값을 변경할 수 있습니다. 이 특성은 유용하지만, 의도하지 않은 부작용에 주의해야 합니다.
기존의 Date 객체의 값을 변경하려면 set 메서드를 사용할 수 있습니다.
1const date = new Date("2025-01-01");
2
3date.setFullYear(2026);
4date.setMonth(5); // June
5date.setDate(15);
6
7console.log(date);setMonth()역시 0부터 시작합니다. 원래의 객체가 직접 수정됩니다.
날짜 더하고 빼기
밀리초를 사용하거나 setDate()를 통해 날짜 계산을 수행하는 것이 일반적입니다. 일 단위 계산에는 setDate()를 사용하는 것이 특히 직관적이고 안전합니다.
1const date = new Date("2025-01-01");
2
3date.setDate(date.getDate() + 7);
4console.log(date);- 이 예제에서는 지정한 날짜로부터 7일 후의 날짜를 계산합니다. 더한 결과가 새로운 달로 넘어가더라도 자동으로 조정됩니다.
Date 객체 비교하기
Date 객체는 숫자처럼 비교할 수 있습니다. 이는 내부의 밀리초 값이 비교되기 때문입니다.
1const a = new Date("2025-01-01");
2const b = new Date("2025-01-10");
3
4console.log(a < b); // true
5console.log(a > b); // false
- 날짜의 순서를 판단하고자 할 때 별도의 변환이 필요하지 않습니다. 비교 연산자를 직접 사용할 수 있습니다.
타임스탬프(밀리초)로 다루기
Date는 밀리초(타임스탬프)를 나타내는 숫자와 상호 변환할 수 있습니다. 이 형식은 API나 데이터베이스 연동에서 자주 사용됩니다.
1const now = Date.now();
2console.log(now);
3
4const date = new Date(now);
5console.log(date);Date.now()는 현재 시각을 밀리초로 반환합니다. 값을 숫자로 저장하거나 비교하고 싶을 때 매우 유용합니다.
날짜를 문자열로 변환하기
Date를 그대로 표시하면 원하는 형식이 아닐 수 있습니다. 따라서 원하는 요구사항에 맞게 명시적으로 포맷해야 합니다.
1const date = new Date("2025-01-01");
2
3const formatted = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
4console.log(formatted);- 이처럼 직접 포맷하면 표시 형식을 자유롭게 제어할 수 있습니다. 실제 업무에서는 이 목적을 위해 라이브러리를 사용하는 경우가 많습니다.
UTC와 로컬 시간의 차이
Date는 로컬 시간과 UTC 모두를 다루는 메서드를 제공합니다. 서버 연동이나 국제화 대응을 위해 이 차이를 올바르게 이해하는 것이 중요합니다.
1const date = new Date();
2
3console.log(date.getHours()); // Local time (hours)
4console.log(date.getUTCHours()); // UTC time (hours)
getUTC*메서드는 항상 UTC를 기준으로 값을 반환합니다. 시간대가 다른 데이터를 처리할 때 특히 주의하세요.
Date 객체 사용 시 주의사항
Date는 편리하지만 까다로운 부분도 있습니다. 특히 월이 0부터 시작하는 것과 객체의 변경 가능성이 버그의 흔한 원인입니다.
Date 객체가 변경 가능한(mutable) 객체임을 확인할 수 있는 구체적인 예시를 아래에서 살펴봅시다.
1const original = new Date("2025-01-01");
2const copy = new Date(original);
3
4copy.setDate(10);
5
6console.log(original);
7console.log(copy);- 원래의 날짜와 시간을 보존하려면 항상 복사본을 만들어 사용하세요. 이 점만 인지하고 있어도 원치 않는 버그를 예방할 수 있습니다.
Date 객체를 다루기 어려운 이유와 라이브러리 사용 기준
Date 객체는 표준 기능으로 충분한 기능을 제공하지만, 실제로 사용하기 어려운 상황이 존재합니다. 대표적인 문제로는 월과 요일이 0부터 시작한다는 점, 로컬 시간과 UTC를 혼동하기 쉽다는 점, 그리고 객체가 변경 가능하다는 점이 있습니다. 이러한 문제들로 인해 날짜 처리가 많아질수록 더 많은 버그가 발생할 수 있습니다.
간단한 날짜 조회와 비교에는 Date 객체로 충분하지만, 날짜 연산이나 출력 포맷이 많아질수록 코드의 가독성과 유지보수성이 떨어지는 경향이 있습니다.
다음과 같은 요구사항이 있다면, dayjs나 date-fns와 같은 경량 날짜 라이브러리 사용을 고려해 볼 수 있습니다.
- 시간대를 명시적으로 다루어야 할 필요가 있습니다.
- 날짜나 기간 계산을 자주 해야 하는 경우가 있습니다.
- 출력 포맷을 유연하게 변경하고 싶은 경우가 있습니다.
- 날짜와 시간을 불변(immutable)하게 다루고 싶은 경우가 있습니다.
요약
Date 객체는 자바스크립트에서 날짜와 시간을 다루는 가장 기본적인 도구입니다. 특성을 정확히 이해하고, 올바르게 생성/조회/계산/포맷하면 실제 업무에서도 안전하게 사용할 수 있습니다.
기본기를 익힌 후에는 필요에 따라 날짜 라이브러리를 사용하는 것이 실용적인 선택입니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.