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

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

2022-10-19 last update

5 minutes reading tutorial javascript productivity webdev
이 기사에서 날짜 및 시간 작업을 쉽게 해주는 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는 더 많은 형식과 플러그인 지원이 필요한 시간대 기반 시간 기능을 제공합니다.