분류 javascript

7 가지 최고의 JavaScript 날짜 라이브러리

컨텐츠 정보

  • 조회 621 (작성일 )

본문

응용 프로그램에 작업 날짜를 추가하는 것은 이론적으로 시도하기 전까지는 쉬운 작업처럼 보입니다. 

웹 사이트의 국제화를 시도할 때 표준 시간대 문제인지, 필요한 형식으로 날짜를 표시하는 문제인지, 아니면 기본 산술 연산을 시도하는 경우 (예 : 날짜에서 3 일을 뺀 경우, 그것은 그렇게 힘들지 않아야 합니다).


https://blog.logrocket.com/javascript-date-libraries/ 


문제는 슬프게도 JavaScript는 기본적으로 날짜를 처리 할 준비가 되지 않았다는 것입니다. 

기본 작업에 사용할 수 있는 Date 객체가 있다는 점을 고려하면 약간 아이러니합니다.


JavaScript가 준비되지 않았다고 말할 때 무엇을 의미합니까? 나는 이 객체에 대한 API가 우리의 일상적인 요구에 부응하기에 충분하지 않다는 것을 의미합니다. 국제화, 시간대 지원 등과 같은 문제에 대해 그러한 객체에서 기대할 수 있는 높은 수준의 지원은 없습니다.


여기서 내가 검토 할 라이브러리가 등장합니다. 이 7 개의 날짜 라이브러리는 JavaScript의 Date 객체 위에 추상화 계층을 추가하여 실제로 유용하게 만듭니다.


moment.js​ 


Reviewed version: 2.24.0


Moment.js는 Node.js와 vanilla JavaScript (브라우저 호환 가능) 모두에서 가장 오래되고 잘 알려진 날짜 관련 라이브러리 중 하나입니다. 이로 인해 다음과 같은 가장 일반적인 웹 개발 유틸리티와 호환 될 수 있는 시간이 었습니다.


그것은 Date 객체의 원래 프로토타입을 수정하지 않고도 훌륭한 API를 제공하며 대신에 원래의 네임스페이스를 오염 시키지 않도록 래퍼 객체를 생성합니다.


간단한 예를 들어, 현재 날짜를 설정하는 방법은 다음과 같습니다. 7 일을 더한 다음 한 달을 빼고 마지막으로 연도 및 시간 값을 설정하십시오. 다음과 같이 읽기 쉬운 코드 한 줄로 모두 작성하십시오.


moment().add(7, 'days').subtract(1, 'months').year(2009).hours(0).minutes(0).seconds(0);

20 개가 넘는 로케일을 지원하므로 국제화 문제를 해결하려는 경우 moment.js가 좋습니다.


Plugin ecosystem 


특정 라이브러리의 성공과 전반적인 유용성을 측정하는 좋은 방법은 주변에 존재하는 플러그인 / 확장 생태계를 확인하는 것입니다. 

moment.js의 경우 공식적으로 지원되는 22 개가 있습니다. 

언뜻 보기에는 큰 숫자가 아닐 수도 있지만,이 모든 라이브러리가 단일 객체, Date 객체를 중심으로 설계되었다고 생각하면 20 개가 넘는 플러그인을 갖는 것이 분명히 좋은 징조입니다.


설명서 페이지에서 전체 플러그인 목록을 찾을 수 있지만 가장 흥미로운 플러그인은 다음과 같습니다.


The twitter time 


이 기능을 사용하면 Twitter처럼 날짜와 시간을 형식화 할 수 있습니다 (예 : 1 시간 전의 1 시간 또는 2 일 전의 2 일과 같이 충분히 명확 할 때 한 글자로 시간과 같은 날짜를 축약하는 방식에 유의하십시오). ”).


이 플러그인으로 다음과 같이 간단하게 할 수 있습니다 :


moment().subtract(6, 'days').twitterShort();

"6d"를 반환합니다.


Parse format 


특정 방식으로 날짜를 표시하려고 할 때 날짜 형식을 몇 번이나 썼습니까? YYYY-MM-dd 또는 이와 유사한 변형. 그러나 항상 수동으로 작성하면 라이브러리가 날짜를 적절하게 형식화 합니다.


이 플러그인은 날짜 형식을 지정하는 대신 날짜 문자열을 구문 분석하고 재사용 할 수 있는 실제 형식을 반환합니다.


