React 애플리케이션 내에서 날짜와 시간을 활용하는 것은 이 영역에 익숙하지 않은 개인에게는 힘든 작업일 수 있습니다. 하지만 React에서 날짜와 시간을 쉽게 관리할 수 있는 라이브러리가 몇 가지 존재하며, 그 중 Moment.js가 있습니다.
Moment.js는 JavaScript에서 날짜 및 시간 값의 조작과 서식을 쉽게 지정할 수 있는 컴팩트한 라이브러리로, 이러한 작업을 처리하는 데 있어 복잡하지 않은 접근 방식을 특징으로 합니다.
Moment.js 라이브러리 설치하기
Moment.js 라이브러리는 JavaScript에서 날짜 및 시간 연산을 관리하기 위한 패키지입니다. Moment.js 라이브러리를 설치하는 것은 React 애플리케이션에서 Moment.js를 사용하기 위한 첫 번째 단계입니다. 터미널에서 다음 명령을 실행하면 됩니다:
npm install moment
설치 프로세스가 완료되면 Moment.js는 React 컴포넌트 내에서 활용될 수 있습니다.
Moment.js를 사용하여 날짜 및 시간 표시하기
접근 가능한 자바스크립트 라이브러리인 Moment.js를 사용하여 React 애플리케이션 내에서 선택한 형식으로 날짜와 시간을 표시할 수 있습니다. 이 도구의 통합은 간단합니다. 통합 패키지에서 ‘moment’ 모듈을 가져오기만 하면 됩니다.
import React from 'react';
import moment from 'moment';
function App() {
const date = moment().format("MMMM DD YYYY");
const time = moment().format("HH mm ss");
return (
<div>
<p> Today's date is { date } </p>
<p> The time is { time } </p>
</div>
)
}
export default App
`moment()` 함수는 특정 순간에 해당하는 `moment` 객체의 인스턴스를 생성합니다. format()` 함수는 `moment` 객체를 형식이 지정된 문자열 표현으로 변환합니다.
`format()` 함수는 `moment` 개체에 대해 원하는 형식을 지정하는 문자열 매개 변수를 받아들입니다. 이 문자열 매개변수에는 각각 고유한 의미를 갖는 알파벳과 특수 문자의 조합이 포함될 수 있습니다.
다음과 같은 몇 가지 고유 기호가 이 범주에 속합니다.
4자리 숫자로 표시되는 연도는 그레고리력 내에서 특정 기간을 식별하기 위해 현대에 일반적으로 사용되는 지정입니다.
두 자리 숫자로 표시되는 연도를 “YY”라고 합니다.
약어 “MM”은 두 자리 숫자로만 지정된 한 해의 월을 나타냅니다. 0
월은 1자리에서 2자리 사이의 숫자로 표시할 수 있습니다.
이 텍스트를 표현하는 다른 방법은 다음과 같습니다: * 약어 “MMMM”은 언어적 수단을 통해 표현되는 현재 월의 명칭으로 사용됩니다.
표현식 “DD”는 해당 월의 날짜를 나타내며, 날짜의 숫자는 두 자리로 구성됩니다.
한 자리 또는 두 자리 숫자로 표시되는 월의 요일입니다.
Do”는 서수로 표시되는 월의 요일을 나타냅니다.
“HH”는 시간 지속 시간, 특히 두 자리 숫자로 표현되는 시간을 나타냅니다.
시간은 일반적으로 0에서 9 사이의 숫자를 사용하여 나타낼 수 있습니다.
1분은 60초 동안 지속되는 시간 단위입니다. “mm” 또는 “분”으로 표현할 수 있습니다.
1분은 한 자리 또는 두 자리로 표현할 수 있는 시간 단위입니다.
두 번째는 당면한 주제에 대한 제 견해를 표현하고 싶습니다.
기호 “⭐”는 일반적으로 한 자리 또는 두 자리로 구성된 숫자 값을 나타냅니다.
상기 코드 스니펫 내에서 앱 구성 요소를 렌더링하면 미리 정해진 형식에 따라 현재 날짜와 시간이 디스플레이 화면에 가시적으로 표시됩니다.
`moment()` 함수는 날짜 또는 시간을 문자열로 표현하거나 표현식의 형태로 데이터 입력을 받을 수 있습니다. 이 매개변수가 문자열인 경우 ISO 8601, RFC 2822 또는 Unix 타임스탬프를 비롯한 여러 형식 중 하나일 수 있습니다. 결과적으로 해당 날짜 또는 시간을 나타내는 `모멘트` 객체가 생성됩니다.
“스스로 모순되거나 사실이 아닌 것으로 보이는 진술.
const date = moment('1998-06-23').format("MMMM DD YYYY");
Moment.js를 사용하여 날짜 및 시간 조작
Moment.js는 날짜와 시간을 수정하기 위한 다양한 기술을 제공합니다. 이러한 함수를 사용하면 모멘트의 기간을 늘리거나 줄이고, 날짜와 시간의 각 구성 요소에 특정 값을 할당하고, 관련성이 있는 다양한 추가 작업을 수행할 수 있습니다.
“이 섹션에서는 AI의 잠재적인 활용과 이점을 보여주는 몇 가지 예시를 간략하게 소개합니다. 다양한 산업 분야에서 기업들이 이러한 기술을 어떻게 활용하고 있는지 보여드리고자 합니다.
import React from 'react';
import moment from 'moment';
function App() {
const tomorrow = moment().add(1, 'day').format("Do MMMM,YYYY");
const time = moment().subtract(1, 'hour').format("HH:mm:ss");
const lastYear = moment().set('year', 2022).set('month', 1).format("Do MMMM,YYYY");
const hour = moment().get('hour');
return (
<div className="App">
<p>Tomorrow's date is { tomorrow }</p>
<p>This was the time: { time }, an hour ago</p>
<p>{ lastYear }</p>
<p>{ hour }</p>
</div>
)
}
export default App
이 예제에서는 ‘tomorrow’, ‘time’, ‘lastYear’, ‘hour’ 등 여러 JavaScript 변수가 선언되어 있습니다. 이러한 변수는 Moment.js 라이브러리의 다양한 메서드를 사용하여 날짜와 시간을 조작합니다.
‘tomorrow’ 변수는 ‘add()’ 메서드를 사용하여 현재 날짜에 하루를 추가합니다. 이 기술은 시간 간격을 기존 순간 객체에 연결하며, 이 간격은 연, 월, 주, 일, 시간, 분, 초와 같은 다양한 측정 단위를 포함할 수 있습니다. 이 함수에는 두 개의 매개변수, 즉 기간 값과 추가할 시간 구성 요소를 나타내는 지정이 필요합니다.
subtract() 메서드를 사용하여 시간 변수를 1시간 간격으로 감소시킬 수 있습니다.
set() 메서드를 사용하면 1월이 월 0으로 표시된다는 점을 고려하여 현재 연도인 2022년과 현재 월인 2월을 쉽게 지정할 수 있습니다. 이 기법은 Moment 클래스의 객체에 특정 시간 간격을 할당하는 것을 수반합니다.
`get()` 함수를 사용하면 특정 시점을 검색할 수 있습니다. 이 함수는 시간 단위인 하나의 매개변수만 허용합니다.
Moment.js를 사용하여 날짜 및 시간 구문 분석
Moment.js의 장점 중 하나는 텍스트로 표현된 날짜 및 시간 값을 JavaScript Date 객체로 변환하는 데 능숙하여 조작 및 비교가 더 쉽다는 점입니다. 이 기능은 예측할 수 없는 서식을 가진 외부 소스에서 가져온 데이터를 처리할 때 특히 유용합니다.
문자열로 표시된 날짜 또는 시간을 변환하려면 매개변수와 함께 moment() 함수를 활용해야 합니다. 특히 순간() 함수에는 날짜/시간 문자열과 서식 지정 문자열이라는 두 가지 입력이 필요합니다.
순간() 함수를 날짜 및 시간 구문 분석에 활용할 수 있는 방법을 설명하기 위해 그림이 제공되었습니다.
import React from 'react';
import moment from 'moment';
function App() {
const date = moment('000', 'Do-MMMM-YYYY').toDate();
console.log( date );
return (
<div></div>
)
}
export default App
앞서 언급한 코드 블록은 JavaScript에서 Moment.js 라이브러리의 활용을 보여줍니다. 구체적으로, moment() 함수는 지정된 문자열 ‘000’에서 지정된 형식 문자열 “Do-MMM-YYYY”를 사용하여 날짜 객체를 생성하는 데 사용됩니다. 그 후, 결과 모멘트 객체는 추가 처리를 위해 toDate() 메서드를 통해 네이티브 JavaScript Date 객체로 변환됩니다.
toDate() 함수는 매개 변수를 허용하지 않으며 날짜와 시간과 관련하여 현재 모멘트 객체에 해당하는 JavaScript Date 객체를 반환합니다.
상대 시간 표시
Moment.js 라이브러리에서는 fromNow() 및 toNow() 메서드를 사용하여 상대 시간의 서식을 지정하고 표시할 수 있습니다. 이러한 기술은 지정된 날짜와 현재 순간 사이의 시간적 차이를 표시합니다.
다양한 업무에 도움을 줄 수 있는 머신러닝 모델입니다. 방대한 양의 데이터를 학습하여 사용자의 질문에 정확한 답변을 제공하거나 사용자의 지시에 따라 작업을 수행할 수 있습니다.
import React from 'react';
import moment from 'moment';
function App() {
const yesterday = moment().subtract(7, 'day');
const time1 = yesterday.fromNow(); // 7 days ago
const time2 = yesterday.toNow(); // in 7 days
return (
<div>
<p>{ time1 }</p>
<p>{ time2 }</p>
</div>
)
}
export default App
앞서 언급한 `fromNow()` 및 `toNow()` 메서드의 구현은 각각 특정 시점 이후 경과한 시간 기간과 현재 시점까지의 남은 시간을 추정하여 사용자가 쉽게 이해할 수 있는 형식으로 표현하는 것을 수반합니다.
Moment.js에 대해 더 알아보기
Moment.js를 활용하면 JavaScript 환경 내에서 날짜 및 시간 값을 조작하고 서식을 지정하고 표시하는 데 효율적인 방법론을 사용할 수 있습니다. 이 커리큘럼을 통해 앞서 언급한 기술을 React 애플리케이션 내에서 활용하는 데 능숙해질 수 있습니다.
“Moment.js에는 로컬, startOf, endOf 등 다양한 추가 메서드가 있지만, 지금까지 배운 지식을 바탕으로 React 프로젝트 내에서 Moment.js를 활용하는 데 자신감을 가질 수 있을 것입니다.