728x90
728x90

Moment.js 라이브러리

들어가며

  • 자바스크립트(JavaScript)에날짜와 시간을 처리하기 위해 많이 사용되는 Moment.js 라이브러리에 대해 정리해본다.

 

moment.js

개념

  • 자바스크립트에서 날짜와 시간을 처리하기 위해 사용되는 인기 있는 라이브러리
  • 날짜 및 시간 계산, 형식화, 파싱, 시간대 변환, 상대적인 시간 표현 등을 쉽게 처리할 수 있도록 도와준다.
  • 자바스크립트의 기본 @Date@ 객체와 비교하여 훨씬 더 직관적이고 강력한 기능을 제공한다.
  • 2020년부터 Moment.js유지보수 전용 모드로 전환되었고, 새로운 프로젝트에서는 Day.jsLuxon, Date-fns과 같은 다른 라이브러리를 대신 사용하도록 권장되고 있다. (하지만 여전히 많은 프로젝트에서 사용되고 있다.)
    • Day.js
      • Moment.js와 매우 유사하지만 가볍고 빠른 라이브러리
      • Moment.js와 완벽하게 호환된다.
    • Luxon
      • 보다 강력한 날짜와 시간 처리 기능 제공
      • @Intl@ 기반
        • Internationalization API
        • 자바스크립트에서 날짜, 시간, 숫자, 통화 등의 데이터를 다양한 언어와 지역에 맞게 국제화하고 지역화할 수 있도록 지원하는 내장 API
    • Date-fns
      • 함수형 라이브러리
      • 필요한 기능만 임포트하여 사용 가능
 

Moment.js | Home

Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD"

momentjs.com

 

주요 기능

날짜 생성 및 현재 시간 표시

// 현재 시간
const now = moment();
console.log(now.format());  // ISO 8601 형식

// 특정 날짜
const date = moment('2024-11-14');
console.log(date.format('YYYY-MM-DD'));  // 2024-11-14

// 날짜와 시간 (시간 포함)
const datetime = moment('2024-11-14 15:30:00');
console.log(datetime.format('YYYY-MM-DD HH:mm:ss'));  // 2024-11-14 15:30:00

 

날짜 포맷팅

const date = moment('2024-11-14');

console.log(date.format('YYYY-MM-DD'));  // 2024-11-14
console.log(date.format('MMMM Do YYYY'));  // November 14th 2024
console.log(date.format('dddd, MMMM Do YYYY'));  // Thursday, November 14th 2024

 

날짜 파싱

const date = moment('11/14/2024', 'MM/DD/YYYY');

console.log(date.format());  // 2024-11-14T00:00:00-05:00

 

날짜 계산

const now = moment();

// 5일 후
console.log(now.add(5, 'days').format('YYYY-MM-DD'));  // 2024-11-19

// 3개월 전
console.log(now.subtract(3, 'months').format('YYYY-MM-DD'));  // 2024-08-19

 

날짜 비교

const date1 = moment('2024-11-14');
const date2 = moment('2024-11-15');

console.log(date1.isBefore(date2));  // true
console.log(date1.isAfter(date2));   // false
console.log(date1.isSame(date2));    // false

 

상대적인 시간 표시

  • '5분 전', '2일 후' 등 상대적인 시간 표현을 지원한다.
const now = moment();
const past = moment().subtract(10, 'days');
const future = moment().add(2, 'days');

console.log(now.from(past));  // 10 days ago
console.log(now.to(future));  // in 2 days
console.log(now.fromNow());   // a few seconds ago

 

시간대 지원

  • @moment-timezone@이라는 추가 플러그인을 통해 시간대 변환을 지원한다.
const moment = require('moment-timezone');

const newYorkTime = moment.tz("2024-11-14 12:00", "America/New_York");
console.log(newYorkTime.format());  // 2024-11-14T12:00:00-05:00

const londonTime = newYorkTime.clone().tz("Europe/London");
console.log(londonTime.format());  // 2024-11-14T17:00:00+00:00

 

유효성 검사

  • 날짜가 유효한지 확인할 수 있는 메서드를 제공한다.
const validDate = moment('2024-11-14');
console.log(validDate.isValid());  // true

const invalidDate = moment('2024-14-11');
console.log(invalidDate.isValid());  // false

 

참고 사이트

 

Moment.js | Docs

moment.relativeTimeThreshold(unit); // getter moment.relativeTimeThreshold(unit, limit); // setter duration.humanize has thresholds which define when a unit is considered a minute, an hour and so on. For example, by default more than 45 seconds is consider

momentjs.com

 

moment

Parse, validate, manipulate, and display dates. Latest version: 2.30.1, last published: a year ago. Start using moment in your project by running `npm i moment`. There are 71751 other projects in the npm registry using moment.

www.npmjs.com

 

728x90
728x90