자바스크립트 Date 객체 정리 및 관련 함수

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

Date - JavaScript | MDN

여러 개의 개인 프로젝트를 진행하면서 Date 객체를 자주 사용하였습니다.

자주 쓰이는 만큼, 이번 기회에 Date 객체를 정리하고, 이를 활용해 구현한 메서드들도 함께 정리해보려 합니다.

Date 객체란?

Date 객체는 자바스크립트에서 날짜와 시간을 표현하기 위한 기본 객체입니다.

이를 통해 날짜와 시간을 처리하며, Unix 시간을 기반으로 동작합니다. 1970년 1월 1일 자정 이후 경과된 밀리초를 기준으로 계산됩니다.

Date 객체 생성 방법

// 현재 날짜와 시간으로 생성
const now = new Date();

// 특정 날짜와 시간을 문자열로 지정하여 생성
const specificDate = new Date('2024-09-13T10:00:00');

// 연도, 월, 일, 시간, 분, 초를 인자로 전달하여 생성
const specificTime = new Date(2024, 8, 13, 10, 30, 45); // 2024년 9월 13일 10시 30분 45초

// 시간 정보 없이 연도, 월, 일만 지정하여 생성 (시간은 기본적으로 00:00:00으로 설정됨)
const onlyDate = new Date(2024, 8, 13); // 2024년 9월 13일

// 연도와 월만 지정하여 생성 (일은 기본적으로 1일로 설정됨, 시간은 00:00:00)
const onlyYearMonth = new Date(2024, 8); // 2024년 9월

// 밀리초 단위로 생성 (1970년 1월 1일 이후 경과된 밀리초 값 사용)
const dateFromMillis = new Date(1600000000000);

Date 객체의 주요 메서드들

날짜 및 시간 정보 가져오기

// 현재 연도를 가져옵니다.
const year = now.getFullYear();

// 현재 월을 가져옵니다 (0: 1월, 11: 12월).
const month = now.getMonth();

// 현재 일을 가져옵니다.
const date = now.getDate();

// 현재 요일을 가져옵니다 (0: 일요일, 6: 토요일).
const day = now.getDay();

// 현재 시간을 가져옵니다 (0~23).
const hours = now.getHours();

// 현재 분을 가져옵니다 (0~59).
const minutes = now.getMinutes();

// 현재 초를 가져옵니다 (0~59).
const seconds = now.getSeconds();

UTC 시간 정보 가져오기

로컬 시간은 사용자의 시스템이 설정된 시간대를 기준으로 값을 반환합니다. 각 국가나 지역의 시간대에 따라 다를 수 있습니다.

UTC 시간은 협정 세계시(UTC)를 기준으로, 사용자의 시스템 시간대와 상관없이 동일한 시간을 반환합니다.

const utcYear = now.getUTCFullYear();
const utcMonth = now.getUTCMonth();
const utcDate = now.getUTCDate();
const utcDay = now.getUTCDay();

날짜 및 시간 설정하기

const newDate = new Date();
newDate.setFullYear(2025); // 연도를 2025년으로 설정
newDate.setMonth(11); // 월을 12월로 설정 (0부터 시작하므로 11이 12월을 의미)
newDate.setDate(25); // 날짜를 25일로 설정
console.log(newDate);

getTimezoneOffset

getTimezoneOffset() 메서드는 현재 로컬 시간과 UTC 시간 간의 차이를 분 단위로 반환합니다.

이 값은 양수 또는 음수로 반환되며, 이를 이용해 로컬 시간에서 UTC 시간으로 변환하거나, 반대로 UTC 시간에서 로컬 시간으로 변환할 수 있습니다.

const now = new Date();
const timezoneOffset = now.getTimezoneOffset(); // 분 단위 반환
console.log(timezoneOffset); // 한국의 경우 UTC+9, -540 반환

getTimezoneOffset()으로 받은 값은 분 단위이기 때문에, 밀리초로 변환하려면 60000(1분 = 60000 밀리초)을 곱합니다.

이 값을 사용해 시간을 보정하면, UTC 기준의 시간을 현지 시간으로 변환할 수 있습니다.

function getLocalTime(date: Date) {
    return new Date(date.getTime() - date.getTimezoneOffset() * 60000);
}

프로젝트에서 사용한 Date 객체 관련 함수들

해당 년,월의 일자 얻기

달력을 구현할 때 사용한 메서드입니다.