따라서 다음과 같은 작업을 수행 할 수 있습니다.


var format = moment.parseFormat('Thursday, February 6th, 2014 9:20pm');
// format will contain: dddd, MMMM Do, YYYY h:mma

이 특정 플러그인은 서식 지정 논리에 동적 동작을 추가하는 데 유용합니다. 예를 들어 서식을 동적으로 지정하고 사용자가 자신의 형식을 구성하는 방법을 배우는 대신 날짜 예제를 입력 할 수 있게 합니다.


Timer 


이것은 실제로 JavaScript setInterval 및 setTimeout 함수를 완전히 다시 작성하므로 순간의 구문을 혼합하고 훨씬 더 강력한 타이머를 만들 수 있습니다.


다음과 같이 할 수 있습니다.


var timer = moment.duration(5, "seconds").timer({loop: true}, function() {
  // Callback
});

다음 보다 이미 읽고 이해하기가 훨씬 쉽습니다.


setInterval(function() {
  //Callback
}, 5000)

다시 말하지만, 20 개 이상의 플러그인이 있으며, 설명서 페이지를 확인하고 직접 목록을 검토 할 것을 권합니다.


date-fns 


Reviewed version: 2


날짜 라이브러리로 널리 알려진 date-fns는 Moment.js가 제공하는 것보다 더 나은 경험을 제공하려고 합니다.


이 API는 140 가지가 넘는 시간 관련 기능으로 상당히 광범위하며, 제작자와 기고자들은 Moment 사용을 전환하고 시간 관리에 대한 자체 솔루션에 연결되기를 희망합니다.


이 라이브러리의 주요 특징 중 일부는 다음과 같습니다.

  • 모든 기능은 파일별로 그룹화 되어 있으므로 실제로 사용하는 두 가지 방법으로 프로젝트를 부 풀릴 필요 없이 필요한 것을 가져올 수 있습니다. 이것은 비트 수가 중요하기 때문에 JS 행마다 바이트를 최적화 해야 하는 프런트 엔드 개발자에게 특히 유용합니다. Node.js 개발자의 경우 여전히 가져 오기를 유지하는 데 유용하며 보다 체계적으로 구성해야 합니다 (예제를 조금 보여 드리겠습니다).
  • 다른 라이브러리 (Moment.js보고 있음)와 달리 date-fn에 의해 반환 된 날짜 객체는 변경 불가능하므로 불필요한 수정과 수많은 디버깅 시간을 피할 수 있습니다.
  • FP 하위 모듈은 FP 관련 기능을 제공하여 몇 줄의 코드로 복잡한 동작을 쉽게 구성 할 수 있습니다.
  • 총 57 개의 로케일을 지원하므로 국제화를 목표로 하는 경우 또 다른 훌륭한 옵션이 있습니다!
  • 그들은 TypeScript와 Flow를 지원합니다.
  • 마지막으로, 그들의 문서는 매우 상세하며, 특히 라이브러리에서 특히 높이 평가되는 API를 가진 라이브러리에서 항상 감사합니다.

일부 코드 샘플 


이 라이브러리를 고유하게 만드는 요소에 대한 아이디어를 제공하기 위해 몇 가지 코드 샘플을 빠르게 살펴 보겠습니다.


const { addYears, formatWithOptions  } = require('date-fns/fp')
const { es } = require('date-fns/locale')

const addFiveYears = addYears(5)

const dateToString = formatWithOptions({ locale: es }, 'd MMMM yyyy')

const dates = [
  new Date(2017, 0, 1),
  new Date(2017, 1, 11),
  new Date(2017, 6, 2)
]

const toUpper = arg => String(arg).toUpperCase()

const formattedDates = dates.map(addFiveYears).map(dateToString).map(toUpper)
//=> ['1 ENERO 2022', '11 FEBRERO 2022', '2 JULIO 2022']

이 예제는 위에서 두 가지 점을 보여줍니다. 

파일 당 함수 : 실제로 필요한 비트 만 필요합니다 (두 가지 모두 가져 오기가 예제에서 활용) 및 함수형 프로그래밍 도우미 함수. 가져온 두 함수 (addYears 및 formatWithOptions)를 사용하여 최종 프로세스 (두 번째 및 toUpper 익명 함수)에서 전체 프로세스를 구성하는 방법에 주목하십시오.


