Moment.js: 날짜 라이브러리에 대한 완전한 설명과 실제 예시

인포매텍 디지털 » 숙어 » Moment.js: 날짜 라이브러리에 대한 완전한 설명과 실제 예시

자바스크립트에서 날짜와 시간을 다루는 것은 웹 개발자에게 상당한 어려움이 될 수 있습니다 . 다행히 Moment.js와 같은 도구를 사용하면 이 과정이 크게 간소화되어 기본적인 날짜 형식 지정부터 복잡한 조작 및 유효성 검사 작업까지 훨씬 쉬워집니다. 프로젝트에서 날짜를 변환, 비교 또는 정확하게 표시하는 데 어려움을 느낀 적이 있다면 Moment.js가 큰 도움이 되었을 것이며, 적어도 사용을 고려해 볼 만합니다.

이 글에서는 Moment.js에 대해 알아야 할 모든 것을 알려드리겠습니다 . 주요 기능과 잘 알려지지 않은 유용한 팁부터 실용적인 예제, 다른 라이브러리와의 연동까지, 명확한 구문 설명과 Moment.js를 사용하여 수행할 수 있는 작업에 이르기까지 모든 것을 다룹니다. 또한 Moment.js의 한계점, 최근 업데이트, 그리고 더 최신의 대안을 찾고 있다면 어떤 것들이 있는지 살펴보겠습니다.

Moment.js란 무엇이고 왜 이렇게 인기를 얻었나요?

Moment.js는 날짜와 시간을 다루는 작업을 간편하게 만들어주는 JavaScript 라이브러리입니다 . 간단하면서도 강력한 구문을 사용하여 상상할 수 있는 거의 모든 형식으로 날짜를 생성, 구문 분석, 조작 및 표시할 수 있습니다. 수년간 이 라이브러리는 JavaScript의 기본 Date() 객체의 한계를 극복하는 데 있어 커뮤니티의 주요 해결책으로 자리매김해 왔습니다.

Moment.js의 핵심은 `moment()` 객체를 중심으로 작동하며 , 이 객체는 텍스트 문자열, Date 객체, 타임스탬프 또는 숫자 인수를 직접 사용하는 등 거의 모든 유효한 입력으로부터 날짜를 생성할 수 있습니다. 이러한 특징 덕분에 Moment.js는 매우 유연하며, 간단한 스크립트부터 국제 시간대 관리나 기록 관리와 같은 기업용 애플리케이션에 이르기까지 모든 종류의 프로젝트에서 유용하게 활용될 수 있습니다.

Moment.js 가 이토록 성공한 이유는 무엇일까요? 바로 뛰어난 안정성, 사용 편의성, 그리고 다양한 관련 도구와 플러그인 덕분입니다 . 프로젝트가 유지보수 모드에 들어갔음에도 불구하고, Moment.js는 여전히 많은 사용자 기반과 방대한 문서를 유지하며 JavaScript 및 Node.js 기반의 주요 데이터 솔루션으로서의 입지를 더욱 공고히 하고 있습니다 .

Moment.js의 주요 기능 및 이점