전달된 연도와 월을 기반으로 해당 월의 모든 일자를 배열로 반환합니다.

첫 번째 주의 경우, 첫 번째 날이 시작되기 전에 빈 칸을 채워 달력의 정렬을 맞출 수 있도록 구현했습니다.

function getMonthDays(year: number, month: number) {
    const days: (number | null)[] = [];
    const date = new Date(year, month, 1);
    const firstDayOfWeek = date.getDay();

    // 첫 번째 날 이전의 빈 칸 채우기
    for (let i = 0; i < firstDayOfWeek; i++) {
        days.push(null);
    }

    // 해당 월의 날짜 추가
    while (date.getMonth() === month) {
        days.push(date.getDate());
        date.setDate(date.getDate() + 1);
    }
    return days;
}

주어진 시간과 현재 시간의 차이 계산 및 상대적 시간 표시

YouTube Data API에서 각 비디오의 생성 시기는 "2024-09-10T19:30:06Z"와 같은 문자열로 제공됩니다.

이 문자열을 사용해 새로운 Date 객체를 생성하고, 현재 시간과의 차이를 계산하는 로직입니다.

diffInSeconds는 getTime()으로 밀리초 단위로 반환되므로, 초 단위로 변환하기 위해 1000으로 나눴습니다.

secondsInMinute, secondsInHour, secondsInDay, secondsInWeek, secondsInMonth, secondsInYear는 각각 1분, 1시간, 1일, 1주, 1개월, 1년을 초 단위로 표현한 값입니다.

이 값들을 바탕으로 Math.floor를 사용해 정수로 반올림한 후, "몇 분 전", "몇 시간 전", "몇 일 전"과 같은 형식으로 시간 차이를 포맷합니다.

export function formatDateTime(dateString: string): string {
    const now = new Date();
    const targetDate = new Date(dateString);
    const diffInSeconds = Math.floor((now.getTime() - targetDate.getTime()) / 1000);

    const secondsInMinute = 60;
    const secondsInHour = 60 * secondsInMinute;
    const secondsInDay = 24 * secondsInHour;
    const secondsInWeek = 7 * secondsInDay;
    const secondsInMonth = 30 * secondsInDay;
    const secondsInYear = 365 * secondsInDay;

    if (diffInSeconds < secondsInHour) {
        const minutes = Math.floor(diffInSeconds / secondsInMinute);
        return `${minutes}분 전`;
    } else if (diffInSeconds < secondsInDay) {
        const hours = Math.floor(diffInSeconds / secondsInHour);
        return `${hours}시간 전`;
    } else if (diffInSeconds < secondsInWeek) {
        const days = Math.floor(diffInSeconds / secondsInDay);
        return `${days}일 전`;
    } else if (diffInSeconds < 14 * secondsInDay) {
        const weeks = Math.floor(diffInSeconds / secondsInWeek);
        return `${weeks}주 전`;
    } else if (diffInSeconds < secondsInMonth) {
        const days = Math.floor(diffInSeconds / secondsInDay);
        return `${days}일 전`;
    } else if (diffInSeconds < secondsInYear) {
        const months = Math.floor(diffInSeconds / secondsInMonth);
        return `${months}개월 전`;
    } else {
        const years = Math.floor(diffInSeconds / secondsInYear);
        return `${years}년 전`;
    }
}

"YYYY-MM-DD" 형태의 문자열로 포맷하기

export function formatISODate(date: Date) {
    return new Date(date.getTime() - date.getTimezoneOffset() * 60000)
        .toISOString()
        .split("T")[0];
}

"YYYY-MM-DD" 형식의 문자열로 날짜를 포맷하기 위해 formatISODate 함수를 작성했습니다.

getFullYear, getMonth, getDate를 사용하는 것이 더 직관적이지만, 학습을 위해 getTimezoneOffset()과 toISOString()을 사용해 변환해보았습니다.

getTimezoneOffset()은 로컬 시간과 UTC 시간의 차이를 분 단위로 반환하며, 이를 밀리초로 변환하기 위해 * 60000을 곱했습니다.

이렇게 로컬 시간과의 차이를 보정한 후 toISOString()을 사용하면, UTC 기준으로 "2024-09-24T15:00"과 같은 형식의 문자열을 반환합니다. 여기서 필요한 날짜 부분만 추출해 "YYYY-MM-DD" 형식으로 포맷했습니다.