자바스크립트 날짜 다루기: Date vs dayjs vs date-fns

웹 애플리케이션에서 날짜와 시간을 다루는 작업은 매우 흔하지만, 자바스크립트의 기본 Date 객체만으로는 복잡한 날짜 계산이나 포맷 변경 등을 처리하기 까다롭습니다. 이를 보완하기 위해 등장한 라이브러리들이 dayjs, date-fns이며, 두 라이브러리는 moment.js의 대안으로 널리 쓰이고 있습니다.

이 글에서는 자바스크립트에서 날짜를 다루는 세 가지 방법을 비교하고, 각각의 특징과 사용법을 예제로 정리합니다.

---

✅ 기본 내장 객체: Date

const now = new Date();
console.log(now.toISOString()); // 현재 시간 ISO 포맷

const specific = new Date("2024-04-01T12:00:00");
console.log(specific.getFullYear()); // 2024

• 브라우저 내장 객체로 별도 설치 없이 사용 가능
• 기능은 많지만 직관적이지 않고 메서드 일관성이 부족
• 시간대(Timezone) 처리나 포맷 지정이 불편함

---

📦 dayjs: 가볍고 moment.js와 유사한 API

npm install dayjs

import dayjs from "dayjs";

const now = dayjs();
console.log(now.format("YYYY-MM-DD HH:mm"));

const added = now.add(3, 'day');
console.log(added.format("MMM D"));

• moment.js와 거의 동일한 API 제공
• 파일 크기 작고 성능 우수
• 체이닝이 간결하고 직관적
• immutable 구조

---

📦 date-fns: 함수 단위 조합형 유틸리티

npm install date-fns

import { format, addDays, parseISO } from "date-fns";

const now = new Date();
console.log(format(now, "yyyy-MM-dd HH:mm"));

const added = addDays(now, 5);
console.log(format(added, "MMM d"));

• 함수 기반 모듈화 구조
• 트리 셰이킹(Tree-shaking)에 최적화되어 빌드 크기 절감
• 지역화(다국어) 지원 강력함
• 기존 Date 객체와 자연스럽게 호환

---

🔍 비교 요약

항목	Date (기본)	dayjs	date-fns
설치 필요	❌	✅ (dayjs)	✅ (date-fns)
체이닝 지원	❌	✅	❌ (함수형 조합)
포맷 지원	제한적	강력함 (.format)	강력함 (format)
다국어 지원	❌	플러그인 필요	✅ 기본 지원
파일 크기	작음	작음 (~2KB)	작음 + 트리 셰이킹
사용성	복잡	직관적	모듈화 유연

---

✨ 결론

• 단순한 날짜만 다룰 경우에는 Date도 충분하지만, 포맷이나 계산이 많아지면 라이브러리 사용이 권장됩니다.
• 체이닝 중심으로 사용하고 싶다면 dayjs
• 함수형 스타일과 빌드 최적화를 원한다면 date-fns

각 프로젝트의 특성과 스타일에 맞게 라이브러리를 선택하면 유지보수성과 생산성을 높일 수 있습니다.