JavaScript에서 date-fns를 사용하여 날짜 작업

by

날짜 관련 작업을 처리하는 것은 복잡할 수 있지만, date-fns 라이브러리를 사용하면 JavaScript 환경에서 날짜와 시간을 훨씬 더 쉽게 다룰 수 있습니다.

이 라이브러리는 개발 과정을 간소화하는 데 매우 효과적이며, 이번 기회에 date-fns 라이브러리에 대해 자세히 알아보겠습니다. date-fns는 가벼운 패키지로, 다양한 날짜 및 시간 관련 기능을 제공합니다.

라이브러리 설치

외부 라이브러리를 사용하려면 먼저 npm을 사용하여 프로젝트를 설정해야 합니다. 다음은 프로젝트 설정 단계입니다.

이 튜토리얼에서는 NodeJS 및 IDE가 이미 설치되어 있다고 가정합니다.

  • 작업을 수행할 디렉터리로 이동합니다.
  • npm init 명령어를 실행하여 프로젝트를 초기화합니다.
  • 나오는 질문에 적절하게 응답합니다.
  • 이제 다음 명령어를 사용하여 date-fns를 설치합니다.
npm install date-fns
  • dateFunctions.js라는 새 파일을 생성합니다.

이제 date-fns 라이브러리를 사용할 준비가 되었습니다. 몇 가지 필수 메소드에 대해 배워봅시다.

유효성 확인

주어진 날짜가 항상 유효한 것은 아닙니다.

예를 들어, 2021년 2월 30일과 같은 날짜는 존재하지 않습니다. 그렇다면 주어진 날짜가 유효한지 어떻게 확인할 수 있을까요?

date-fns 라이브러리의 isValid 메소드를 사용하면 날짜의 유효성을 쉽게 확인할 수 있습니다.

다음 코드를 실행하여 날짜 유효성 확인 기능을 테스트해 봅시다.

const { isValid } = require("date-fns");

console.log(isValid(new Date("2021, 02, 30")));

위의 코드를 실행하면 2021년 2월 30일이 유효하다고 나올 것입니다. 하지만 이것은 사실이 아닙니다.

왜 이런 결과가 나올까요?

JavaScript는 2월의 초과 날짜를 다음 달로 처리하여, 2021년 2월 30일을 유효한 날짜인 2021년 3월 1일로 변환합니다. 이를 확인하려면 콘솔에 new Date("2021, 02, 30")을 출력해보세요.

console.log(new Date("2021, 02, 30"));

date-fns 라이브러리는 parse라는 메소드를 제공하여 이 문제를 해결합니다. parse 메소드는 사용자가 제공한 날짜 문자열을 정확하게 해석하여 날짜 객체를 생성합니다.

다음 코드를 살펴보세요.

const { isValid, parse } = require("date-fns");

const invalidDate = parse("30.02.2021", "dd.MM.yyyy", new Date());
const validDate = parse("25.03.2021", "dd.MM.yyyy", new Date());

console.log(isValid(invalidDate));
console.log(isValid(validDate));

날짜 형식 지정

날짜 작업을 할 때 가장 기본적인 요구 사항 중 하나는 날짜를 원하는 형식으로 표시하는 것입니다. date-fns 라이브러리의 format 메소드를 사용하면 날짜를 다양한 형식으로 손쉽게 변환할 수 있습니다.

예를 들어, 날짜 형식을 23-01-1993, 1993-01-23 10:43:55, 화요일, 1993년 1월 23일 등으로 지정할 수 있습니다. 다음 코드를 실행하여 이러한 다양한 형식의 날짜를 확인해보세요.

const { format } = require("date-fns");

console.log(format(new Date(), "dd-MM-yyyy"));
console.log(format(new Date(), "dd/MM/yyyy HH:mm:ss"));
console.log(format(new Date(), "PPPP"));

사용 가능한 전체 형식 목록은 여기에서 확인할 수 있습니다.

날짜 추가

addDays 메소드는 특정 날짜에 지정된 일수를 더하는 데 사용됩니다.

이 메소드를 사용하면 특정 날짜로부터 며칠 후의 날짜를 쉽게 계산할 수 있으며, 이는 다양한 상황에서 매우 유용하게 사용됩니다.

