반응형
JavaScript에서 날짜 처리를 위한 라이브러리는 필수적인 요소입니다. 다양한 날짜 형식을 다루고, 계산하고, 포맷팅하는 작업을 쉽게 해주죠. 그 중 가장 인기 있는 라이브러리로는 Moment.js와 day.js가 있습니다. 과연 어떤 라이브러리가 더 나은 선택일까요?
1. 비교 분석
| 기준 | day.js | Moment.js |
|---|---|---|
| 크기 (gzip) | 2.1KB | 22.9KB |
| 성능 | 약 1.4배 빠름 | - |
| API | Moment.js와 유사, 변경 불가능 객체 사용 | 다양한 함수 제공, 객체 직접 수정 가능 |
| 기능 | 핵심 기능 집중, 플러그인을 통한 확장 가능 | 다양한 기능 제공 |
| 지원 | 활발하게 개발 중, 커뮤니티 성장 중 | 탄탄한 지원 체계, 활발한 커뮤니티 |
| 브라우저 지원 | IE 11 지원하지 않음 | IE 11까지 지원 |
| 장점 | 가볍고 빠름, 사용 편의성, 새로운 기술 적용 | 다양한 기능, 탄탄한 지원 체계, 풍부한 샘플 코드 및 플러그인 |
| 단점 | 기능 부족, 커뮤니티 규모 | 크기가 크고 느림, 새로운 기술 적용 부족 |
| 적합한 프로젝트 | 페이지 로딩 속도 중요, 최소한 기능 필요, 새로운 라이브러리 적용 | 다양한 기능 필요, 탄탄한 지원 체계 필요, 기존 Moment.js 코드 유지 |
npm trends 분석
npm trends에서 All time으로 비교를 해보면 현재 추세를 알 수 있는데, 기존에는 Moment.js가 압승이였다면 최근에는 day.js가 무섭게 치고 올라오는 것을 볼 수 있습니다.
아마도 곧 day.js가 날짜를 다루는 대세 모듈이 되지 않을까 합니다.
day.js 사용법
설치
설치는 간단하게 npm 설치하는 방식으로 프로젝트에 추가를 하면 됩니다.
npm install -S dayjs 기본 사용
Day.js는 아래와 같은 다양한 형식으로 사용됩니다.
- 블로그 게시글 작성 날짜 표시
- 댓글 작성 시간 표시
- 이벤트 카운트다운
- 생년월일 기반 나이 계산
- 특정 날짜 기념일 알림
- 예약 시스템 날짜 선택
기본적인 사용방법에 대한 예시는 아래를 참고하세요.
const day = dayjs(); // 현재 날짜 // 날짜 출력 console.log(day.toString()); // "2024-02-22T06:28:00.000Z" console.log(day.format("YYYY년 MM월 DD일")); // "2024년 2월 22일" // 날짜 조작 day.add(1, "day"); // 하루 더하기 day.subtract(1, "month"); // 한 달 빼기 day.set("year", 2023); // 연도 변경 // 유효성 검사 day.isValid(); // true // 요일 추출 day.day(); // 3 (목요일) // 주 번호 추출 day.week(); // 8 // 두 날짜 비교 day.isBefore("2024-03-01"); // true 포맷팅
Day.js는 다양한 포맷 옵션을 제공하여 원하는 형식으로 날짜를 표현할 수 있습니다.
day.format("YYYY-MM-DD"); // "2024-02-22" day.format("ddd, MMM Do YYYY"); // "목, 2월 22일 2024" day.format("h:mm:ss a"); // "오후 6:28:00" // 사용자 정의 포맷 day.format("dddd, MMMM Do YYYY, h:mm:ss A"); // "목요일, 2월 22일 2024, 오후 6:28:00 PM" 날짜 계산
Day.js는 다양한 날짜 계산 기능을 제공합니다.
// 특정 날짜 생성 const birthday = dayjs("1990-01-01"); // 나이 계산 const age = dayjs().diff(birthday, "year"); // 특정 요일 찾기 const nextMonday = dayjs().next("Monday"); // 특정 날짜 사이의 간격 계산 const daysBetween = dayjs().diff("2024-12-31", "day"); 로케일 설정
Day.js는 다양한 언어를 지원합니다.
import dayjs from "dayjs"; import dayjsLocaleKo from "dayjs-locale-ko"; dayjs.extend(dayjsLocaleKo); dayjs.locale("ko"); // 한국어 날짜 표시 dayjs().format("YYYY년 MM월 DD일"); // "2024년 2월 22일" dayjs().format("ddd, MMM Do YYYY"); // "목, 2월 22일 2024" // 한국어 요일, 주 정보 dayjs().day(); // 3 (목요일) dayjs().week(); // 8 // 한국어 기간 표현 dayjs().diff("2024-12-31", "day"); // "314일 남음" 플러그인
Day.js는 다양한 플러그인을 통해 기능을 확장할 수 있습니다.
// 플러그인 설치 npm install dayjs-advanced-format // 플러그인 사용 dayjs.extend(dayjsAdvancedFormat); // 사용자 정의 포맷 사용 day.format("YYYY년 [W]주차"); // "2024년 8주차" 위의 예제 외에도 다양한 플러그인들이 존재합니다. 더 많은 정보를 보시려면 공식 홈페이지에서 찾아 보세요.
Day.js 공식 문서: https://day.js.org/
