[ moment.js ] react로 날짜를 관리하는 쉽고 빠른 방법

react-big-calendar을 이용하기 위해서 moment를 접하고

개인 프로젝트를 진행하면서 알음알음 사용한 moment에 대한 기록

 

기본 지식

1. react-big-calendar은 moment가 필요하다

2. moment는 아주 편리하다!

 

 

 

moment.js를 사용하면 좋은 점

: 날짜 포멧이 정말 !! 쉽다

: 달력날짜를 구하기도 쉽다

: 원하는 지역, 위치의 시간을 받아올 수도 있다

 

 

 

 

 

 

설치

npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor
bower install moment --save # bower (deprecated)

중 하나를 골라 설치하면 된다.

나는 역시 yarn add.

 

 

 

moment로 데이터 포멧하기

Format Dates

moment().format('MMMM Do YYYY, h:mm:ss a'); // 2월 16일 2022, 2:32:47 오후
moment().format('dddd');                    // 수요일
moment().format("MMM Do YY");               // 2월 16일 22
moment().format('YYYY [escaped] YYYY');     // 2022 escaped 2022
moment().format();                          // 2022-02-16T14:32:47+09:00

 

Relative Time

moment("20111031", "YYYYMMDD").fromNow(); // 10년 전
moment("20120620", "YYYYMMDD").fromNow(); // 10년 전
moment().startOf('day').fromNow();        // 15시간 전
moment().endOf('day').fromNow();          // 9시간 후
moment().startOf('hour').fromNow();       // 33분 전

 

 

Calendar Time

moment().subtract(10, 'days').calendar(); // 2022.02.06.
moment().subtract(6, 'days').calendar();  // 지난주 목요일 오후 2:33
moment().subtract(3, 'days').calendar();  // 지난주 일요일 오후 2:33
moment().subtract(1, 'days').calendar();  // 어제 오후 2:33
moment().calendar();                      // 오늘 오후 2:33
moment().add(1, 'days').calendar();       // 내일 오후 2:33
moment().add(3, 'days').calendar();       // 토요일 오후 2:33
moment().add(10, 'days').calendar();      // 2022.02.26.

 

 

Multiple Locale Support

moment.locale();         // ko
moment().format('LT');   // 오후 2:33
moment().format('LTS');  // 오후 2:33:57
moment().format('L');    // 2022.02.16.
moment().format('l');    // 2022.02.16.
moment().format('LL');   // 2022년 2월 16일
moment().format('ll');   // 2022년 2월 16일
moment().format('LLL');  // 2022년 2월 16일 오후 2:33
moment().format('lll');  // 2022년 2월 16일 오후 2:33
moment().format('LLLL'); // 2022년 2월 16일 수요일 오후 2:33
moment().format('llll'); // 2022년 2월 16일 수요일 오후 2:33

 

 

Time from now

moment([2007, 0, 29]).fromNow();     // 4 years ago
moment([2007, 0, 29]).fromNow(true); // 4 years

 

Time from X

var a = moment([2007, 0, 28]);
var b = moment([2007, 0, 29]);
a.from(b);                     // "a day ago"
a.from([2007, 0, 29]);         // "a day ago"
a.from(new Date(2007, 0, 29)); // "a day ago"
a.from("2007-01-29");          // "a day ago"

 

 

Time to Now

moment([2007, 0, 29]).toNow();     // in 4 years
moment([2007, 0, 29]).toNow(true); // 4 years

 

 

Add

moment().add(7, 'days');
// ==
moment().add(7, 'd');

// 시간을 다양하게 더할 수 있다
moment().add(1000000, 'milliseconds'); // a million milliseconds
moment().add(360, 'days'); // 360 days

 

.

.

.

 

 

 

 

 

 

사실 가장 좋은 방법은

https://momentjs.com/docs/#/displaying/

Moment.js | Docs

공식문서를 읽어보는 것이다

공식문서 중 Desplay에 관한 부분

여러가지 포멧과 token, output이 잘 설명되어 있으니 한번 보는 것을 추천

정작 나는 어제 개인 프로젝트를 진행하면서 공식문서를 안보고 타입 정의만 백번 읽었지만...

우리들의 손목과 허리와 눈 건강을 위해 공식문서를 빠르게 읽어보시는게.. 최고!

지금으로부터 경과한 시간 / X시점으로부터 경과한 시간 / X시점까지 걸리는 시간 

Calendar Time / 시간 차이 / unix 시간 / date / days / array / JSON 까지

 

만드는 웹에서 날짜와 시간을 사용할 일이 많다면 꼭 한번 읽어봤으면 하는 바램!

 

 

 

 

 

timezone을 위해서는 

npm install moment-timezone --save

를 설치해 줘야 한다는데.. 이건 다음시간에