홈페이지 입니다.
Day.js · 2kB JavaScript date utility library
Day.js · 2kB JavaScript date utility library
2kB JavaScript date utility library
day.js.org
설치입니다.
npm install dayjs # or yarn add dayjs |
포함입니다.
import dayjs from 'dayjs'; import isLeapYear from 'dayjs/plugin/isLeapYear'; // 윤년 판단 플러그인 import 'dayjs/locale/ko'; // 한국어 가져오기 dayjs.extend(isLeapYear); // 플러그인 등록 dayjs.locale('ko'); // 언어 등록 |
1. create-react-app를 이용하여 app010 프로젝트를 만듭니다.
| 1) 프로젝트 작성 D:\React> npx create-react-app app010 2) 폴더이동 D:\React> cd app010 3) bootstrap 설치 D:\React\app010> npm install dayjs 4) visual code 실행 D:\React\app010> code . 5) public 폴더와 src폴더의 모든 파일을 삭제합니다. |
2. public 폴더에 다음과 같이 index.html파일을 생성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Component</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
3. src폴더에 UseDayJs.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
// dayjs 설정
// npm i dayjs
import dayjs from 'dayjs';
import isLeapYear from 'dayjs/plugin/isLeapYear'; // 윤년 판단 플러그인
import 'dayjs/locale/ko'; // 한국어 가져오기
dayjs.extend(isLeapYear); // 플러그인 등록
dayjs.locale('ko'); // 언어 등록
const UseDayJs = () => {
return (
<div>
<p>{dayjs().format('YYYY-MM-DD(d)')}</p>
<p>{dayjs().format('YY-MM-DD(dd)')}</p>
<p>{dayjs().format('YYYY/MM/DD HH:mm:ss')}</p>
<p>{dayjs().format('hh:mm:ss A')}</p>
<p>{dayjs('20220516 013023').format('YYYY-MM-DD(dddd) hh:mm:ss A')}</p>
<p>시간 : {dayjs().get('hour')} : {dayjs().get('minute')} : {dayjs().get('second')}</p>
{/* 월은 0부터 시작 */}
<p>날짜 : {dayjs().get('year')} - {dayjs().get('month') + 1} - {dayjs().get('date')}</p>
<p>윤년 판단 : {dayjs().isLeapYear() ? "윤년" : "평년"} :
{dayjs('2000-04-01').isLeapYear() ? "윤년" : "평년"} :
{dayjs('2001-04-01').isLeapYear() ? "윤년" : "평년"}</p>
</div>
)
}
export default UseDayJs;
|
cs |
4. src폴더에 App.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
|
import UseDayJs from "./UseDayJs";
function App(){
return (
<>
< UseDayJs />
</>
);
}
export default App;
|
cs |
5. src폴더에 index.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);
|
cs |
6. visual code에서 [새 터미널] 창을 열고 "npm start"명령으로 애플리케이션을 시작합니다.
실행 화면 입니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 26] <React.Fragment> vs <Fragment> vs <> (0) | 2024.10.30 |
|---|---|
| [React Exam 25] google font 사용하기 (1) | 2024.10.21 |
| [React Exam 23] 이미지 홀더 사용하기 (0) | 2024.10.21 |
| [React Exam 22] bootstrap icon 사용하기 (0) | 2024.10.21 |
| [React Exam 21] bootstrap 사용하기 (0) | 2024.10.21 |
