프로그래밍 세계에서 시간은 피할 수 없는 존재입니다. 우리가 시계와 손목시계로 하루를 관리하듯, 프로그램 역시 시간을 추적하는 도구를 사용해 어떤 작업이 언제 실행되어야 하는지 판단합니다.
실제로 많은 애플리케이션이 시간 정보를 필요로 합니다. 블로그 애플리케이션은 게시글이 작성된 시각을 기억해야 하고, 캘린더 애플리케이션은 예약된 일정을 화면에 표시해야 하죠.
이 가이드에서는 JavaScript에서 날짜와 시간을 다루는 방법을 예제 코드와 함께 차근차근 살펴봅니다.
JavaScript Date 객체란?
JavaScript에서 시간을 다루려면 Date 객체를 사용합니다. Date 객체는 날짜와 시간을 저장하는 특수한 객체로, 특정 정보를 손쉽게 꺼낼 수 있는 다양한 메서드도 함께 제공합니다.
Date 객체의 기본 형태는 다음과 같습니다:
new Date();위 코드에서 Date가 대문자로 표기된 점에 주목하세요. Date는 JavaScript에 내장된 객체이므로, 사용할 때 반드시 첫 글자를 대문자로 작성해야 합니다.
Date 객체 사용법
아무 값도 전달하지 않으면 Date 객체는 현재 날짜와 시간을 반환합니다. 이 값은 운영체제 설정과 사용자의 시간대(timezone)를 기준으로 계산됩니다.
다음과 같이 현재 날짜를 가져올 수 있습니다:
const currentDate = new Date();
console.log(currentDate);이 코드는 다음과 같은 값을 담은 Date 객체를 반환합니다:
Wed Jun 24 2020 10:49:46 GMT+0100 (British Summer Time)타임스탬프를 보면 알 수 있듯, 이 글은 2020년 6월 24일 영국에서 작성되었습니다. Date 객체의 장점은 사람이 읽기 쉬운 형태로 날짜 데이터를 반환해준다는 점입니다.
getTime()으로 타임스탬프 가져오기
위 결과는 사람이 읽기에는 좋지만, 한 가지 문제가 있습니다. JavaScript는 내부적으로 날짜를 유닉스 타임스탬프(Unix timestamp) 방식으로 해석합니다. 유닉스 타임스탬프는 1970년 1월 1일, 즉 유닉스 시간의 시작점 이후 경과된 시간을 숫자로 나타낸 값입니다.
현재 시간을 타임스탬프 형태로 가져오려면 getTime() 메서드를 사용합니다:
const currentDate = new Date();
console.log(currentDate.getTime());이 코드는 1592992393313과 같은 숫자를 반환하며, 이는 JavaScript가 해석할 수 있는 밀리초 단위의 값입니다.
Date 객체 생성하기
Date 객체의 기본값은 현재 날짜와 시간이지만, 특정 타임스탬프나 원하는 날짜·시간을 지정해 새 객체를 만들 수도 있습니다.
Date 객체를 생성하는 방식은 크게 세 가지입니다:
new Date(timestamp)— 타임스탬프 값으로 생성new Date(string)— 날짜 문자열로 생성new Date(year, month, day, hours, minutes, seconds, milliseconds)— 날짜 구성 요소로 생성
예를 들어 2021년 1월 1일 정오의 날짜 객체를 만들고 싶다면 다음 코드를 사용할 수 있습니다:
const nextYear = new Date("January 1 2021 12:00");
console.log(nextYear);실행 결과는 다음과 같습니다:
Fri Jan 01 2021 12:00:00 GMT+0000 (Greenwich Mean Time)같은 날짜 객체는 아래 코드로도 만들 수 있습니다:
// 타임스탬프로 생성
const nextYear2 = new Date(1609502400000);
console.log(nextYear2);
// 날짜 구성 요소로 생성 (월은 0부터 시작하므로 1월은 0)
const nextYear3 = new Date(2021, 0, 1, 12, 0, 0, 0);
console.log(nextYear3);세 가지 방법 모두 동일한 Date 객체를 만들어냅니다. 다만 주의할 점이 있습니다. 월(month) 값은 0부터 시작하기 때문에 1월은 0, 12월은 11로 지정해야 한다는 것입니다.
날짜 정보 가져오기 (get 메서드)
Date 객체에는 날짜 관련 정보에 접근할 수 있는 내장 메서드가 마련되어 있습니다. 정보를 가져오는 메서드는 모두 get으로 시작하며, 주요 메서드는 다음과 같습니다:
- 연도:
getFullYear() - 월:
getMonth()(0~11, 0은 1월) - 일:
getDate()(1~31) - 요일:
getDay()(0~6, 0은 일요일) - 시:
getHours()(0~23, 자정은 0) - 분:
getMinutes() - 초:
getSeconds() - 밀리초:
getMilliseconds() - 타임스탬프:
getTime()
지금이 몇 시인지 알아보고 싶다면 다음 코드를 사용하면 됩니다:
const currentDate = new Date();
console.log(currentDate.getHours());이 코드는 11을 반환합니다. 즉, 하루 중 11시가 지났다는 의미입니다.
이런 메서드들은 날짜 데이터에서 원하는 정보만 골라 추출할 수 있게 해줍니다. 문자열을 직접 가공할 필요 없이 get 메서드만으로 현재 시간 정보를 손쉽게 확인할 수 있습니다.
UTC 기준으로 시간 다루기
메서드 이름에 UTC를 넣으면 협정 세계시(UTC) 기준으로 값을 가져올 수 있습니다. 예를 들어 getUTCHours(), getUTCFullYear()처럼 사용합니다. Date 객체는 기본적으로 사용자의 현지 시간대 기준으로 정보를 반환하지만, 여러 시간대의 사용자를 서비스한다면 UTC 기준으로 시간을 기록하고 관리하는 것이 좋습니다.
날짜 객체 수정하기 (set 메서드)
Date 객체는 set 메서드로 값을 변경할 수 있습니다. 대표적인 set 메서드는 다음과 같습니다:
- 연도:
setFullYear() - 월:
setMonth() - 일:
setDate() - 시:
setHours() - 분:
setMinutes() - 초:
setSeconds() - 밀리초:
setMilliseconds() - 타임스탬프:
setTime()
참고로 요일(day of week)은 별도의 set 메서드가 없으며, 연·월·일 값을 변경하면 자동으로 계산됩니다.
예를 들어 작년 같은 날짜가 무슨 요일이었는지 알고 싶다면, setFullYear()로 연도를 변경한 뒤 getDay()로 요일을 조회하면 됩니다:
const currentDate = new Date();
currentDate.setFullYear(2019);
// getDay()는 0(일요일)~6(토요일)을 반환하므로 배열 순서에 유의
const daysOfTheWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const dayLastYear = currentDate.getDay();
console.log('작년 이날의 요일은 ' + daysOfTheWeek[dayLastYear]);실행 결과 예시: 작년 이날의 요일은 Tuesday
코드의 흐름을 살펴보겠습니다. 먼저 new Date()로 현재 날짜를 가져오고, setFullYear()로 연도를 2019년으로 변경합니다. 그다음 getDay()가 반환하는 숫자(0~6)를 실제 요일 이름으로 바꿔주기 위해 daysOfTheWeek 배열을 선언합니다. 마지막으로 해당 숫자에 맞는 요일을 배열에서 꺼내 출력합니다.
여기서 한 가지 주의할 점이 있습니다. getDay()는 0을 일요일로 반환하기 때문에, 배열도 반드시 일요일부터 시작해야 올바른 요일이 매칭됩니다.
마치며
Date 객체를 활용하면 JavaScript에서 날짜와 시간을 자유롭게 다룰 수 있습니다. 현재 시간 정보를 확인하는 get 계열 메서드와 날짜를 조작하는 set 계열 메서드를 익혔다면, 이제 전문가처럼 날짜와 시간을 처리할 준비가 된 것입니다.