분류 javascript

date-fns 알아보기 : 경량 JavaScript 날짜 라이브러리

컨텐츠 정보

  • 조회 454 (작성일 )

본문

JavaScript에서 날짜로 작업하는 것은 고통입니다. 기본 날짜 방법은 종종 장황하고 때로는 일관성이 없어 오류가 발생하기 쉽습니다. 

그러나 좋은 소식이 있습니다. 구식 조작의 고통을 없애기 위해 존재하는 여러 라이브러리가 있습니다. 

이 라이브러리는 JavaScript 날짜에 대한 것이며 jQuery는 기본 DOM API에 대한 것입니다.


예를 들어 보겠습니다. 이것은 매월 말일을 얻는 방법을 묻는 스택 오버플로 질문에 대한 대답입니다.


var t = new Date();
alert( new Date(t.getFullYear(), t.getMonth() + 1, 0, 23, 59, 59) );

물론 작동하지만 getMonth 이후의 숫자가 무엇을 나타내는지는 즉시 명확하지 않습니다. 이제 훨씬 더 읽기 쉬운 것과 대조하십시오.


const today = new Date();
console.log( lastDayOfMonth(today) );

lastDayOfMonth 메서드는 브라우저와 Node.js에서 JavaScript 날짜를 조작하기 위해 자체적으로 선언 된 포괄적인 도구 집합 인 date-fns에서 제공하는 메서드입니다.


이 기사에서는 date-fns를 설정하고 실행하는 방법을 보여 드리겠습니다. 읽은 후에는 프로젝트에 삽입하고 많은 도우미 메서드를 활용하여 날짜를 쉽게 조작 할 수 있습니다. 이것은 t.getMonth () + 1, 0, 23, 59, 59와 같은 코드를 과거의 것으로 만듭니다.


그렇다면 Moment.js를 사용하지 않는 이유는 무엇입니까? 


Moment.js는 JavaScript에서 날짜 작업을 할 수 있는 환상적인 라이브러리입니다. 많은 훌륭한 기능을 가지고 있으며 유용한 유틸리티를 제공합니다. 그러나 비평가가 없는 것은 아닙니다.


많은 사람들이 Moment 객체가 변경 가능하다는 사실을 인용합니다 (즉, 원래 Moment 객체를 더하거나(add) 빼는 것(subtract)과 같은 작업). 개발자와 버그의 원인이 혼란스러워요.


그것은 또한 그것의 큰 크기 때문에 불이 붙었다. Moment는 최신 "트리 쉐이킹"알고리즘과 잘 어울리지 않으며 국제화 또는 시간대 지원이 필요한 경우 다소 큰 자바 스크립트 번들을 사용하여 빠르게 자신을 찾을 수 있습니다.


지금까지는 Chrome의 개발 도구가 Moment를 사용하면 성능이 저하 될 수 있다는 사실을 강조합니다.


Replace unnecessarily large JavaScript libraries 


https://www.sitepoint.com/date-fns-javascript-date-library/


이 모든 것이 Moment 관리자가 프로젝트를 유지 관리 모드로 전환하고 향후 새로운 프로젝트에서 Moment가 사용되는 것을 막도록 유도했습니다.


많은 기존 프로젝트에서 Moment를 계속 사용할 수 있음을 알고 있지만 앞으로는 새로운 프로젝트에서 Moment가 사용되지 않도록 하고 싶습니다. 대신, 우리는 오늘날 현대적인 응용 프로그램에서 사용하기에 탁월한 선택 인 대안을 추천하고 싶습니다.


이것은 date-fns를 Moment.js에 대한 최고의 대안 중 하나로 만듭니다.


설치 


라이브러리 버전 2부터 date-fns를 설치하는 유일한 방법은 npm 패키지입니다.


npm install date-fns

또는 Yarn을 통해 :


yarn add date-fns

CommonJS 모듈 시스템과 ES 모듈 모두에서 date-fns를 사용할 수 있습니다.


// CommonJS
const { lastDayOfMonth } = require('date-fns');

또는:

// ES Modules
import { lastDayOfMonth } from 'date-fns';

안타깝게도 현재 사용할 수 있는 date-fns의 CDN 버전이 없습니다. 제거 및 복원 가능성은 이 GitHub 문제에서 논의되고 있습니다. 그러나 이는 브라우저에서 사용할 수 없다는 의미가 아니라 워크 플로에 번들링 단계를 도입해야 한다는 것입니다.


지금 어떻게 하는지 살펴 보겠습니다


브라우저에서 사용하기 위해 date-fns를 번들링 하는 방법 


컴퓨터에 Node와 npm이 설치되어 있다고 가정하겠습니다. 그렇지 않은 경우 Node.js 설치에 대한 자습서를 참조하십시오.


다음으로 Parcel을 설치합니다. 이것은 번 들러 (Webpack과 유사)로, JavaScript를 번들로 묶어 브라우저에서 제공 할 수 있습니다.


npm install -g parcel-bundler

다음으로 package.json 파일로 새 프로젝트를 만듭니다.


mkdir date-fns
cd date-fns
npm init -y

위와 같이 date-fns 라이브러리를 설치합니다.


npm install date-fns

이제 index.html과 index.js라는 두 파일을 만듭니다.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>date-fns</title>
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>
import { lastDayOfMonth } from 'date-fns';

const today = new Date();
console.log(lastDayOfMonth(today));

Parcel의 내장 개발 서버 시작 :


parcel index.html

그리고 http : // localhost : 1234로 이동합니다. 페이지에는 아무것도 표시되지 않지만 브라우저의 콘솔을 열면 표시됩니다. 이번 달의 마지막 날을 기록해야 합니다.


배포와 관련하여 다음을 실행할 수 있습니다.


