- Published on
์ moment ๋ deprecated ๋์์๊น
- Author
- Name
- yceffort
Datetime์ ๋ค๋ฃจ๋ ๊ฒ์ ๋ถ๋ช ์ฌ์ด ์ผ์ ์๋๋ค. ํ์ฐธ vanilla ์๋ฐ์คํฌ๋ฆฝํธ์ ์ทจํด ์์ ๋, least library challenge(?)์ ์ผํ์ผ๋ก datetime์ ๋ด์ฌํ ํด์ ๊ด๋ฆฌํ๊ณค ํ์ง๋ง ์ด๋ ๋ถ๋ช ์ด๋ ค์ด ์ผ์ด์๋ค. ๊ทธ ๋ ๋ง๋ค ๊ฒฐ๊ตญ ๊ฐ์ฅ ์ต์ํ moment๋ก ๋์์์ ํ๊ณค ํ๋๋ฐ, ์ธ์ ๊ฐ bundle ๋ถ์์ ํ ๋ค๋ก moment์ ๋ํ ์ฌ์ฉ์ ์กฐ๊ธ ๊บผ๋ฆฌ๊ธฐ ์์ํ๋ค. moment๋ ๋ด๊ฐ ์ฐ๋ ๊ธฐ๋ฅ ๋๋น ์ ๋ง ํฐ ์ฉ๋์ ์ฐจ์งํ๊ณ ์์๋ค. (timezone์ ์ ์ธ ํ๋๋ผ๋) ๋ถ๋ช ๋ด๊ฐ moment์ ์ข์ ๊ธฐ๋ฅ์ ์ฝ๊ฒ ์ฌ์ฉํ๋ ๋ฉด๋ ์์์ง๋ง, ์กฐ๊ธ์ด๋ผ๋ ๋ ๋น ๋ฅธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ moment ์ธ์ ๋ค๋ฅธ ๋์์ด ํ์ํ๋ค.
๊ทธ๋ฌ๋ ์ค, moment ๊ฐ deprecated ๋๋ค๋ ์์์ ์๋ ค์๋ค.
... The modern web looks much different these days. Moment has evolved somewhat over the years, but it has essentially the same design as it did when it was created in 2011. Given how many projects depend on it, we choose to prioritize stability over new features.
์กฐ๊ธ ๋ง์ด ๋ท๋ถ์ด๊ธด ํ์ง๋ง, ์ moment๊ฐ ์ญ์ฌ ์์ผ๋ก ์ฌ๋ผ์ก๋์ง ๋ช๊ฐ์ง ์ด์ ๋ฅผ ์ง๊ณ ๋์ด๊ฐ๊ณ ์ ํ๋ค.
1. ๋๋ฆฌ๋ค
๋จ๋์ง์ ์ ์ผ๋ก ๊ทธ๋ํ๋ฅผ ํตํด์ ์์ ์๋ค. ๋ค๋ฅธ datetime library ๋๋น ์๋๊ฐ ๋ง์ด ๋๋ ธ๋ค.
์ถ์ฒ: https://raygun.com/blog/moment-js-vs-date-fns/
๋ญ ์ฌ๋ฌ๊ฐ์ง ์ด์ ๊ฐ ์๊ฒ ์ง๋ง, regex๋ฅผ ์ฃผ๋ก ์ฐ๋ moment์ ๋๋น ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ Z
๋ก ๋๋๋ฉด new Date(string)
์ ์ด๋ค๋์ง, ํน์ ๋๋ฆฐ regex ๋์ ์ ์์ฒด์ ์ผ๋ก ๊ฐ๋ฐํ(?) if
์ charAt
๋ฑ์ ์ด๋ค๋์ง ๋ค์ํ ๋
ธ๋ ฅ๋ค์ ํ๊ณ ์์๋ค. regex๋ฅผ ํ์ฑํด์ ์ดํดํ๋ ์์
์ ํ์คํ ๋๋ฆฌ๋ค.
2. ๋ฌด๊ฒ๋ค
์ถ์ฒ: https://inventi.studio/en/blog/why-you-shouldnt-use-moment-js
https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
๊ธฐ๋ณธ์ ์ผ๋ก momentjs๋ 232kb, (gzip์ 66kb) ์ด๋ฉฐ, webpack์ผ๋ก locale์ ์ ๊ฑฐํ ๊ฒฝ์ฐ ์ฌ์ด์ฆ๋ 68kb (gzip์ 23kb) ๊น์ง ๋จ์ด์ง๋ค. ๊ทธ๋ฆฌ๊ณ ๋ ์ด์์ tree shaking์ ๋ถ๊ฐ๋ฅํ๋ค. js-joda๊ฐ ์ ๋ฒ ํฌ๊ธด ํ์ง๋ง ๊ธฐ๊ฐ๊ณผ ํ์์กด๊น์ง ๊ธฐ๋ณธ์ผ๋ก ์ ๊ณตํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ผ๋ ๊ฒ์ ์์๋ฌ์ผ ํ๋ค. ๊ทธ๋ฆฌ๊ณ ๋๋จธ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ํธ๋ฆฌ์์ดํน์ด ๊ฐ๋ฅํ๋ค.
3.mutable์ด๋ค.
์ด๋ moment ๊ณต์ ๊ฐ์ด๋์์๋ ์ธ๊ธํ ๋ฌธ์ ๋ค.
As an example, consider that Moment objects are mutable. This is a common source of complaints about Moment. We address it in our usage guidance but it still comes as a surprise to most new users. Changing Moment to be immutable would be a breaking change for every one of the projects that use it. Creating a "Moment v3" that was immutable would be a tremendous undertaking and would make Moment a different library entirely. Since this has already been accomplished in other libraries, we feel that it is more important to retain the mutable API.
https://inventi.studio/en/blog/why-you-shouldnt-use-moment-js
const startedAt = moment()
const endedAt = startedAt.add(1, 'year')
console.log(startedAt) // > 2020-02-09T13:39:07+01:00
console.log(endedAt) // > 2020-02-09T13:39:07+01:00
moment
๋ฅผ ์กฐ์ํ๋ ๋ชจ๋ method ๋ค์ ๋ฆฌํด ๊ฐ๊ณผ ์ฐธ์กฐ๊ฐ ๋ชจ๋๋ฅผ ๋ฐ๊ฟ ๋ฒ๋ฆฌ๊ธฐ ๋๋ฌธ์, ์๋ฌ๋ฅผ ๋ง๋ค ์์ง๊ฐ ๋๋ค.
4. ๋๋ฒ๊น ์ด ์ด๋ ต๋ค.
moment
์์ ํ๋ผ๋ฏธํฐ๋ฅผ ๋ฃ๋ ๊ฒ์ ์ข์ ์์ด๋์ด์ด๊ธดํ์ง๋ง, ๊ทธ ์์ ๋ฐ๋ผ์ ๋์์ด ๋งค์ฐ ์ผ๊ด์ ์ด์ง ๋ชปํ๋ค. ์๋ฅผ ๋ค์ด, moment ์์ ์๋ชป๋ ๊ฐ์ ๋ฃ์์ ๊ฒฝ์ฐ ์๋ฌ๊ฐ ๋๋๊ฒ ์๋๋ผ ๊ทธ๋ฅ ํ์ฌ ์๊ฐ์ด ๋์๋ฒ๋ฆด ์๋ ์๋ค.
moment().format() // > 2019-02-08T17:07:22+01:00
moment(undefined).format() // > 2019-02-08T17:07:22+01:00
moment(null).format() // > Invalid date
moment({}).format() // > 2019-02-08T17:07:22+01:00
moment('').format() // > Invalid date
moment([]).format() // > 2019-02-08T17:07:22+01:00
moment(NaN).format() // > Invalid date
moment(0).format() // > 1970-01-01T01:00:00+01
์์ฝํ์๋ฉด, undefined
๋ ๊ฐ๋ฅํ์ง๋ง, null
''
, NaN
์ ์๋๋ค.
๊ฒฐ๊ตญ
lighthouse์์๋ ์๋ฌ๊ฐ ๋จ๊ณ
https://twitter.com/addyosmani/status/1304676118822174721
moment๋ฅผ ์ต์ ํ ํ๋ ๋ฐฉ๋ฒ๊น์ง๋ ์๋ ค์ง๊ธฐ ์์ํ๋ค.
https://github.com/GoogleChromeLabs/webpack-libs-optimizations#moment
๋์
์ฌ์ด์ฆ๊ฐ ์ค์ํ ํ๋ก ํธ์๋์ ๊ฒฝ์ฐ date-fns
๋ day.js
๊ฐ ์ข๋ค. ๊ทธ ์ธ์ ๊ฒฝ์ฐ์๋ ๊ธฐ๋ฅ์ด ๊ฐ์ฅ ๋ฆฌ์นํ js-joda
๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค.
size | size(gzip) | speed(to) | tree-shaking | immutable | throw error | timezone | |
---|---|---|---|---|---|---|---|
moment | 232/68 | 66/26 | 16.527 | X | X | X | O |
day.js | 6 | 3 | 9.129 | X | O | X | X |
luxon | 64 | 18 | 15.406 | X | O | O | O |
js-joda | 208 | 39 | 11.397 | X | O | O | O |
date-fns | 30 | 7 | 5.175 | O | O | X | X |
native | 1.297 | X | X | X |
์ถ์ฒ: https://inventi.studio/en/blog/why-you-shouldnt-use-moment-js#fnref2
๊ทธ๋ผ์๋, ์ ๋ ๊ฒ ํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ฒด๋ฅผ deprecated ์ํฌ ์ ์๋ค๋ ๊ฒ ๋ง์ผ๋ก๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ํ๊ณ๊ฐ ๊ฑด๊ฐํ๊ฒ ๋์๊ฐ๊ณ ์๋ค๋ ๋ฐฉ์ฆ์ธ ๊ฒ ๊ฐ๋ค. ์ฌ์ ํ, ๋ง์ ์์ ํ๋ก์ ํธ๊ฐ moment์ ์์กดํ๊ณ ๋ ๊ทธ ํธ๋ฆฌํจ์ ๋ง์ ๋์์ ์ป์๋ค. moment๊ฐ ์ด์ผ๊ธฐ ํ modern web looks much different these days
์ฒ๋ผ, ์ด์ ๋ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ธ ๋๊ฐ ์๋ค. ๊ทธ๋ฆฌ๊ณ ๋ ๋ํ, ์ค๋๋๊ณ ๋ก์ ์ฝ๋๋ฅผ ๊ณผ๊ฐํ๊ฒ deprecated ์ํฌ ์ฉ๊ธฐ๊ฐ ํ์ํ๋ค.