• 간단하고 직관적인 APIMoment.js의 가장 큰 장점 중 하나는 명확한 구문입니다. 현재 날짜를 가져오거나 문자열을 특정 형식으로 변환하는 것과 같은 간단한 작업은 물론, 복잡한 계산 및 검증도 단 몇 줄로 수행할 수 있습니다.
• 유연한 구문 분석 및 서식 지정거의 모든 형식의 날짜 문자열을 구문 분석하고 원하는 출력으로 변환하는 작업이 그 어느 때보다 쉬워졌습니다. Moment.js를 사용하면 사용자 정의 프레젠테이션에서 날짜를 빠르고 간편하게 형식화할 수 있습니다..
• 날짜 조작: 일, 월, 년, 주 또는 기타 시간 단위를 추가하거나 빼는 것은 다음 방법을 사용하는 것만큼 간단합니다. 더하다() y 덜다()이 기능은 상대 날짜, 마감일 또는 동적으로 변하는 기간을 다루어야 할 때 매우 유용합니다.
• 강력한 검증: 날짜가 유효한지 또는 존재하는지 확인해야 하는 경우(예: 30월 XNUMX일) Moment.js를 사용하면 간편하게 확인할 수 있습니다. 메서드 유효함() 날짜의 형식이나 논리에서 미묘한 오류를 감지할 수 있습니다.
• 시간대 및 지역화 지원: 귀하의 플러그인 덕분에 순간-시간대서로 다른 시간대 간의 날짜를 변환하는 것은 매우 쉽습니다. 또한 글로벌 애플리케이션에서 중요한 사용자 언어 및 지역 규칙에 맞게 날짜를 표시할 수도 있습니다.
• 플러그인 생태계: 기본 라이브러리 외에도 기능을 확장할 수 있는 플러그인 생태계가 있습니다(캘린더, 다른 프레임워크와의 호환성, 이국적인 형식 등).

프로젝트에서 Moment.js를 시작하는 방법

설치는 매우 간단합니다 . HTML에 Moment.js를 단 한 줄로 포함시킬 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Node.js나 최신 개발 환경을 사용하는 경우 npm이나 yarn을 사용하여 설치하는 것이 일반적입니다.

npm install moment

이 작업이 완료되면 사용하는 구문에 따라 Moment.js를 가져올 수 있습니다.

// Versión CommonJS
var moment = require('moment');
moment().format();

// ES6
import moment from 'moment';
moment().format();

날짜 생성: 다양한 방법과 실제 사례

날짜를 쉽게 생성하세요

현재 날짜와 시간을 얻으려면, 간단히 사용하다 moment():

console.log(moment()); // Devuelve la fecha actual en formato ISO8601

인수를 전달하여 특정 날짜를 구성할 수 있습니다.

moment("2022-10-14"); // Crea el 14 de octubre de 2022

엄격 모드에서도 주어진 문자열과 형식으로 시작할 수 있습니다.

moment("25/12/1995", "DD/MM/YYYY", true); // Analiza y comprueba el formato

네이티브 Date 객체가 있나요?

const fechaJS = new Date();
const miFecha = moment(fechaJS);

날짜 형식 지정 및 표시

Moment.js를 사용하면 원하는 모든 형식으로 날짜를 표시할 수 있습니다 . 예를 들어 현재 날짜를 일/월/년 형식으로 표시하려면 다음과 같이 합니다.

moment().format('DD/MM/YYYY');

좀 더 인간적인 체인을 원하시면 다음을 사용하세요.

moment().format('MMMM Do YYYY, h:mm:ss a'); // Ejemplo: "marzo 8º 2024, 3:21:10 pm"

서식 지정에 유용한 몇 가지 토큰 :

• YYYY: 4자리 연도
• MM: 나의
• DD: 그 달의 일
• hh o HH: 시간(12시간 또는 24시간 형식)
• mm: 분
• ss: 초
• a: 오전/오후

예를 들어, 시간만 표시하려면 다음을 실행합니다.

moment().format('HH:mm:ss');

토큰 및 지역 지원을 통한 고급 포맷팅

Moment.js는 다양한 지역화 형식과 번역을 지원합니다 . 월과 일 이름을 다른 언어로 표시하도록 언어를 즉시 전환할 수 있습니다.

moment.locale('es'); // Cambia a español
document.write(moment().format('LLLL'));
// Ejemplo: martes, 8 de marzo de 2024 15:21

날짜 조작: 더하기, 빼기, 비교

상대적 날짜를 다루는 것은 Moment.js의 장점 중 하나입니다.

• 일, 월 또는 연도를 추가하세요:

  moment().add(3, 'days').format('DD/MM/YYYY');

• 단위 빼기:

  moment().subtract(2, 'months').format('DD/MM/YYYY');

• 기간의 시작과 끝:

  moment().startOf('month').format('DD/MM/YYYY'); // Primer día del mes
  moment().endOf('month').format('DD/MM/YYYY');   // Último día del mes