parcel build index.js --experimental-scope-hoisting

Parcel이 dist 폴더에 축소되고 나무가 흔들리는 번들을 출력하도록 합니다.


Date-fns 기본 사용법 


이제 실행 중이므로 date-fns가 무엇을 할 수 있는지 살펴 보겠습니다.


날짜로 작업 할 때 가장 일반적인 작업 중 하나는 날짜를 멋지게 형식화 하는 기능입니다. date-fns 형식 함수로 이를 수행 할 수 있습니다.


위의 예제 페이지에서 HTML을 다음과 같이 변경하십시오.


<body>
  <h1>The date today is <span></span></h1>
  <script src="index.js"></script>
</body>

index.js에서 형식 함수를 가져 와서 오늘 날짜와 형식 ​​문자열을 전달할 수 있습니다. 그런 다음 결과를 페이지에 출력하려고 합니다.


import { format } from 'date-fns';

const today = new Date();
const formattedDate = format(today, 'dd.MM.yyyy');

document.querySelector('h1 > span').textContent = formattedDate;

물론 dd.MM.yyyy 형식에 국한되지 않습니다. 다른 것을 시도해 보겠습니다.


const formattedDate = format(today, 'PPPP');

이렇게 하면 출력 형식이 다음과 같이 지정됩니다. 2020 년 9 월 16 일 수요일. 문서에서 형식 지정 옵션의 전체 목록을 찾을 수 있습니다.


로케일 변경 


여러 언어로 된 웹 사이트가 있는 경우 date-fns를 사용하면 시간과 날짜를 간단하게 국제화 할 수 있습니다. 독일 손님을 맞이합시다 :


<h1>Heute ist <span></span></h1>

그리고 JavaScript 파일에서 독일어 로케일을 가져 와서 format 함수에 전달할 수 있습니다.


import { format } from 'date-fns';
import { de } from 'date-fns/locale';

const today = new Date();
const formattedDate = format(today, 'PPPP', { locale: de });

document.querySelector('h1 > span').textContent = formattedDate;

이것은 다음과 같은 내용을 출력 할 것입니다 : Heute ist Mittwoch, 16. September 2020.


로케일을 옵션으로 요구하고 전달하는 것은 복잡해 보일 수 있지만 기본적으로 모든 로케일로 빌드를 확장하는 Moment.js와 달리 date-fns는 개발자가 필요할 때 수동으로 로케일을 요구하도록 합니다.


프로젝트의 node_modules / date-fns / locale 폴더에서 사용 가능한 로케일 목록을 볼 수 있습니다.


불변성, 순수성 및 단순성 


date-fns의 판매 포인트 중 하나는 기능이 순수하고 간단하다는 것입니다. 이로 인해 코드를 이해하기 쉽고 잘못되었을 때 디버그 하기가 더 쉽습니다.


Moment.js를 카운터 예제로 사용하여 이것을 보여 드리겠습니다. 앞서 언급 했듯이 Moment의 날짜는 변경 가능하므로 예기치 않은 동작이 발생할 수 있습니다.


const moment = require('moment');
const now = new Date();
const mNow = moment(now);

mNow.add('day', 3);
console.log(mNow.toDate());
mNow.add(3, 'day');
console.log(mNow.toDate());

// 2020-09-19T10:08:36.999Z
// 2020-09-22T10:08:36.999Z

여기서 주목해야 할 몇 가지 사항이 있습니다. Moment의 add 함수는 인수를 받아들이는 순서에 대해 까다롭지 않습니다 (이제 첫 번째 메서드가 지원 중단 경고를 표시하지만). 그러나 더 혼란스러운 점은 한 행에서 add를 여러 번 호출하면 Moment 객체가 변경 가능하기 때문에 동일한 결과를 얻지 못한다는 것입니다.


mNow.add(3, 'day'); // add 3 days
mNow.add(3, 'day'); // adds 3 **more** days

이제 인수를 한 순서로 유지하고 항상 동일한 결과를 반환하는 date-fns와 비교하여 각 호출에 대해 새 Date 객체를 반환합니다.


import { addDays } from 'date-fns';

const today = new Date();
const threeDaysTime = addDays(3, today);
const sixDaysTime = addDays(threeDaysTime, 3);

console.log(today); // Wed Sep 16 2020 12:11:55 GMT+0200
console.log(threeDaysTime); // Sat Sep 19 2020 12:12:58 GMT+0200
console.log(sixDaysTime); // Invalid Date

또한 메서드 이름이 더 표현력이 뛰어나고 (단순 추가 대신 addDays) 일을 일관되게 유지하고 한 가지 방법으로 한 가지 작업 만 수행하는 방법에 주목하십시오.


날짜 비교 


SitePoint의 JavaScript 채널에 있는 게시물 목록을 보면 일부는 특정 날짜에 게시 된 것으로 표시되는 반면 다른 것은 X 일 전에 게시 된 것으로 표시되는 것을 볼 수 있습니다. 이것을 바닐라 자바 ​​스크립트로 구현하려고 하면 시간이 걸릴 수 있지만 date-fns를 사용하면 간단합니다. formatDistance 메서드를 사용하면 됩니다.


서로 다른 두 날짜를 비교해 보겠습니다.

import { formatDistance } from 'date-fns';

const startDate = new Date(2020, 8, 16); // (Sep 16 2020)
const endDate = new Date(2020, 11, 25); // (Dec 25 2020)
const distanceInWords = formatDistance(startDate, endDate);

console.log(`It is ${distanceInWords} until Christmas`);
// It is 3 months until Christmas

JavaScript로 작업 할 때 월은 0을 기준으로 하지만 (예 : 11 월 = 12 월) 날짜는 1부터 계산됩니다. 이것은 나를 몇 번이고 여행한다.