날짜 포맷팅 라이브러리 (date-fns)
최근에 토이 프로젝트를 진행하면서 날짜 데이터를 사용자에게 보여줘야 하는 부분이 생겼다. 처음에는 JavaScript의 기본 Date 객체를 사용하려 했지만, 날짜 포맷팅과 로케일 지원이 번거로웠다. 그래서 좀 더 편리한 방법을 찾다 보니 date-fns, moment.js, Day.js 같은 라이브러리를 알게 되었다. 검색을 통해 각 라이브러리의 장단점을 비교한 후, 모듈화와 성능 면에서 장점이 있는 date-fns를 선택하게 되었다.
date-fns 란?
date-fns는 JavaScript의 날짜 및 시간 처리를 쉽게 할 수 있도록 도와주는 경량 라이브러리이다. 함수형 스타일을 기반으로 설계되어 있으며, 필요한 기능만 가져와서 사용할 수 있어 번들 크기를 줄이는 데 유리하다.
특징
- 함수형 스타일: OOP 방식이 아닌 개별 함수로 제공됨
- 모듈화: 필요한 기능만 가져와서 사용 가능
import { format } from 'date-fns' - 로케일 지원: 다국어 날짜 포맷팅 가능
- 타임존 처리 가능
date-fns-tz패키지를 추가하면 지원
사용 방법
1️⃣ 설치
yarn add date-fns2️⃣ 날짜 포맷팅 (format)
import { format } from "date-fns";
const date = new Date(2025, 2, 9); // 2025년 3월 9일
console.log(format(date, "yyyy-MM-dd")); // "2025-03-09"
console.log(format(date, "PPPP")); // "Sunday, March 9th, 2025"3️⃣ 날짜 계산 (add, sub)
import { addDays, subMonths } from "date-fns";
const today = new Date();
console.log(addDays(today, 10)); // 오늘 날짜에서 10일 뒤
console.log(subMonths(today, 2)); // 오늘 날짜에서 2달 전4️⃣ 날짜 비교 (isBefore, isAfter)
import { isBefore, isAfter } from "date-fns";
const date1 = new Date(2025, 2, 9);
const date2 = new Date(2025, 5, 15);
console.log(isBefore(date1, date2)); // true (date1이 더 이전 날짜)
console.log(isAfter(date1, date2)); // false5️⃣ 로케일(Locale) 지원
import { format } from "date-fns";
import { ko, enUS } from "date-fns/locale";
const date = new Date(2025, 2, 9);
console.log(format(date, "PPPP", { locale: ko })); // "2025년 3월 9일 일요일"
console.log(format(date, "PPPP", { locale: enUS })); // "Sunday, March 9th, 2025"6️⃣ 시간 차이 계산 (differenceInDays, differenceInHours)
import { differenceInDays, differenceInHours } from "date-fns";
const start = new Date(2025, 2, 1);
const end = new Date(2025, 2, 9);
console.log(differenceInDays(end, start)); // 8일 차이
console.log(differenceInHours(end, start)); // 192시간 차이date-fns, moment.js, Day.js 비교
| 라이브러리 | 크기 | 모듈화 | 성능 | 유지보수 상태 | 사용 방식 |
|---|---|---|---|---|---|
| moment.js | 🚨 큼 (200KB+) | ❌ 없음 | 🐌 느림 | ⚠️ 유지보수 중단(Deprecated) | OOP 스타일(객체 기반) |
| Day.js | ✅ 작음 (2KB) | ❌ 없음 | 🚀 빠름 | ✅ 유지보수 중 | moment.js와 유사한 API |
| date-fns | ✅ 작음 (24KB) | ✅ 있음 | 🚀 빠름 | ✅ 유지보수 중 | 함수형 스타일 (필요한 것만 가져오기) |
핵심 비교
- moment.js는 한때 가장 많이 쓰였지만, 크기가 크고, 성능이 떨어지며, 유지보수가 중단됨
- Day.js는 moment.js와 API가 거의 동일하지만, 더 가벼운 크기와 좋은 성능을 제공함
- date-fns는 모듈화가 가능하고 함수형 스타일이라 유지보수에 유리함
어떤 라이브러리를 선택하는 것이 좋을까?
- 새로운 프로젝트:
date-fns또는Day.js추천 - moment.js를 사용 중이라면?
Day.js로 마이그레이션 고려 - 함수형 스타일이 필요하면?
date-fns가 적합 - 최대한 가벼운 라이브러리가 필요하면?
Day.js선택
date-fns, moment.js, Day.js는 각각 장단점이 있지만, moment.js는 더 이상 추천되지 않으며, date-fns 또는 Day.js 중에서 선택하는 것이 좋다. 프로젝트의 특성에 맞게 적절한 라이브러리를 선택하면 날짜 처리가 훨씬 수월해질 것이다.
