[javascript] 자바스크립트 Date 사용 방법 (현재 날짜 가져오기)

참고: https://www.freecodecamp.org/news/javascript-date-now-how-to-get-the-current-date-in-javascript/

다양한 프로젝트에서 리소스 생성 날짜나 활동의 타임스탬프 같은 컴포넌트를 만들어야할 일이 있습니다. 날짜와 타임스탬프 형식을 맞추는건 사람을 지치게하는 작업일 수도 있습니다. 이 가이드에서는 이러한 다양한 javascript 날짜 형식을 다루는 방법을 설명하겠습니다.

Javascript의 Date 객체

javascript는 Date라는 내장 객체를 가지고 있습니다. 이는 날짜와 시간을 저장하고 그걸 처리하는 메소드를 포함하고 있습니다. 다음 예제에서는 새로운 Date 객체를 생성하기 위해 new 키워드를 사용합니다.

const date = new Date();

Date 객체는 1970년 1월 1일 부터 현재까지 경과한 밀리초를 나타내는 값을 가지고 있습니다. 여기서 Date 생성자에 날짜 문자열을 전달해서 특정한 날짜를 가리키는 객체를 만들 수도 있습니다.

const date = new Date('Jul 12 2022');

현재 연도를 가져오기 위해서는 Date 객체의 getFullYear() 메소드를 사용할 수 있습니다. getFullYear() 메소드는 Date 객체가 가리키는 특정 날짜의 연도를 반환합니다.

const currentYear = date.getFullYear();
console.log(currentYear); //2022

비슷하게 현재 달과 날짜를 가져오는 메소드도 있습니다.

const today = date.getDate();
const currentMonth = date.getMonth() + 1;

getDate() 메소드는 현재 달의 날짜(1~31)를 반환합니다. getMonth() 메소드는 지정된 날짜의 달을 반환하는데 여기서 주의해야할 점은 getMonth() 매소드의 반환값은 0부터 시작하는 값이라는 것 입니다. 0이 1월이고 11이 12월 입니다. 이러한 이유로 getMonth() 메소드의 값에 1을 더해서 일반적인 달 값을 만들어냅니다.

Date now

now()는 Date 객체의 정적 메소드입니다. 이는 Epoch(1970/1/1) 부터 현재까지 경과된 밀리초를 반환하는데 이 값을 Date 객체의 생성자로 전달하여 날짜를 만들 수도 있습니다.

const timeElapsed = Date.now();
const today = new Date(timeElapsed);

Formatting The Date

Date 객체의 여러가지 메소드를 통해 날짜를 다양한 포멧(GMT, ISO 등)으로 출력할 수 있습니다. toDateString() 메소드는 숫자의 나열이 아니라 사람이 읽을 수 있는 형태의 포멧으로 날짜를 반환합니다.

today.toDateString(); // 'Thu Jun 09 2022'

toISOString() 메소드는 ISO 8601 확장 포멧의 형태로 날짜를 반환합니다.

today.toISOString(); // '2022-06-09T09:15:50.162Z'

toUTCString() 메소드는 UTC 타임존 포멧으로 날짜를 반환합니다.

today.toUTCString(); // 'Thu, 09 Jun 2022 09:17:03 GMT'

toLocaleDateString() 메소드는 지역구분 형식으로 날짜를 리턴합니다.

today.toLocaleDateString(); // '2022. 6. 9.'

더 자세한 Date 메소드를 알아보려면 MDN 문서를 확인하기 바랍니다.

Custom Date Formatter Function

위에서 언급한 다양한 형식을 사용할 수 있지만 각 프로젝트 마다 yy/dd/mm 이나 yyyy-dd-mm 등 표준이 아닌 다른 포멧이 필요한 경우가 있습니다. 이런 문제를 해결하기 위해서는 여러 프로젝트에서도 사용할 수 있는 재사용 가능한 함수를 하나 만드는게 좋습니다. 이번 섹션에서는 함수의 매개변수로 전달된 포멧으로 날짜를 생성하는 유틸리티 함수를 만들어 보겠습니다.

const today = new Date();

function formatDate(date, format) {
    //
}

formatDate(today, 'mm/dd/yy');

함수의 매개변수로 전달되는 'mm', 'dd', 'yy'는 각자 원하는 년도, 달, 일로 바꿔야 합니다. 이를 위해서 아래처럼 replace() 메소드를 사용합니다.

format.replace('mm', date.getMonth() + 1);

하지만 이런식으로 짜면 아래 코드처럼 메소드 체이닝도 많이 일어나고 유연성이 떨어져서 나중에 유지관리가 힘들어질 것입니다.

format.replace('mm', date.getMonth() + 1)
    .replace('yy', date.getFullYear())
    .replace('dd', date.getDate());

체이닝 메소드 대신 replace() 메소드의 정규표현식을 사용할 수 있습니다. 먼저 key-value 쌍으로 표현되는 문자열과 그에 해당하는 값을 가지는 객체를 만듭니다.

const formatMap = {
    mm: date.getMonth() + 1,
    dd: date.getDate(),
    yy: date.getFullYear().toString().slice(-2),
    yyyy: date.getFullYear()
};

다음으로 정규표현식을 사용해 문자열을 변경합니다.

formattedDate = format.replace(/mm|dd|yy|yyy/gi, matched => map[matched]);

아래는 위의 코드들을 합친 완전한 코드입니다.

function formatDate(date, format) {
    const map = {
        mm: date.getMonth() + 1,
        dd: date.getDate(),
        yy: date.getFullYear().toString().slice(-2),
        yyyy: date.getFullYear()
    }

    return format.replace(/mm|dd|yy|yyy/gi, matched => map[matched])
}

이 코드에 타임스탬프 형식을 지정하는 기능을 추가해도 좋습니다.

마무리

javascript의 Date 객체에 대해 더 잘 이해했기를 바랍니다. 다른 프로젝트에서 날짜를 제어하기 위해 datesj, moment 같은 타사 라이브러리를 사용할 수도 있습니다.

관련 글

HTML 버튼 클릭

자바스크립트 버튼 클릭