날짜 검증 및 오류 감지

날짜를 사용하기 전에 날짜가 올바른지 확인하는 것이 중요합니다.

moment('2024-02-30', 'YYYY-MM-DD').isValid(); // false, el 30 de febrero no existe

이렇게 하면 사용자가 날짜를 입력하는 애플리케이션에서 예기치 않은 버그가 발생하는 것을 방지할 수 있습니다.

날짜 비교: 날짜가 다른 날짜와 같은지 확인하세요

Moment.js에는 날짜를 비교하는 여러 가지 방법이 포함되어 있습니다.

• isBefore(): 어떤 날짜가 다른 날짜보다 앞인지 확인합니다.
• isAfter(): 날짜가 나중인지 확인합니다.
• 사이에 있습니다(): 날짜가 두 주어진 날짜 사이에 있는지 여부를 나타냅니다.

let hoy = moment();
let ayer = moment().subtract(1, 'days');
console.log(hoy.isAfter(ayer)); // true

시간대 및 국제 날짜 처리

전 세계 여러 지역의 사용자와 협업할 때 시간대는 큰 골칫거리가 될 수 있습니다 . moment-timezone 플러그인을 사용하면 지역 간 날짜 변환을 간편하게 처리할 수 있습니다.

const moment = require('moment-timezone');
const fechaUTC = moment('2024-05-25');
const fechaNY = fechaUTC.tz('America/New_York').format('YYYY-MM-DD HH:mm:ss');
console.log(fechaNY);
// Ejemplo: "2024-05-24 20:00:00"

또한 Moment.js는 사용자의 지역 설정에 맞춰 날짜를 표시할 수 있으며 , 월과 일의 이름을 정확하게 번역하여 보여줍니다.

주요 사용 예 및 고급 팁

날짜 간 차이점 가져오기

두 날짜 사이의 경과 시간을 다른 단위로 계산할 수 있습니다.

let inicio = moment('2024-01-01');
let fin = moment('2024-03-08');
let dias = fin.diff(inicio, 'days'); // Devuelve el número de días entre ambas

상대적 날짜와 인간 시간

Moment.js는 "3일 전"이나 "5시간 후"와 같은 메시지를 표시하는 데 적합합니다.

moment().subtract(3, 'days').fromNow(); // "hace 3 días"
moment().add(2, 'hours').fromNow();    // "en 2 horas"

인간의 달력

calendar () 함수는 "어제 오후 5시", "내일 오전 9시"와 같이 상대적인 날짜를 표시하므로 캘린더 앱에서 매우 유용하게 사용할 수 있습니다.

moment().subtract(1, 'days').calendar(); // "Ayer a las..."
moment().add(3, 'days').calendar();     // "Próximo martes a las..."

연도 점프 및 특별일 지원

올해가 윤년인지 알고 싶으신가요?

moment([2024]).isLeapYear(); // true

isLeapYear() 메서드는 답을 직접 반환합니다.

고급 사용자 정의: 형식, 토큰 및 엄격한 구문 분석

Moment.js를 사용하면 사용자 지정 문자열과 토큰을 이용하여 무수히 많은 형식의 날짜를 생성하거나 읽을 수 있습니다 . 또한, 엄격 모드에서는 정확한 일치만 요구하므로 미묘한 오류나 예상치 못한 상황을 방지할 수 있습니다.

예를 들어, "일/월/년" 형식의 날짜를 구문 분석하려면 다음을 수행합니다.

moment('12/03/2023', 'DD/MM/YYYY', true);

일반 토큰 및 예시 목록

• 년: YYYY(2024), YY(24), Y(-500)
• 월: MM (01 – 12), MMM (XNUMX월), MMMM (XNUMX월)
• DIA: DD(01~31), C(1~31)
• 시간: HH(00~23), hh(01~12), mm(분), ss(초)
• 시간대: Z, ZZ

이러한 토큰을 조합하여 완전히 사용자 정의된 출력을 생성할 수 있습니다. 전체 목록과 특수 사례는 설명서를 참조하세요.