JavaScript에서 Dates 작업을 위한 Day.js 멋진 라이브러리🙈

이 기사에서 날짜 및 시간 작업을 쉽게 해주는 JavaScript 날짜 라이브러리에 대해 논의했습니다. 많은 시간을 낭비했지만 날짜 작업은 그리 어렵지 않으므로 지난 해커톤에서 이 멋진 라이브러리를 찾았습니다.

👉 설치 방법은?npm install dayjs 명령 사용

⚠️ Day.js는 npm 패키지에 Typescript 선언도 함께 제공됩니다. Day.js를 가져오는 동안 문제가 발생하면 가이드를 확인하세요here.



기다릴 수 없어, 흥분! 가자...

Dayjs는 기본 Date.prototype과 어떻게 다릅니까?
기본 JavaScript Date 객체를 수정하는 대신 주변에 래퍼를 만들고 변경할 수 없는 객체를 반환합니다. 이 개체에 작업을 적용하면 개체의 새 인스턴스가 반환됩니다.

혼란스럽다 😕
변경 불가능한 날짜 객체 Dayjs가 우리에게 제공하는 것과 이것이 변경 가능한 일반 JavaScript 날짜 객체와 어떻게 다른지에 대해 혼란스러울 수 있습니다. 그러니 혼란을 일으키고 명확한 예를 들어 이해합시다.

let d = new Date();
console.log(d);  // 2022-06-06T08:13:28.387Z
let d1 = d.setMonth(2);
console.log(d); // 2022-03-06T08:13:28.387Z

// value of object changed.

let d = dayjs();
console.log(d); // {
  '$L': 'en',
  '$d': 2022-06-06T08:13:28.391Z,
  '$x': {},
  '$y': 2022,
  '$M': 5,
  '$D': 6,
  '$W': 1,
  '$H': 13,
  '$m': 43,
  '$s': 28,
  '$ms': 391
}
let d1 = dayjs.set('month',2);
console.log(d); // {
  '$L': 'en',
  '$d': 2022-06-06T08:13:28.391Z,
  '$x': {},
  '$y': 2022,
  '$M': 5,
  '$D': 6,
  '$W': 1,
  '$H': 13,
  '$m': 43,
  '$s': 28,
  '$ms': 391
}

// value of object remains same.

위의 예는 무엇을 합니까?
두 코딩 예제에서 먼저 날짜 개체를 만든 다음 월 값을 2로 설정합니다. 콘솔의 출력을 보면 첫 번째 코드에서 만든 개체가 수정되지만 Day.js를 사용하여 만든 개체를 찾을 수 있습니다. keep은 작업 후에도 동일하게 유지되므로 Day.js의 불변성을 보여줍니다.

이제 Day.js가 기본 JS 날짜 개체와 어떻게 다른지 이해했으므로 몇 가지 예제를 통해 Day.js를 이해하고 계속 진행해 보겠습니다.

Dayjs를 사용하여 현재 날짜 객체를 얻는 방법은 무엇입니까?

import dayjs from 'dayjs';
const d = dayjs();
console.log(d);
// {
  '$L': 'en',
  '$d': 2022-06-06T08:13:28.391Z,
  '$x': {},
  '$y': 2022,
  '$M': 5,
  '$D': 6,
  '$W': 1,
  '$H': 13,
  '$m': 43,
  '$s': 28,
  '$ms': 391
}

개체에는 연도, 월, 날짜, 시, 분, 초 등과 같은 유용한 속성이 많이 포함되어 있습니다.

UNIX Timestamp를 멋진 Dayjs 객체로 변환하는 방법은 무엇입니까?

const timeStampValue = 1318781876406  // in milliseconds
const d = dayjs(timeStampValue);

TimeStamp 값은 초 단위로도 가능합니다.

기존 날짜로 Day.js 객체를 만드는 방법은 무엇입니까?

const d = new Date(2018, 8, 18)
const day = dayjs(d)

Dayjs의 날짜가 유효한지 여부를 확인하는 방법은 무엇입니까?

const isValid = dayjs('2022-06-06').isValid; 
console.log(isValid);  // true

밀리초, 시, 월, 분...과 같은 특정 값을 얻는 방법은 무엇입니까?

현재 시간에서 밀리초 가져오기

dayjs().millisecond()

현재 시간에서 시간 가져오기

dayjs().hour()

Date of the month 및 Day of the week와 같은 필드에 대한 자세한 정보를 가져옵니다. here ;

dayjs 객체로 덧셈과 뺄셈을 수행하는 방법은 무엇입니까?

현재 시간에 1일 더하기

dayjs().add(1,'day');

현재 시간에서 1년 빼기

dayjs().subtract(1,'year')

현재 시간을 Day,DD/MM/YY 형식으로 표시하는 방법은 무엇입니까?

const d = dayjs();
console.log(d.format('dddd, DD/MM/YY')); // Tuesday, 07/06/22

여기서 dddd는 요일, DD 날짜, MM 월 및 YY 연도의 이름을 반환합니다. / , , 또는 이와 같은 기호를 매개변수로 더 많이 적용할 수 있습니다. 사용 가능한 형식이 더 있습니다here.

⚠️ 지금까지 플러그인 사용 없이 사용 가능한 방법 및 형식에 대해 논의했습니다. Dayjs는 또한 utc(UTC로 시간 변환용), IsLeapYear(윤년 확인용) 및 훨씬 더 많은 유용한 플러그인을 지원합니다.

플러그인을 설치하는 방법?

Day.js는 기본적으로 플러그인 지원을 제공하지 않지만 동일한 패키지에서 플러그인 하위 모듈 내에서 플러그인 지원을 제공합니다. 예를 들어 UTC로 시간을 제공하는 UTC 플러그인이 필요한 경우 아래와 같이 확장해야 합니다.

const dayjs = require("dayjs");  // import dayjs
const utc = require('dayjs/plugin/utc');  // import utc plugin 
dayjs.extend(utc) // connect the plugin with dayjs

weekOfYear 플러그인의 도움으로 올해의 주를 얻는 방법은 무엇입니까?

const dayjs = require("dayjs");
const weekOfYear = require("dayjs/plugin/weekOfYear); // import week of year plugin
dayjs.extend(weekOfYear);

console.log(dayjs().week()); // returns week of the year

더 많은 플러그인 체크아웃here

🏁 여기에서 Day.js와 학습 내용을 공유하고 기본 방법, 형식 및 플러그인에 대해 조금 논의했지만 day.js는 더 많은 형식과 플러그인 지원이 필요한 시간대 기반 시간 기능을 제공합니다.