Day.js를 사용하여 애플리케이션에서 날짜 및 시간 작업을 쉽게 처리

소개

자바스크립트에서 날짜와 시간을 다루는 것은 어려울 수 있으며, 특히 특정 형식이 필요한 경우에는 더욱 그렇습니다. 이러한 복잡성으로 인해 애플리케이션 내 날짜와 시간의 불일치가 발생하는 경우가 많습니다. 결과적으로 개발자는 Day.js와 같은 외부 도구 및 라이브러리를 사용하여 이러한 작업을 보다 쉽고 정확하게 관리합니다.

이 기사에서는 Day.js가 무엇인지, 기본 기능, 프로젝트에서 사용하는 방법, 플러그인으로 기능을 확장하는 방법 및 브라우저 지원을 살펴보겠습니다.

Day.js란 무엇인가요?

Day.js는 다양한 날짜 및 시간 작업을 처리하도록 설계된 사용하기 쉬운 경량 자바스크립트 라이브러리로, 웹 애플리케이션 내에서 쉽게 읽을 수 있는 형식으로 표시할 수 있습니다.

라이브러리는 클라이언트 측(브라우저) 환경과 서버 측(Node.Js) 환경 모두에서 사용할 수 있습니다.

최신 웹 개발에서 개발자는 애플리케이션을 구축할 때 속도와 성능을 우선시하려고 합니다. 대규모 가져오기 및 부피가 큰 라이브러리 파일은 이러한 속성을 방해하는 두 가지 일반적인 방해 요소입니다.

다행히 Day.js는 2KB에 불과한 작은 파일 크기로 이러한 문제를 해결하므로 애플리케이션 성능을 저하시키지 않고 날짜 및 시간 작업을 관리하는 데 이상적인 선택입니다.

설치

애플리케이션에서 Day.js 라이브러리 작업을 시작하려면 먼저 해당 라이브러리를 포함해야 합니다.

클라이언트측에서 라이브러리를 사용하려면

HTML 문서의 태그입니다.

<script src="path/to/dayjs/dayjs.min.js"></script>

또는 jsdeliver CDN과 같은 CDN을 통해 라이브러리에 액세스할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

라이브러리를 애플리케이션에 종속성으로 설치하려면 다음 명령을 실행하세요.

npm install dayjs

다음으로 dayjs를 자바스크립트 파일로 가져옵니다.

import dayjs from 'dayjs';

새 Day.js 인스턴스를 생성하려면 dayjs() 함수를 호출하세요. 인수가 전달되지 않으면 현재 날짜와 시간을 나타내는 객체를 반환합니다.

const currentDate = dayjs();

그런 다음 이 개체를 참조하여 날짜와 시간에 대한 다양한 작업을 수행할 수 있습니다.

Day.js 객체는 변경할 수 없으므로 객체를 수정하는 모든 작업은 업데이트된 날짜와 시간이 포함된 새 인스턴스를 반환합니다.

ISO 날짜/시간 형식

날짜와 시간을 효과적으로 사용하려면 먼저 ISO와 해당 DateTime 형식 문자열을 잘 알아야 합니다.

ISO(국제표준화기구)는 다양한 산업 분야에 걸쳐 국제 표준을 개발 및 발표하여 전 세계적으로 일관성과 품질을 보장하는 글로벌 비정부 기구입니다.

ISO에서 제공하는 표준 중 하나는 날짜와 시간을 전 세계적으로 표현하는 형식입니다.

일반적인 ISO DateTime 형식 문자열은 다음과 같습니다.

<script src="path/to/dayjs/dayjs.min.js"></script>

• 요일과 시간 사이의 T는 문자열에서 날짜와 시간을 구분하는 구분 기호 역할을 합니다.
• 문자열 끝의 Z는 Zulu를 의미하며 시간이 UTC(협정 세계시)임을 나타냅니다.

기본 JavaScript Date 개체는 임의의 날짜를 ISO 문자열로 변환하는 데 도움이 되는 toISOString() 메서드를 제공합니다.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

이제 ISO DateTime 형식을 이해했으므로 Day.js 라이브러리의 몇 가지 주요 기능을 살펴보겠습니다.

Day.js의 주요 기능 살펴보기

Day.js 라이브러리에는 다양한 기능이 포함되어 있으며 그 중 일부는 날짜와 시간의 형식 지정, 구문 분석, 조작, 쿼리 및 유효성 검사에 사용할 수 있습니다. 이러한 주요 기능을 어떻게 활용할 수 있는지 살펴보겠습니다.

파싱

