Day.js: JavaScript 날짜 라이브러리

가볍고 강력한 JavaScript 날짜 라이브러리, day.js

JavaScript에서 날짜와 시간을 다루는 작업은 종종 복잡하고 번거로울 수 있습니다. 이러한 문제를 해결하기 위해 다양한 날짜 라이브러리가 개발되었으며, 그 중에서도 Day.js는 가볍고 사용하기 쉬운 솔루션으로 많은 개발자들의 사랑을 받고 있습니다. 이 글에서는 Day.js의 목적, 주요 기능, 사용 방법 및 다른 라이브러리와의 차이점에 대해 알아보겠습니다.

Day.js의 목적

Day.js는 2KB 미만의 초경량 JavaScript 라이브러리로, 날짜와 시간을 파싱, 검증, 조작, 표시하는 기능을 제공합니다. 이 라이브러리의 주요 목적은 다음과 같습니다:

Moment.js와 호환되는 API를 제공하면서도 훨씬 가벼운 대안 제공
불변성(Immutability) 원칙을 따라 예측 가능한 코드 작성 지원
모듈식 구조로 필요한 기능만 선택적으로 사용 가능
다양한 브라우저 환경에서 일관된 날짜 처리 기능 제공

Day.js 설치 및 기본 사용법

Day.js는 npm, yarn 또는 CDN을 통해 쉽게 설치할 수 있습니다:

npm을 사용한 설치:

npm install dayjs

yarn을 사용한 설치:

yarn add dayjs

CDN을 통한 사용:

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

기본 사용 예시:

// 모듈 가져오기
import dayjs from 'dayjs'

// 현재 날짜 및 시간
const now = dayjs()
console.log(now.format('YYYY-MM-DD HH:mm:ss'))

// 특정 날짜 생성
const christmas = dayjs('2023-12-25')
console.log(christmas.format('MMMM D, YYYY')) // December 25, 2023

// 날짜 조작
const tomorrow = dayjs().add(1, 'day')
const lastMonth = dayjs().subtract(1, 'month')

// 날짜 비교
const isBefore = dayjs('2022-01-01').isBefore('2023-01-01') // true

Day.js의 주요 옵션과 기능

1. 날짜 파싱

Day.js는 다양한 형식의 입력을 파싱할 수 있습니다:

dayjs() // 현재 날짜와 시간
dayjs('2023-10-20') // ISO 8601 형식
dayjs('2023/10/20')
dayjs(new Date()) // JavaScript Date 객체
dayjs(1318781876406) // Unix 타임스탬프(밀리초)

2. 날짜 포맷팅

format() 메서드를 사용하여 다양한 형식으로 날짜를 표시할 수 있습니다:

dayjs().format() // '2023-10-20T15:30:45+09:00'
dayjs().format('YYYY-MM-DD') // '2023-10-20'
dayjs().format('MMMM D, YYYY') // 'October 20, 2023'
dayjs().format('HH:mm:ss') // '15:30:45'
dayjs().format('ddd, MMM D YY, h:mm A') // 'Fri, Oct 20 23, 3:30 PM'

3. 날짜 조작

날짜를 쉽게 조작할 수 있는 메서드를 제공합니다:

// 날짜 더하기
dayjs().add(7, 'day')
dayjs().add(1, 'month')

// 날짜 빼기
dayjs().subtract(1, 'year')

// 날짜 설정
dayjs().set('month', 3) // 4월로 설정 (0부터 시작)
dayjs().set('date', 15) // 15일로 설정

// 시작과 끝
dayjs().startOf('month') // 이번 달의 첫 날
dayjs().endOf('year') // 올해의 마지막 날

4. 날짜 비교 및 검증

// 비교
dayjs('2023-10-20').isBefore('2023-10-21') // true
dayjs('2023-10-20').isAfter('2023-10-19') // true
dayjs('2023-10-20').isSame('2023-10-20') // true

// 차이 계산
dayjs('2023-10-20').diff(dayjs('2023-10-10'), 'day') // 10

플러그인 시스템

Day.js는 모듈식 구조로 설계되어 있어 필요한 기능만 플러그인으로 추가할 수 있습니다. 이는 번들 크기를 최소화하는 데 도움이 됩니다.

주요 플러그인 예시:

RelativeTime: “3시간 전”, “2일 후”와 같은 상대적 시간 표현
LocalizedFormat: 지역화된 날짜 형식 지원
UTC: UTC 모드 지원
Timezone: 타임존 지원
AdvancedFormat: 추가 포맷팅 옵션 제공
IsBetween: 날짜가 특정 범위 내에 있는지 확인

플러그인 사용 예시:

// 플러그인 가져오기
import relativeTime from 'dayjs/plugin/relativeTime'
import utc from 'dayjs/plugin/utc'

// 플러그인 등록
dayjs.extend(relativeTime)
dayjs.extend(utc)

// 사용
dayjs().fromNow() // '방금 전'
dayjs().utc().format() // UTC 시간으로 포맷팅

다른 날짜 라이브러리와의 비교

1. Day.js vs Moment.js

크기: Day.js는 2KB 미만, Moment.js는 약 300KB로 Day.js가 훨씬 가벼움
API: Day.js는 Moment.js의 API와 호환되도록 설계되어 마이그레이션이 쉬움
불변성: Day.js는 불변 객체를 반환하여 예측 가능성이 높음
유지보수: Moment.js는 현재 유지보수 모드로 전환된 반면, Day.js는 활발히 개발 중

2. Day.js vs date-fns

구조: date-fns는 함수형 접근 방식을, Day.js는 체이닝 방식을 사용
크기: date-fns는 모듈식이지만 전체 번들 크기는 Day.js보다 큼
성능: date-fns는 일부 작업에서 더 나은 성능을 보일 수 있음
사용 편의성: Day.js는 체이닝 API로 더 직관적인 코드 작성 가능

3. Day.js vs Luxon

기능: Luxon은 더 많은 고급 기능을 제공하지만 크기가 더 큼
타임존: Luxon은 기본적으로 더 강력한 타임존 지원을 제공
크기와 간결함: Day.js가 더 가볍고 간결한 API 제공

Day.js의 장점

초경량: 2KB 미만의 크기로 성능에 미치는 영향 최소화
쉬운 API: 직관적이고 배우기 쉬운 체이닝 API 제공
불변성: 날짜 조작 시 원본 객체를 변경하지 않아 예측 가능한 코드 작성 가능
모듈식 구조: 필요한 기능만 선택적으로 사용하여 번들 크기 최적화
Moment.js 호환성: Moment.js에서 쉽게 마이그레이션 가능
국제화: 다양한 언어와 지역 설정 지원
활발한 커뮤니티: 지속적인 업데이트와 지원

실제 사용 사례

1. 날짜 범위 계산

// 두 날짜 사이의 일수 계산
const start = dayjs('2023-10-01')
const end = dayjs('2023-10-15')
const daysDiff = end.diff(start, 'day') // 14

// 특정 기간 내 모든 날짜 생성
const getDatesInRange = (startDate, endDate) => {
  const dates = []
  let currentDate = dayjs(startDate)
  
  while (currentDate.isBefore(endDate) || currentDate.isSame(endDate)) {
    dates.push(currentDate.format('YYYY-MM-DD'))
    currentDate = currentDate.add(1, 'day')
  }
  
  return dates
}

const allDates = getDatesInRange('2023-10-01', '2023-10-05')
// ['2023-10-01', '2023-10-02', '2023-10-03', '2023-10-04', '2023-10-05']

2. 상대적 시간 표시

import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/ko' // 한국어 로케일

dayjs.extend(relativeTime)
dayjs.locale('ko') // 한국어 설정

const postDate = dayjs('2023-10-15')
postDate.fromNow() // '5일 전'

3. 날짜 유효성 검사

// 유효한 날짜인지 확인
const isValidDate = dayjs('2023-13-45').isValid() // false

// 특정 조건에 맞는 날짜인지 확인
const isWeekend = (date) => {
  const day = dayjs(date).day()
  return day === 0 || day === 6 // 0은 일요일, 6은 토요일
}

isWeekend('2023-10-21') // true (토요일)

결론

Day.js는 가볍고 사용하기 쉬운 JavaScript 날짜 라이브러리로, 현대 웹 개발에서 날짜와 시간을 다루는 최적의 솔루션 중 하나입니다. Moment.js와 호환되는 API를 제공하면서도 훨씬 작은 크기와 모듈식 구조를 갖추고 있어, 성능과 사용자 경험을 모두 고려하는 개발자들에게 이상적인 선택입니다.

특히 번들 크기에 민감한 프로젝트나 모바일 환경에서 실행되는 애플리케이션에서 Day.js는 탁월한 선택이 될 수 있습니다. 필요한 기능만 선택적으로 추가할 수 있는 플러그인 시스템은 불필요한 코드를 최소화하면서도 강력한 날짜 처리 기능을 제공합니다.

날짜와 시간 처리가 필요한 다음 프로젝트에서는 Day.js를 고려해보세요. 간결하면서도 강력한 API로 날짜 관련 작업을 훨씬 쉽고 효율적으로 처리할 수 있을 것입니다.