4.Moment.js 와 Day.js 사용법

1.Moment Js 란?

  날짜와 시간에 관련된 데이터의 파싱, 검증 조작 등을 위해 만들어진 유용한 라이브러리입니다.

  이전에 Date 객체를 이용하여 날짜와 시간에 관련된 연산을 할 때는 별도의 공통 함수를 만들어 사용해야 하지만

  Moment Js를 사용하면 내장된 함수를 이용하여 간단하게 처리 가 가능하다 

  단점으로 용량이 무겁다 라고 정의 내릴 수 있습니다

 

https://momentjs.com/

Moment.js | Home

npm install moment --save

공식문서 직접  사용된 예제 방식입니다.

Format Dates

moment().format('MMMM Do YYYY, h:mm:ss a'); // 9월 21일 2021, 11:25:57 오후
moment().format('dddd');                    // 화요일
moment().format("MMM Do YY");               // 9월 21일 21
moment().format('YYYY [escaped] YYYY');     // 2021 escaped 2021
moment().format();

Relative Time

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

Calendar Time

moment().subtract(10, 'days').calendar(); // 2021.09.11.
moment().subtract(6, 'days').calendar();  // 지난주 수요일 오후 11:29
moment().subtract(3, 'days').calendar();  // 지난주 토요일 오후 11:29
moment().subtract(1, 'days').calendar();  // 어제 오후 11:29
moment().calendar();                      // 오늘 오후 11:29
moment().add(1, 'days').calendar();       // 내일 오후 11:29
moment().add(3, 'days').calendar();       // 금요일 오후 11:29
moment().add(10, 'days').calendar();      //2021.10.01

Multiple Locale Support

moment.locale();         // ko
moment().format('LT');   // 오후 11:30
moment().format('LTS');  // 오후 11:30:29
moment().format('L');    // 2021.09.21.
moment().format('l');    // 2021.09.21.
moment().format('LL');   // 2021년 9월 21일
moment().format('ll');   // 2021년 9월 21일
moment().format('LLL');  // 2021년 9월 21일 오후 11:30
moment().format('lll');  // 2021년 9월 21일 오후 11:30
moment().format('LLLL'); // 2021년 9월 21일 화요일 오후 11:30
moment().format('llll'); // 2021년 9월 21일 화요일 오후 11:30

2,. Day Js 란?!

 "Moment.js"와 호환되는 API를 경량 라이브러리입니다.

https://github.com/iamkun/dayjs

GitHub - iamkun/dayjs: ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API

2-1.npm 설치 예제입니다

npm install dayjs --save

import dayjs from 'dayjs'

2-2.isSame을 활용한 format 예제입니다.

isSame() 메서드는 날짜/시간이 같은지 비교하여 true 또는 false를 반환합니다.

현재 시간 가져오기를 해보았습니다.

const isSame =date.isSame(this.todo.updatedAt)
    if(isSame){
       return date.format('YYYY년 MM월 DD 일') 
      	}else{
       return `${date.format('YYYY년 MM월 DD 일')} (edited)`
 	 }