Original article: How to Format Dates in JavaScript with One Line of Code

저는 오랫동안 JavaScript에서 날짜 형식을 지정할 때마다 Date-fns 같은 라이브러리를 사용했습니다. 그러나 작은 프로젝트에서 단순한 날짜 형식 지정이 필요할 때마다 라이브러리를 사용하기엔 조금 애매합니다. JavaScript가 기본으로 제공하는 기능이 있거든요.

작업 중 날짜 형식 지정이 필요할 때 대부분의 개발자들이 이와 비슷한 방식으로 작업을 하고 있고, 저 또한 이게 최선의 방법이라고 생각해 왔습니다. 하지만 매번 라이브러리를 사용할 필요가 없다는 것을 최근 깨달았습니다.

직접 시도해보고 싶으시다면, 아래 코드 블록을 참고해주세요. 👇

new Date().toLocaleDateString("en-us", {
  weekday: "long",
  year: "numeric",
  month: "short",
  day: "numeric",
});
// "Friday, Jul 2, 2021"

JavaScript만으로 날짜 포맷팅을 할 수 있다는 걸 직접 확인했으니, 위의 코드가 어떻게 작동되는지를 살펴봅시다. 그리고 코드 한 줄만으로 날짜 형식을 지정할 수 있는 JavaScript의 다른 기능을 좀 더 알아보겠습니다.

JavaScript에서 날짜 형식 지정하기

JavaScript로 날짜를 구하는 것은 일반적으로 어렵지 않지만, 목적에 맞게 날짜를 포맷팅하는 것은 초보자에게 번거롭게 느껴질 수 있습니다. 대부분의 사용자가 결국 라이브러리를 사용하게 되는 이유겠지요.

JavaScript에서 날짜를 가져오기 위해 가장 많이 사용하는 방법은 new Date() 객체를 사용하는 것입니다.

기본적으로 new Date()를 터미널에서 실행하면 브라우저의 시간대가 사용되며 Fri Jul 02 2021 12:44:45 GMT+0100(British Summer Time)와 같은 전체 텍스트 문자열로 날짜가 표시됩니다.

그러나 웹 페이지나 응용 프로그램 환경에서 이렇게 날짜를 표기하는 건 적절하지 않고 가독성도 떨어집니다. 그러다보니 자연스레 더 나은 날짜 표기법을 찾게 되는 거죠.

그럼 Date 객체를 잘 활용하기 위해 사용할 수 있는 몇 가지 메서드를 살펴보겠습니다.

Date 객체 메서드

Date 객체에 적용할 수 있는 메서드의 종류는 무척 많습니다. 이를 활용하면 Date 객체에서 다양한 정보를 가져올 수 있습니다. 몇 가지만 예를 들면:

  • getFullYear() – 주어진 날짜의 연도를 네 자리 숫자로 반환합니다
  • getMonth() – 주어진 날짜의 월 값을 나타내는 0에서 11 사이의 정수를 반환합니다
  • getDate() – 주어진 날짜의 일에 해당하는 1 이상 31 이하의 정수를 반환합니다
  • getHours() – 주어진 날짜의 시를 나타내는 0에서 23 사이의 정수를 반환합니다

하지만 Date 객체 메서드를 사용하면서 원하는 형식으로 날짜를 변환하려면 대부분의 경우 메서드 사용에 더해 추가적으로 더 많은 코드를 작성해야 한다는 번거로움이 있습니다.

예를 들어, new Date().getMonth()는 7월을 나타내는 6을 반환합니다. 진행 중인 프로젝트에서 7월을 의미하는 "July"를 표기하려 한다면 다음과 같은 긴 코드가 필요합니다.

const currentMonth = new Date();
const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];
console.log(months[currentMonth.getMonth()]);

좀 더 간편한 방법은 없을까요?

프로젝트의 날짜 표기에 가장 유용하게 사용될 수 있는 두 가지 방법을 살펴보겠습니다.

toDateString() 메서드 사용하기

