[JavaScript] Date 객체와 날짜/시간을 다루기

Date 객체 생성

현재 날짜와 시간으로 생성

인수를 제공하지 않고 new Date() 를 호출하면 현재 시각을 나타내는 Date 객체가 생성됩니다.

const now = new Date();
console.log(now.toString());

타임스탬프(밀리초)를 사용하여 생성

1970년 1월 1일 00:00:00 UTC를 기준으로 한 밀리초 값을 인수로 넘기면, 해당 시점을 나타내는 Date 객체가 만들어집니다.

const epoch = new Date(0);
console.log(epoch.toUTCString());
// 출력: "Thu, 01 Jan 1970 00:00:00 GMT"

// 24시간(1일) 후의 시간
const oneDayLater = new Date(24 * 60 * 60 * 1000);
console.log(oneDayLater.toUTCString());
// 출력: "Fri, 02 Jan 1970 00:00:00 GMT"

날짜 문자열을 파싱하여 생성

// Z는 UTC 시간을 의미합니다.
const eventDate = new Date("2024-05-14T07:30:00Z");
console.log(eventDate.toString());
// 출력 예시: "Tue May 14 2024 16:30:00 GMT+0900 (한국 표준시)"

개별적으로 지정하여 생성

년, 월, 일, 시, 분, 초, 밀리초를 조합해 Date 객체를 생성합니다. 이때 월(month)은 0부터 시작하여 0이 1월, 11이 12월을 나타냅니다.

const birthday = new Date(1995, 10, 15); // 월: 10 (11월)
console.log(birthday.toDateString());
// 출력: "Wed Nov 15 1995"

const preciseTime = new Date(2024, 4, 14, 9, 45, 30, 500);
console.log(preciseTime.toString());
// 출력: "Tue May 14 2024 09:45:30 GMT+0900 (한국 표준시)"

날짜와 시간 구성 요소 추출하기

현지 시간 기준

• getFullYear() : 4자리 연도 반환
• getMonth() : 월 반환 (0-11)
• getDate() : 일 반환 (1-31)
• getDay() : 요일 반환 (0: 일요일 ~ 6: 토요일)
• getHours(), getMinutes(), getSeconds(), getMilliseconds(): 시, 분, 초, 밀리초 반환

const sampleDate = new Date("2024-05-14T07:30:00Z"); // UTC 기준 시간

console.log(sampleDate.getFullYear());  // 출력: 2024
console.log(sampleDate.getMonth());     // 출력: 4 (5월)
console.log(sampleDate.getDate());      // 출력: 14
console.log(sampleDate.getDay());       // 출력: 요일 (예: 2는 화요일)

UTC 시간 기준

getUTCFullYear(), getUTCMonth(), getUTCDate(), getUTCHours(), 등 UTC 시간을 기준으로 구성 요소를 얻을 수 있습니다.

console.log(sampleDate.getUTCHours()); // 출력: 7 (UTC 기준 시간)

타임스탬프와 시간대 오프셋

• getTime(): 1970년 1월 1일 이후 경과된 밀리초 반환
• getTimezoneOffset(): 현지 시간과 UTC 시간의 분 단위 차이 반환 (음수이면 UTC보다 현지 시간이 빠름)

console.log(sampleDate.getTime());          // 출력: 타임스탬프 (밀리초 단위 숫자)
console.log(new Date().getTimezoneOffset()); // 예시 출력: -540 (한국 표준시는 UTC+9)

날짜와 시간 구성 요소 설정하기

• setFullYear(year): 연도 설정
• setMonth(month): 월 설정 (0-11)
• setDate(date): 일 설정 (1-31)
• setHours(hours), setMinutes(minutes), setSeconds(seconds), setMilliseconds(ms)

let appointment = new Date(2024, 4, 14, 10, 0, 0);
console.log(appointment.toString());
// 출력: "Tue May 14 2024 10:00:00 GMT+0900 (한국 표준시)"

// 시간을 1시간 늦춥니다.
appointment.setHours(appointment.getHours() + 1);
console.log(appointment.toString());
// 출력: "Tue May 14 2024 11:00:00 GMT+0900 (한국 표준시)"

자동 수정

유효하지 않은 날짜를 설정하면 자동으로 올바른 날짜로 수정됩니다.

// 2024년 2월 29일 (윤년)
const date = new Date(2024, 1, 29);
console.log(date.toDateString());
// 출력: "Thu Feb 29 2024"

// 존재하지 않는 날짜를 설정
date.setDate(date.getDate() + 1);
console.log(date.toDateString());
// 출력: "Fri Mar 01 2024"

타임스탬프를 활용한 날짜 계산

Date 객체는 숫자로 변환되면 타임스탬프(밀리초)로 취급됩니다. 이를 이용하면 두 날짜 사이의 차이를 계산할 수 있습니다.

const startTime = new Date();

// 연산 또는 작업 수행
for (let i = 0; i < 1e7; i++) {
  // 작업 내용
}

const endTime = new Date();

const elapsed = endTime - startTime; // 밀리초 단위
console.log(`소요 시간: ${elapsed}ms`);

Date.now()

현재 시간을 타임스탬프로 바로 얻으려면 Date.now()를 사용합니다.

const start = Date.now();

// 작업 수행
doHeavyTask();

const duration = Date.now() - start;
console.log(`작업 시간: ${duration}ms`);

날짜 문자열과 Date.parse()

Date.parse() 메서드는 날짜 문자열을 받아들여 타임스탬프를 반환합니다.

문자열 형식이 올바르지 않으면 NaN을 반환합니다.

const timestamp = Date.parse("2024-05-14T07:30:00.000Z");
console.log(timestamp); // 출력: 해당 타임스탬프 밀리초 값

const eventDate = new Date(timestamp);
console.log(eventDate.toString());

고정밀 시간 측정: performance.now()

브라우저 환경에서 정확한 시간 측정이 필요한 경우 performance.now()를 사용할 수 있습니다. 이는 페이지가 로드된 시점부터 경과한 시간을 밀리초 단위로 소수점 이하까지 제공합니다.

const start = performance.now();

// 정밀한 작업 수행
performPreciseOperation();

const duration = performance.now() - start;
console.log(`작업 시간: ${duration.toFixed(3)}ms`);