파싱 기능은 특정 날짜와 시간을 가진 새로운 Day.js 객체를 생성하는 간단한 방법을 제공합니다. 이는 기본 JavaScript 날짜 객체, 날짜 문자열 또는 Unix 타임스탬프를 dayjs() 함수에 전달하여 수행할 수 있습니다.

npm install dayjs

서식 지정

형식 지정 기능을 사용하면 날짜와 시간을 특정 형식으로 표시할 수 있습니다. 날짜와 시간에 대한 서식을 지정하려면 다음 방법을 사용합니다.

• format(): 형식 문자열을 수신하고 해당 사용자 정의 형식으로 날짜와 시간을 반환합니다.

import dayjs from 'dayjs';

조작

조작 기능을 사용하면 날짜와 시간을 다양한 방식으로 조정할 수 있습니다. 이는 다음 방법을 사용하여 수행할 수 있습니다.

• add(number, timeUnit): 날짜에 지정된 시간을 추가합니다.

const currentDate = dayjs();

• subtract(number, timeUnit): 날짜에서 지정된 시간을 뺍니다.

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

• startOf(timeUnit): 일, 주, 월 등의 시작과 같은 특정 시간 단위의 시작으로 날짜를 설정합니다.

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

• endOf(timeUnit): 일, 주, 월 등 특정 시간 단위의 끝으로 날짜를 설정합니다.

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

쿼리 중

조회 기능을 통해 날짜와 시간을 확인하고 비교할 수 있습니다. 이는 부울 값을 반환하는 다음 메서드를 사용하여 수행할 수 있습니다.

• isBefore(date): 날짜가 지정된 날짜보다 이전인지 확인합니다.

<script src="path/to/dayjs/dayjs.min.js"></script>

• isAfter(date): 날짜가 지정된 날짜 이후인지 확인합니다.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

• isSame(date): 날짜가 지정한 날짜와 같은지 확인합니다.

npm install dayjs

• isBetween(date1, date2): 날짜가 지정된 두 날짜 사이에 있는지 확인합니다.

import dayjs from 'dayjs';

• isLeapYear(): 해당 날짜의 연도가 윤년인지 확인합니다.

const currentDate = dayjs();

검증 중

유효성 검사 기능을 사용하면 제공된 날짜 형식이 유효한지 확인할 수 있습니다. 이 작업은 다음 방법을 사용하여 수행할 수 있습니다.

• isValid(): 날짜가 올바르게 구문 분석되었는지 여부를 나타내는 부울 값을 반환합니다.

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

플러그인으로 기능 확장

Day.js 라이브러리는 기본 기능을 확장하는 데 사용할 수 있는 다양한 독립 플러그인을 제공합니다. 이를 통해 개발자는 애플리케이션에서 더 복잡한 날짜 및 시간 형식을 쉽게 수행할 수 있습니다.

플러그인을 사용하려면 먼저 플러그인을 포함시킨 다음 확장() 메서드를 사용하여 dayjs를 확장해야 합니다.

• CDN을 통해 플러그인을 포함하려면:

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

• 플러그인을 사용하여 dayjs를 확장하려면:

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

• ES6 구문을 사용하여 플러그인을 포함하고 확장하려면:

const formattedDate = dayjs().format("HH:mm:ss DD-MM-YYYY");
console.log(formattedDate); // '19:57:36 17-08-2024'

이제 애플리케이션에서 사용 가능한 두 가지 플러그인을 어떻게 사용할 수 있는지 살펴보겠습니다.

캘린더 플러그인

캘린더 플러그인은 사람이 더 읽기 쉬운 형식으로 날짜와 시간을 표시하는 편리한 방법을 제공합니다. 이벤트 알림, 프로젝트 관리, 작업 계획 등과 같은 애플리케이션에 사용하기에 이상적입니다.

이벤트 알림 앱에서 이 플러그인을 사용하는 방법에 대한 간단한 예를 살펴보겠습니다.

시작하려면 CDN을 통해 Day.js 라이브러리와 캘린더 플러그인을 포함해야 합니다.

const futureDate = dayjs().add(5, 'days'); // Adds 5 days to the current date
console.log(futureDate.format()); // Returns the added date in an ISO date format

다음으로 자바스크립트 파일 내에서 캘린더 플러그인으로 dayjs를 확장하고 dayjs() 함수를 호출하여 새 Day.js 인스턴스를 생성합니다.

const pastDate = dayjs().subtract(2, 'months');  // Subtracts 2 months from the current date
console.log(pastDate.format()); // Returns the subtracted date in an ISO date format

