Moment.js - 날짜 라이브러리

박영은·2022년 1월 13일
0

Study

목록 보기
6/9

- Moment.js

가장 많이 쓰이는 대표적인 날짜 라이브러리.
작년 중후반 쯤 개발을 중단한다고 공지했지만, 이미 너무 많이 쓰이고 대표적인 날짜 라이브러리라서

  • 중요한 보안문제 발생 시에는 해결할 것
  • JANA time zone 데이터베이스 출시에 따라 Moment-Timezone에 대한 업데이트를 출시할 예정
  • 또한 JavaScript 언어에서 더이상 date와 time에 관한 라이브러리를 사용할 필요가 없도록 JavaScript 언어 자체 내에 API(Temporal)를 추가할 것을 제안한 상태
    (2021.11 기준 ECMA TC39 Stage 2 까지 올라간 상태)

이라고 한다.
이미 수 백만개의 프로젝트들에서 쓰이는 너무 대표적인 라이브러리이지만 moment는 vue의 약 4배정도로 용량이 큼,, 그리고 개발중단 선언되었으니 다른 좋은 라이브러리 사용을 권장한다고 함. (그대로 써도 당장 문제는 없겠지만, 길게 봤을 땐 걷어내야 할 듯)

  • Moment에 대한 대안으로 권장되는 라이브러리
    1) Day.js - 사용법 moment와 거의 동일함.
    2) Luxon
    3) Date-fns
    4) js-Joda

1. Moment 사용법

  1. yarn 또는 npm을 이용해 설치.
    (yarn add moment를 했는데 vue용이 따로 있는지 vue-moment가 따로 있길래 yarn add vue-moment를 다시 함.)
  2. 전역으로 사용할 것이기 때문에 main파일에 import해줌.
    import moment from "moment";

👉 Moment.js와 Day.js 작성법 비교 예시

: 가장 큰 차이는 현재시간을 보는 것 기준으로 new Date의 차이
moment(new Date()).format("yyyy-mm-dd"),
day().format("yyyy-mm-dd")


1. Moments.js
    import moment from 'moment';
    
    👩‍💻 sample code -----------------------------------------------------------------
    👉 Format dates ---
    aaa = 
    moment(new Date()))
    moment().format('MMMM Do YYYY, h:mm:ss a');
    					 // ->   January 13th 2022, 1:44:40 pm
    moment().format('dddd');       	 // ->   Thursday
    .
    .
    👉 Relative time ---
    moment("20111031", "YYYYMMDD").fromNow();    // ->  10 years ago
    moment().startOf('day').fromNow();           // ->  14 hours ago
    .
    .
    👉 Calendar Time ---
    moment().subtract(10, 'days').calendar();    //->  01/03/2022
    	     <subtract>  =  현재를 기준으로 이전 시간(날짜)
    moment().calendar();                         //->  Today at 1:51 PM
    moment().add(3, 'days').calendar();          //-> Sunday at  1:51pm
    	     <add>  =  현재를 기준으로 이후 시간(날짜)
    .
    .				(확실히 하기 위해 <moment(new Date()).~> 오늘 기준써줌)
    
2. Day.js 
    import  dayjs from 'dayjs'
    
    👩‍💻 sample code -----------------------------------------------------------------




개발 중단 참고
dayjs참고

profile
Front-end

0개의 댓글