[개념정리] JS 날짜 라이브러리 date-fns

date-fns란?

• JavaScript 날짜/시간 처리 유틸리티 라이브러리
• Lodash가 배열/객체 유틸을 제공하듯, date-fns는 날짜를 위한 다양한 함수를 제공
• 함수 하나하나가 작은 모듈로 제공되어 필요한 것만 import → 번들 최적화에 유리
• 40개 이상의 언어를 지원하는 로케일(Localization) 기능 내장 → 한국어(ko) 포함
• 가볍고 직관적인 API 덕분에, 프론트엔드에서 사실상 표준처럼 쓰이는 날짜 라이브러리

주요 특징

1. 함수형 스타일

• addDays(date, 7), format(date, "yyyy-MM-dd")처럼 직관적이고 읽기 쉬움

2. 트리 셰이킹 지원

• 필요한 함수만 가져올 수 있어 번들 크기가 작음

3. 로케일 지원

• 한국어, 영어, 일본어 등 다양한 언어의 날짜 표기 가능

4. 순수 함수

• 원본 Date 객체를 변경하지 않고 새로운 값을 반환

자주 쓰는 기능과 예시

날짜 포맷팅

import { format } from "date-fns";
import { ko } from "date-fns/locale";

const today = new Date();
console.log(format(today, "yyyy년 M월 d일", { locale: ko }));
// 출력: 2025년 9월 17일

날짜 연산

import { addDays, subWeeks } from "date-fns";

const today = new Date();
const nextWeek = addDays(today, 7); // 7일 뒤
const lastWeek = subWeeks(today, 1); // 1주일 전

비교

import { isBefore, isSameDay } from "date-fns";

const d1 = new Date(2025, 8, 17);
const d2 = new Date(2025, 8, 18);

console.log(isBefore(d1, d2)); // true
console.log(isSameDay(d1, d2)); // false

범위

import { startOfMonth, endOfMonth } from "date-fns";

const today = new Date();
console.log(startOfMonth(today)); // 이번 달 첫째 날
console.log(endOfMonth(today));   // 이번 달 마지막 날