자바스크립트 날짜 라이브러리 쓰는 이유와 라이브러리 비교
이전의 프로젝트에서는 날짜 라이브러리를 사용하지 않고 Date객체만을 활용해 날짜를 사용하였다.
그러나 이렇게 자바스크립트에서 Date객체를 활용하면 브라우저별로 시간이 다를 수 있다.
timezone을 고려하지 않으면
서버와 클라이언트 간의 지역이 다른 경우 시간대가 달라질 수 있다.
(timezone이란? 영국 그리니치 천문대를 기준으로 지역에 따른 낮밤의 차이를 조정하기 위해 구분된 시간의 구분선.
지구는 24개의 시간대가 있다.)
날짜 라이브러리는 이러한 timezone을 고려하였기 때문에
시간차에 대한 불편함을 겪지 않아도 된다.
그러므로 프론트엔드에서는 대부분 날짜 라이브러리를 사용한다고 한다.
라이브러리 사용을 위한 비교
1. dayjs
2. moment js
3. date fns
4. luxon
| 다운로드 순위 | 라이브러리명 | update date | 라이브러리 사이즈(min) | 참고사항 | 버전정보 |
|---|---|---|---|---|---|
| 1 | moment | 3 months ago | 73.1 KB | 더이상 업데이트 하지 않을 것 | 2.30.1 |
| 2 | date-fns | a day ago | 17.2 KB | 3.6.0 | |
| 3 | dayjs | 6 months ago | 3.0 KB | tree shakable | 1.11.10 |
| 4 | luxon | 4 months ago | 23.0 KB | moment와 비슷함 | 3.4.4 |
지금 나의 상황과 맞는 라이브러리는 day js 일 것 같다.
다양한 기능을 사용하지 않고 서버와 클라이언트간의 날짜를 조정하는
기능만 사용할 것이므로 가장 간편한 것(사이즈 작은 것)이 좋을 것 같고
또한 많이 사용이 되는 것 (date-fns와 크게 차이 나지 않음)이 좋겠다.
day js 는 트리쉐이킹이 되지 않지만 작은 크기가 장점
date fns는 트리쉐이킹이 됨 (그러나 찾아본 바에 의하면 약간의 이슈가 있는 듯하다)
트리쉐이킹은 알고 있기로는 webpack이나 rollup등의 번들러에 의해 설정해야하는데
create next app을 지금활용하고 있는데
이게 자동으로 될지는 더 찾아봐야 할 것 같다.
먼저 가장 단순하고 사이즈가 작은 day js를 활용하는 것으로 해두자.
Tree shaking issue in v2.28 · Issue #3004 · date-fns/date-fns
I use only a few of the functions and made sure I import them as recommended for tree-shaking in the documentation : import { parse } from 'date-fns' import { fr } from 'date-fns/locale'; The code ...
github.com
왜 내가 작성한 JavaScript Date 코드가 서버에서는 다르게 보이는 거죠? | 요즘IT
프론트엔드에서 날짜와 시간을 다루는 작업은 매우 흔한 일입니다. 그래서 ‘자바스크립트(JavaScript)’에서는 Date 객체가 빌트인으로 존재하죠. 하지만 JavaScript의 Date만으로 날짜를 다루는 것은
yozm.wishket.com
시간대 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 각 나라의 시간대 시간대(時間帶,time zone)는 영국의 그리니치 천문대(본초 자오선, 경도 0도)를 기준으로 지역에 따른 시간의 차이, 다시 말해 지구의 자전에 따
ko.wikipedia.org
Day.js · 2kB JavaScript date utility library
2kB JavaScript date utility library
day.js.org