코드에 대한 간단한 참고 사항 : 라이브러리 홈페이지에 표시된 것과 같은 예제이지만 Node.js와 호환되도록 이 코드를 수정해야 했습니다. 


Luxon 


Reviewed version: 1.16.1


Luxon은 매우 흥미로운 프로젝트입니다. URL을 보면 Moment.js 프로젝트 아래에 있기 때문에 왜 그곳에 있습니까? 저자 자신의 모든 이야기를 읽을 수는 있지만 그 주된 요점은 순간의 더 나은 버전이 되려고 한다는 것입니다.

  1. 현재 Moment.js가 지원하는 모든 기능을 지원하지는 않습니다.
  2. 최신 브라우저의 Intl API에 크게 의존하므로 오래된 브라우저는 국제화 관련 방법을 다루는 데 어려움을 겪을 것입니다.

Luxon의 주요 차이점 중 하나는 이전 모델과 비교할 때 (Moment.js라고 부를 수 있다면) 이번에는 모든 객체가 변경 불가능하다는 것입니다 (여기에서 패턴을 알 수 있습니까? 그들의 객체가 변경 가능하고 커뮤니티의 모든 사람들이 그 문제를 해결하기 위해 나섰다.)


var m1 = moment();
var m2 = m1.add(1, 'hours');
m1.valueOf() === m2.valueOf(); //=> true

var d1 = DateTime.local();
var d2 = d1.plus({ hours: 1 });
d1.valueOf() === d2.valueOf(); //=> false

위의 예에서 Moment.js (첫 번째 예)를 사용하면 이러한 차이가 발생하는 것을 확인할 수 있습니다. 첫 번째 예에서는 이러한 문제가 발생합니다 (주의를 기울이지 않으면 문제가 발생하기 때문에 따옴표가 있음) ) add 메소드는 m2에서 새 값을 리턴하는 대신 m1을 변경하므로 Luxon의 API는 plus가 d1을 수정하는 대신 d2에서 새 오브젝트를 리턴하므로 해당 문제점을 방지 할 수 있습니다.


Moment.js의 또 다른 큰 차이점은 국제화가 브라우저의 Intl API를 기반으로 한다는 사실입니다. 기본적으로 이것이 의미하는 바는 다음과 같습니다.

  1. 로케일을 처리하기 위해 추가 구성 파일이 필요하지 않으며 브라우저가 이를 수행합니다.
  2. 노드에서 이 작업을 수행하려면 완전한 ICU를 지원하는 폴리 모듈 또는 빌드 노드가 필요합니다. 둘 중 하나를 수행하지 않으면 라이브러리는 계속 작동하지만 지역화 기능은 아무 것도 수행하지 않습니다.

Moment.js 사용자 인 경우 관심 있는 다른 변경 사항이 있으므로 설명서에서 확인하십시오.


DayJS 


Reviewed version: 1.8.14


DayJS는 Moment.js의 축소 된 버전을 시도합니다 (패턴은 여기에 있습니까?). 동일한 Moment.js API를 가지고 있으며 파일 크기를 97 % 줄인 라이브러리에 대해 언급해야 할 것이 있습니다. 맞습니다. Moment.js 전체 축소 파일의 총 무게는 총 67,9Kb이고 DayJS 축소 파일은 2Kb에 불과합니다. 그건 미친 짓이야.하지만 그들은 국제화, 플러그인 및 그 밖의 모든 것들을 지원합니다.


DayJS는 모두가 밑줄을 사용하고 있을 때 로다 시라고 생각할 수 있습니다 (기억합니까?). 갑자기 lodash가 비슷한 주장을 부추 기는 그림에 들어갔습니다. 발자국이 줄어든 매우 비슷한 API를 사용하여 위에서 언급했듯이 가능한 한 많은 바이트를 절약하려고 노력하는 많은 프론트 엔드 개발자의 마음을 사로 잡았습니다. 로딩 시간.


Moment.js와 마찬가지로 이 라이브러리에는 공식적으로 지원되는 약 20 개의 플러그인이 있으며,이 플러그인을 통해 해당 문서를 확인할 수 있습니다.