JavaScript의 toDateString 메서드는 Date 객체의 날짜 부분을 다음과 같은 미국 영어권 형식의 문자열로 반환합니다:

  1. 주어진 날짜의 요일 이름의 첫 세 문자 (예: Friday -> Fri)
  2. 주어진 날짜의 월 이름의 첫 세 문자 (예: July -> Jul)
  3. 주어진 날짜의 일에 해당하는 정수, 빈 자릿수가 있다면 왼쪽에 0를 채웁니다 (예: 2일 -> 02)
  4. 주어진 날짜의 네 자리 연도, 빈 자릿수가 있다면 왼쪽에 0를 채웁니다
new Date().toDateString();
//"Fri Jul 02 2021"

단, toDateString 메서드의 주요 단점 중 하나는 사용자가 원하는 형태로 가공을 할 수 없다는 점입니다. 예를 들어, 이 방법으로는 미국 영어권이 아닌 다른 나라의 날짜 표기법으로 날짜를 변환하지 못합니다.

toLocaleDateString() 메서드 사용하기

이번엔 제가 가장 좋은 방법 중 하나라고 생각하는 toLocaleDateString 메서드에 대해 알아보겠습니다.

이 메서드는 Date 객체를 현 지역 날짜 표기법으로 변환된 날짜를 문자열로 반환합니다. 또한 인자를 통해 표기법에 대한 옵션과 함수의 동작을 설정할 수 있습니다.

사용법:

toLocaleDateString();
toLocaleDateString(locales);
toLocaleDateString(locales, options);

몇 가지 예시와 출력되는 값을 확인해보겠습니다.

예시:

const currentDate = new Date();

const options = {
  weekday: "long",
  year: "numeric",
  month: "short",
  day: "numeric",
};

console.log(currentDate.toLocaleDateString("de-DE", options));
//Freitag, 2. Juli 2021

console.log(currentDate.toLocaleDateString("ar-EG", options));
// الجمعة، ٢ يوليو ٢٠٢١

console.log(currentDate.toLocaleDateString("en-us", options));
//Friday, Jul 2, 2021

locales 와 options 인수를 사용하지 않을 수도 있습니다.

예시:

new Date().toLocaleDateString();
// "7/2/2021"

또한 locales 인수만 지정할 수 있습니다. 이전과 동일한 정보를 브라우저의 시간대 기준으로 출력합니다.

new Date().toLocaleDateString("en-US");
("7/2/2021");

option의 경우에는 다음과 같은 4가지 기본 옵션을 상황에 맞게 활용할 수 있습니다:

  • weekday – 요일을 원하는 방식으로 짧거나 길게 출력합니다 (short or long)
  • year – 연도를 숫자로 출력합니다
  • month – 월을 원하는 방식으로 짧거나 길게 출력합니다 (short or long)
  • day – 날짜의 일수를 숫자로 출력합니다
new Date().toLocaleDateString("en-us", {
  weekday: "long",
  year: "numeric",
  month: "short",
}); // "Jul 2021 Friday"

new Date().toLocaleDateString("en-us", { year: "numeric", month: "short" });
// "Jul 2021"

결론

Date 객체에는 약 7개의 날짜 형식 지정 메서드가 있습니다. 각 메서드는 다음과 같은 특정 값을 반환합니다:

  • toString() - Fri Jul 02 2021 14:03:54 GMT+0100 (British Summer Time)을 반환합니다
  • toDateString() - Fri Jul 02 2021을 반환합니다
  • toLocaleString() - 7/2/2021, 2:05:07 PM을 반환합니다
  • toLocaleDateString() - 7/2/2021을 반환합니다
  • toGMTString() - Fri, 02 Jul 2021 13:06:02 GMT을 반환합니다
  • toUTCString() - Fri, 02 Jul 2021 13:06:28 GMT을 반환합니다
  • toISOString() - 2021-07-02T13:06:53.422Z을 반환합니다

다만 조금 더 복잡한 날짜 형식이 필요하다면 직접 사용자 지정 날짜 형식을 만들어야 합니다. 아래 참고자료를 통해 사용자 지정 날짜 형식을 만드는 방법을 알아보시길 바랍니다.

유용한 참고자료 (영문)