캘린더 플러그인은 날짜와 시간 표시 형식을 지정하는 사용자 정의 옵션을 제공합니다. 다음과 같은 정확한 속성을 가진 개체를 사용하여 사용자 정의 형식을 정의할 수 있습니다.

const startOfMonth = dayjs().startOf('month'); // Sets the date to the start of the month
console.log(startOfMonth.format()); // Returns the current date from the start of the month in an ISO date format

객체에서 문자열 값의 단어를 [] 대괄호로 묶어 이스케이프 처리합니다.

이 개체를 사용하여 이벤트 알림 앱에 이벤트 날짜와 시간을 표시합니다.

const endOfMonth = dayjs().endOf('month'); // Sets the date to the end of the month
console.log(endOfMonth.format()); // Returns the current date from the end of the month in an ISO date format

이 예에서 eventDate는 현재 날짜로부터 몇 달 후의 날짜로 설정됩니다. 이 경우 customFormat 객체의 sameElse 속성에 제공된 형식을 사용하여 날짜가 표시됩니다.

이벤트 날짜가 결국 지난 주의 하루와 같이 과거 날짜가 되는 경우 예를 들면 다음과 같습니다.

<script src="path/to/dayjs/dayjs.min.js"></script>

그런 다음 customFormat 개체의 lastWeek 속성에 지정된 형식을 사용하여 날짜가 표시됩니다.

RelativeTime 플러그인

RelativeTime 플러그인은 사용자 인터페이스에서 날짜와 시간 차이를 상대적인 설명으로 표시하기 위해 일반적으로 사용되는 day.js 플러그인입니다.

플러그인은 과거와 미래 시간을 표시하기 위해 4개의 다양한 API를 제공합니다.

• .from(date, [withoutSuffix]): 호출되는 날짜가 제공된 날짜로부터 얼마나 떨어져 있는지 설명하는 상대 시간 문자열을 반환합니다. WithoutSuffix 인수가 true이면 출력에서 ​​"ago" 접미사를 제거합니다.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

• .to(date, [withoutSuffix]): 제공된 날짜가 호출되는 날짜로부터 얼마나 떨어져 있는지 설명하는 상대 시간 문자열을 반환합니다. WithoutSuffix 인수가 true이면 출력에서 ​​"in" 접두사를 제거합니다.

npm install dayjs

• .fromNow([withoutSuffix]): 호출되는 날짜가 현재 날짜 및 시간으로부터 얼마나 떨어져 있는지 설명하는 상대 시간 문자열을 반환합니다. WithoutSuffix 인수가 true이면 출력에서 ​​"ago" 접미사를 제거합니다.

import dayjs from 'dayjs';

• .toNow([withoutSuffix]): 현재 날짜 및 시간이 호출되는 날짜로부터 얼마나 떨어져 있는지 설명하는 상대 시간 문자열을 반환합니다. WithoutSuffix 인수가 true이면 출력에서 ​​"in" 접두사를 제거합니다.

const currentDate = dayjs();

RelativeTime 플러그인을 사용하여 애플리케이션의 댓글 섹션에 게시된 댓글의 타임스탬프를 표시하는 방법에 대한 간단한 예를 살펴보겠습니다.

평소처럼 가장 먼저 취해야 할 단계는 다음과 같이 dayjs와 상대 시간 플러그인을 포함하는 것입니다.

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

그런 다음 상대 시간 플러그인을 사용하여 dayjs를 확장합니다.

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

이후에는 현재 시간을 기준으로 댓글이 게시된 시간을 표시할 수 있습니다.

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

위 코드가 실행될 당시 commentPostedTime 변수가 현재 시간으로 설정되어 댓글에 다음과 같은 상대 시간 문자열이 출력되었습니다.

브라우저 지원 및 개발자 인기

Day.js 라이브러리는 모든 최신 웹 브라우저에서 지원됩니다. 1,900만개 이상의 NPM 다운로드

를 달성한 활발한 커뮤니티를 보유하고 있습니다.

라이브러리는 46,000명이 넘는 github 스타와 330명의 기여자로 활발히 유지 관리되어 최신 상태를 유지하고 최신 JavaScript 표준과 호환됩니다.

결론

결론적으로 Day.js 라이브러리를 활용하여 애플리케이션에서 날짜 및 시간 작업을 처리하면 속도와 성능을 유지할 뿐만 아니라 서식 지정, 쿼리에 쉽게 사용할 수 있는 즉시 사용 가능한 기능을 제공하여 시간을 절약하는 데 도움이 됩니다. , 날짜와 시간을 조작, 구문 분석 및 검증합니다.

위 내용은 Day.js를 사용하여 애플리케이션에서 날짜 및 시간 작업을 쉽게 처리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!