마지막으로 이 라이브러리는 주장하는 모든 것으로 보이며 개발자는 다음 다운로드 트렌드 차트에서 볼 수 있는 것처럼 라이브러리를 채택하기 시작했습니다.


day js downloads 


MomentJS는 8 개월 이상 (DayJS의 1 년 이상)에 비해 월간 다운로드 횟수를 계속 늘리고 있습니다. 시간이 좀 걸리지 만 MomentJS가 적응하지 않으면 (아마도 Luxon이 옵션 일 수 있겠습니까?) 결국 블록에 있는 이 새로운 아이로 대체 될 것입니다.


API가 MomentJS와 실질적으로 동일하므로 코드 샘플을 표시 할 필요가 없습니다. 특히 필요한 경우 공식 문서를 확인하고 로드 시간과 데이터 사용량이 걱정되는 경우 DayJS로 전환하십시오 (모바일의 큰 문제) 웹 개발자).


ms 


Reviewed version: 2.1.2


조금만 바꾸면,이 다음 라이브러리는 MomentJS를 대체하기 위해 만들어지지 않았으며 (아직 충격적입니다!) 대신 하나의 작업 만 가지고 있으며 매우 잘 수행됩니다.


MS의 목적은 모든 종류의 날짜 형식을 밀리 초로 변환하는 것입니다.


이것은 매우 좁은 사용 사례입니다.하지만 잘 알고 있듯이, 밀리 초로 날짜를 바꾸는 것은 장점이 있습니다. 특히 비교 및 산술 연산과 같은 작업을 수행하려는 경우 특히 이점이 있습니다. 날짜 개체에 1 초를 추가해야 한다고 말하는 것보다 번호에 1000 밀리 초를 더하십시오.


즉,이 라이브러리를 사용하면 다음과 같은 작업을 수행 할 수 있습니다.


ms('2 days')  // 172800000
ms('1d')      // 86400000
ms('10h')     // 36000000
ms('2.5 hrs') // 9000000
ms('2h')      // 7200000
ms('1m')      // 60000
ms('5s')      // 5000

ms(60000)             // "1m"
ms(2 * 60000)         // "2m"
ms(-3 * 60000)        // "-3m"

네 생각이 뭔지 알아 왜? 누가 사용하고 있습니까? 이 라이브러리에 매주 3 천만 건 이상의 다운로드가 있다는 사실을 감안할 때 매우 구체적이지만 일반적인 사용 사례를 다루고 있습니다. 

이것이 시간 관련 논리에 필요한 모든 것이라면 그것을 확인해보십시오.


js-joda 


Reviewed version: 1.11.0


또 다른 일반적인 시간 관리 라이브러리는 위의 목록에서 MomentJS 및 기타를 대체하는 것을 목표로 합니다. MomentJS와 같은 다른 객체와는 달리 Date 객체 기법과 동일한 래퍼를 피하고 그 대신 전체 로직을 처음부터 구현합니다.


더 낫습니까? 배심원은 여전히 그 중 하나이며, 유지 보수 담당자에게 기본 개념을 가지고 놀 수 있는 더 많은 공간을 제공하고 Date 객체가 가질 수 없는 방식으로 왜곡 할 수 있습니다. 즉,이 라이브러리는 작은 2Kb의 DayJS에서 멀리 떨어진 MomentJS (약 40Kb에 앉아)보다 약간 작습니다.


그러나 개발자는 개발자가 OOP 코드를 작성하는 데 도움이 되는 불변 (충격적인) 클래스와 도메인 별 클래스를 제공합니다.


js-joda의 매우 흥미로운 기능은 제공하는 확장 성입니다. 변경 불가능한 객체에는 실제로 설정자가 없으므로 이 라이브러리는 with 메소드를 제공합니다.이 메소드는 새로운 값이 설정된 새로운 객체를 반환합니다. 그리고 값을 설정하는 대신 특수 객체로 설정하면 값을 얻는 방법을 확장 할 수 있습니다.


// implement a TemporalAdjuster that returns the next or same even day of month
var nextOrSameEvenDay = {
  adjustInto: function(t) {
    return t.dayOfMonth() % 2 === 0 ? t : t.plusDays(1);
  }
};

LocalDateTime.parse("2012-12-23T12:00").with