JavaScript에서 타임스탬프를 다루는 방법은 Date() 객체를 사용하는 것입니다. 이 객체는 현재 시간을 사람이 읽기 쉬운 형식으로 저장합니다. 또한 서로 다른 시점의 Date() 객체를 새로 만들 수 있고, getTime() 메서드를 사용해 현재 유닉스(Unix) 시간을 가져올 수도 있습니다.
날짜와 시간을 관리하는 것은 프로그래밍에서 매우 중요한 부분입니다. 예를 들어 JavaScript에서는 동적으로 변경되는 저작권 연도, 일정표, 이벤트 목록 등을 만들 때 시간과 날짜 정보가 반드시 필요합니다.
JavaScript에서 시간을 다루려면 Date 객체와 관련 메서드를 사용하면 됩니다. Date 객체를 활용하면 날짜와 시간을 저장하고, 필요에 맞게 원하는 형식으로 포맷팅할 수 있습니다.
이 글에서는 Date 객체를 사용해 JavaScript 타임스탬프를 만드는 기본 방법부터 시작해, 날짜와 타임스탬프를 원하는 형식으로 표현하는 방법, 그리고 UTC 시간 값을 조회하는 방법까지 차근차근 살펴보겠습니다.
JavaScript 타임스탬프 객체란?
Date 객체는 JavaScript에서 날짜와 시간을 저장하는 데 사용됩니다. 인자 없이 Date 객체를 생성하면 현재 날짜와 시간이 담긴 객체가 만들어집니다. 다음은 Date 객체로 현재 날짜와 시간을 가져오는 예제입니다.
const currentTime = new Date();
console.log(currentTime);
위 코드에서는 currentTime이라는 변수를 선언하고 여기에 Date 객체를 할당했습니다. 그런 다음 console.log()로 해당 변수를 출력합니다. 실행 결과는 다음과 같습니다.
Wed Feb 05 2020 11:18:21 GMT+0000 (Greenwich Mean Time)
코드가 현재 날짜와 시간을 읽기 쉬운 형태로 반환한 것을 확인할 수 있습니다. 이 결과는 다음과 같은 구성 요소로 나눌 수 있습니다.
- 요일: Wed
- 월: Feb
- 일: 05
- 연도: 2020
- 시: 11
- 분: 18
- 초: 21
- 시간대: GMT+0000 (그리니치 평균시)
그런데 Date 객체가 이렇게 사람이 읽을 수 있는 값을 반환한다고 해서, JavaScript 내부적으로 날짜와 시간을 이 값으로 처리하는 것은 아닙니다. JavaScript는 유닉스 시간(Unix time)을 기준으로 날짜와 시간을 이해합니다. 유닉스 시간이란 1970년 1월 1일 자정(UTC)부터 경과한 밀리초(ms)를 나타내는 값으로, 프로그래밍에서 시간을 저장하는 보편적인 표준입니다.
유닉스 타임스탬프를 가져오려면 getTime() 메서드를 사용하면 됩니다.
console.log(currentTime.getTime());
실행 결과는 1580901774643입니다. 앞서 본 문자열만큼 직관적이지는 않지만, 정확히 같은 시각을 의미하는 값입니다.
기존 타임스탬프로 새 Date 객체 만들기
지금까지는 현재 시간을 기준으로 Date 객체를 만드는 방법을 살펴봤습니다. 하지만 이미 존재하는 JavaScript 타임스탬프를 기반으로 Date 객체를 만들 수도 있습니다.
이미 날짜 값을 갖고 있지만 이를 Date 객체의 다양한 메서드로 조작하고 싶을 때 유용합니다. 예를 들어 유닉스 타임스탬프를 갖고 있고, 이를 요일·시간·시간대 등을 모두 보여주는 긴 형식의 문자열로 표현하고 싶은 경우가 그렇습니다.
기존 타임스탬프로 새 Date 객체를 만드는 방법은 크게 세 가지입니다.
- 유닉스 타임스탬프:
new Date(timestamp) - 날짜 문자열:
new Date("date string") - 특정 날짜와 시간:
new Date(year, month, day, hours, minutes, seconds, milliseconds)
각 방법의 실제 사용 예는 다음과 같습니다.
new Date(9231925020);
new Date("April 17 1970 21:25:25");
new Date(1970, 3, 17, 21, 25, 25, 0);
세 가지 예제 모두 동일한 시각 정보로 Date 객체를 생성합니다. 따라서 어떤 객체든 앞서처럼 getTime() 함수로 출력하면 다음과 같은 결과를 얻습니다.
Fri Apr 17 1970 21:25:25 GMT+0100 (Greenwich Mean Time)
주목할 점은 마지막 방법, 즉 연도·월·일·시·분·초·밀리초를 직접 지정하는 방식에서 생략된 값은 자동으로 0으로 설정된다는 것입니다. 또한 월이 "3"으로 지정되어 있는데, 이는 JavaScript의 Date 객체가 월을 "0"부터 세기 때문입니다. 즉, 3은 네 번째 달인 4월(April)을 의미합니다.
날짜 정보 가져오기
Date 객체를 만들었다면 이제 필요한 날짜나 시간의 특정 부분을 꺼내올 수 있습니다. JavaScript의 get 계열 메서드를 사용하면 로컬 시간대를 기준으로 날짜의 특정 부분을 반환받을 수 있습니다. 주요 메서드는 다음과 같습니다.
- 연도: getFullYear()
- 월: getMonth()
- 일(월 기준): getDate()
- 요일: getDay()
- 시: getHours()
- 분: getMinutes()
- 초: getSeconds()
- 밀리초: getMilliseconds()
2020년 1월 1일에 대한 Date 객체를 하나 만들어 보겠습니다.
const january2020 = new Date(2020, 0, 1);
이 객체에 위 메서드들을 적용해 연도, 월, 일을 조회하면 다음과 같은 결과를 얻습니다.
january2020.getFullYear(); // 2020
january2020.getMonth(); // 0
january2020.getDate(); // 1
앞서 소개한 날짜 메서드들은 타임스탬프 어디에든 적용해 시간의 특정 부분을 손쉽게 가져올 수 있습니다.
또한 Date 객체를 활용하면 시간을 비교하는 것도 가능합니다. 예를 들어 올해가 2020년인지 확인하려면 다음과 같이 코드를 작성할 수 있습니다.
const currentDate = new Date();
if (currentDate.getFullYear() === 2020) {
console.log("It's 2020!");
} else {
console.log("It's not 2020!");
}
이 글을 작성하는 시점이 2020년이므로 코드는 "It's 2020!"을 출력합니다. 같은 방식으로 연도와 요일을 함께 비교하는 등 더 복잡한 조건 비교도 얼마든지 구현할 수 있습니다.
UTC 메서드 활용하기
앞서 소개한 날짜 조회 메서드들이 반환하는 값은 사용자의 로컬 시간대 설정을 기준으로 합니다. 협정 세계시(Coordinated Universal Time, UTC)를 기준으로 하는 타임스탬프가 필요하다면 위 메서드 이름에서 get 뒤에 UTC를 붙이면 됩니다.
다음은 getHours()와 getUTCHours() 메서드를 사용해 현재 시간대의 시(hour)와 UTC 시간대의 시를 각각 조회하는 예제입니다.
const currentDate = new Date();
console.log(currentDate.getHours());
console.log(currentDate.getUTCHours());
실행 결과는 다음과 같습니다.
11
11
이 코드는 현재 시간대의 시각과 UTC 시간대의 시각을 함께 출력합니다. 현재 UTC 시간대에 있다면 두 숫자는 위 예제처럼 동일하게 나타납니다.
UTC는 국제적으로 표준으로 인정받는 시간 체계이기 때문에, 여러 시간대를 지원해야 하는 웹사이트나 애플리케이션을 개발할 때 특히 유용합니다.
마무리
시간 처리는 JavaScript 개발 과정에서 자주 마주치게 되는 중요한 주제입니다. 이번 글에서는 Date 객체를 만들어 현재 시간을 저장하는 방법을 살펴봤고, 타임스탬프·날짜 문자열·특정 시각을 기반으로 커스텀 Date 객체를 생성하는 방법, 그리고 JavaScript에 내장된 날짜 조회 메서드들의 활용법까지 알아봤습니다.
이제 여러분도 전문가처럼 JavaScript에서 타임스탬프를 조회하고 자유롭게 다룰 수 있게 되었습니다!