WEB개발이야기/웹퍼블리싱

Day.js vs Moment.js: 날짜 처리 라이브러리 비교 분석 (초보자를 위한 가이드)

어쩌다보니여기까지~ 2024. 2. 22. 18:59
반응형

JavaScript에서 날짜 처리를 위한 라이브러리는 필수적인 요소입니다. 다양한 날짜 형식을 다루고, 계산하고, 포맷팅하는 작업을 쉽게 해주죠. 그 중 가장 인기 있는 라이브러리로는 Moment.jsday.js가 있습니다. 과연 어떤 라이브러리가 더 나은 선택일까요?

1. 비교 분석

기준 day.js Moment.js
크기 (gzip) 2.1KB 22.9KB
성능 약 1.4배 빠름 -
API Moment.js와 유사, 변경 불가능 객체 사용 다양한 함수 제공, 객체 직접 수정 가능
기능 핵심 기능 집중, 플러그인을 통한 확장 가능 다양한 기능 제공
지원 활발하게 개발 중, 커뮤니티 성장 중 탄탄한 지원 체계, 활발한 커뮤니티
브라우저 지원 IE 11 지원하지 않음 IE 11까지 지원
장점 가볍고 빠름, 사용 편의성, 새로운 기술 적용 다양한 기능, 탄탄한 지원 체계, 풍부한 샘플 코드 및 플러그인
단점 기능 부족, 커뮤니티 규모 크기가 크고 느림, 새로운 기술 적용 부족
적합한 프로젝트 페이지 로딩 속도 중요, 최소한 기능 필요, 새로운 라이브러리 적용 다양한 기능 필요, 탄탄한 지원 체계 필요, 기존 Moment.js 코드 유지

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/