(21.09.01) Moment.js

도깨비젤리

·

2021. 9. 1. 21:39

작은 지식이라도, 하루에 하나씩.


 

한 줄 요약


🦄Moment.js는 date 형식의 데이터를 파싱, 유효성 체크, 조작 하기 위해 도와주는 Javascript 라이브러리 🦄

 

 

본문


 

Moment.js를 설명하기 전에 먼저 말하자면, 이 라이브러리는 공식적으로 사망 선고가 내려졌다.

 

이유는 다음과 같다.

 

  1. Moment 객체들이 mutable함
  2. 워낙 오래된 라이브러리라, 최신 알고리즘인 tree shaking이 잘 동작하지 않음 -> 번들 사이즈가 커짐

 

Moment 팀은 이 이슈들에 대해 오랫동안 의견을 나눴고, 결국 더 이상 새로운 기능들도 추가하지 않을 것이고, 더 이상의 버전 업도 없을 것이라고 말했다. 추가로, 새로운 프로젝트를 하는 개발자들이 Moment를 사용하지 않았으면 한다는 말도 덧붙였다.

 

그럼 나는 왜 이 라이브러리를 정리하느냐? 회사가 moment를 쓰고 있기 때문이지 뭐~~

사실 뉴비 입장에서는 오래된 기술을 받아들인다는게 굉장히 꺼려지긴 하다만, 이 라이브러리는 어려운 것도 없고, 이걸 사용하고 있는 프로젝트도 아직 많기에, 이번 기회에 정리해보려고 한다.

 

 

사용법


설치 방법은 패스하고, moment도 import 한 상태를 가정하고 글을 쓰겠다.

 

기본적으로 moment는 호출하면 moment 객체를 뱉어내는데, vanilla js의 date 객체와 비슷하게 동작한다.

하지만, moment는 date에 없는, 구현하기 어려운 메소드를 심플하게 구현할 수 있다.

 

대표적으로 .format()이 있다.

 

moment().format('YYYY MM DD') // format의 param으로 이렇게 날짜를 상징하는 string을 넣는다

 

위와 같이 작성하면, 세상에나,moment 객체를 자동으로 해당 포맷에 맞게 바꿔준다!!

엄청나게 다양한 포맷타입을 제공하니, 자세한 내용은 공식문서를 확인하는게 좋다.

 

https://momentjs.com/docs/#/parsing/string-formats/

 

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

 

 

또, 유용하게 사용한건 startOf() // endOf() 메서드인데, moment 객체의 특정 값 (년, 달, 일)등을 시작일 or 종료일로 바꿔준다는 것이다.

 

이거보고 여태까지 시작일, 종료일 맞추려고 바닐라로 낑낑거리던 옛시절이 생각나서 눈물이 났다.

이래서 사람은 배워야 한다는 말이 나온게 아닐까??

 

 

https://momentjs.com/docs/#/manipulating/start-of/

 

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 개발팀의 권유에 따라, 굳이 새 프로젝트에 이걸 갖다쓰지는 말자. 시간관련해서 좋은 라이브러리들은 엄청나게 많다!

 

 

  • 대체 라이브러리 추천

 

1. Luxon.js

 

https://moment.github.io/luxon/#/?id=luxon-2x

 

luxon - Immutable date wrapper

 

moment.github.io

 

 

2. Day.js

 

https://github.com/iamkun/dayjs

 

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

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

github.com

 

'TIL' 카테고리의 다른 글

(21.09.05) Promise에 관하여  (0) 2021.09.06
(21.09.05) ParseInt vs Number  (0) 2021.09.05
(21.08.31)ES6 Class  (0) 2021.08.31
(21.08.04) Material-ui Default theme의 type  (0) 2021.08.04
(21.08.02) setInterval 함수  (0) 2021.08.02