예를 들어, 생일이 며칠 후이고 그날 일정이 바쁘다고 가정해 봅시다. 바쁜 일정 때문에 생일을 잊어버릴 수도 있습니다. addDays 메소드를 사용하여 생일이 며칠 후인지 알려줄 수 있습니다. 다음은 관련 코드입니다.

const { format, addDays } = require("date-fns");

const today = new Date();

// 6일 후 생일
const birthday = addDays(today, 6);

console.log(format(today, "PPPP"));
console.log(format(birthday, "PPPP"));

addDays 메소드와 유사하게 addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears 등과 같은 다양한 메소드가 있습니다. 메소드 이름을 보면 각 메소드의 기능을 쉽게 추측할 수 있을 것입니다.

직접 사용해 보세요.

날짜 간격 포맷

날짜를 비교하는 코드를 처음부터 작성하는 것은 매우 번거롭습니다. 하지만 날짜를 비교해야 하는 이유는 무엇일까요?

날짜 비교 기능은 다양한 애플리케이션에서 사용됩니다. 소셜 미디어 사이트를 보면 “1분 전”, “12시간 전”, “1일 전”과 같은 태그라인이 표시됩니다. 여기서 게시 날짜와 현재 날짜 사이의 날짜 차이를 사용합니다.

formatDistance 메소드도 이와 동일한 기능을 수행합니다. 이 메소드는 두 날짜 사이의 간격을 사람이 읽기 쉬운 형식으로 반환합니다.

나이를 계산하는 프로그램을 작성해 봅시다.

const { formatDistance } = require("date-fns");

const birthday = new Date("1956, 01, 28");
const presentDay = new Date();

console.log(`나이: ${formatDistance(presentDay, birthday)}`);

특정 기간의 날짜

앞으로 며칠 동안의 날짜와 요일을 알아야 한다고 가정해 봅시다. eachDayOfInterval 메소드는 시작 날짜와 종료 날짜 사이의 모든 날짜를 반환하는 데 도움이 됩니다.

오늘부터 앞으로 30일 동안의 날짜를 출력해 보겠습니다.

const { addDays, eachDayOfInterval, format } = require("date-fns");

const presentDay = new Date();
const after30Days = addDays(presentDay, 30);

const _30Days = eachDayOfInterval({ start: presentDay, end: after30Days });

_30Days.forEach((day) => {
   console.log(format(day, "PPPP"));
});

최대 및 최소 날짜

max 및 min 메소드는 각각 주어진 날짜 중에서 가장 늦은 날짜와 가장 빠른 날짜를 찾는 데 사용됩니다. date-fns의 메소드는 매우 직관적이고 메소드 이름을 통해 그 기능을 쉽게 짐작할 수 있습니다. 코드를 작성해 보겠습니다.

const { min, max } = require("date-fns");

const _1 = new Date("1990, 04, 22");
const _2 = new Date("1990, 04, 23");
const _3 = new Date("1990, 04, 24");
const _4 = new Date("1990, 04, 25");

console.log(`최대: ${max([_1, _2, _3, _4])}`);
console.log(`최소: ${min([_1, _2, _3, _4])}`);

날짜 동일 여부 확인

isEqual 메소드의 기능은 쉽게 추측할 수 있습니다. 짐작하신 대로, isEqual 메소드는 두 날짜가 같은지 확인하는 데 사용됩니다. 다음 예제 코드를 살펴보세요.

const { isEqual } = require("date-fns");

const _1 = new Date();
const _2 = new Date();
const _3 = new Date("1900, 03, 22");

console.log(isEqual(_1, _2));
console.log(isEqual(_2, _3));
console.log(isEqual(_3, _1));

결론

date-fns 라이브러리의 모든 메소드에 대해 이야기하려면 며칠이 걸릴 것입니다. 라이브러리를 배우는 가장 좋은 방법은 필수 메소드를 먼저 익힌 다음 문서에서 추가 정보를 읽는 것입니다. date-fns 라이브러리에도 동일한 방법을 적용해 보세요.

이 튜토리얼에서는 필수적인 메소드를 살펴보았습니다. 특정 용도가 필요한 경우 공식 문서를 참고하거나, 자바스크립트, jQuery, JSON과 같은 온라인 강좌를 고려해 볼 수 있습니다.

즐거운 코딩하세요! 👨‍💻