"REACT + Material UI Table 이용 admin dashboard 만들기"의 두 판 사이의 차이
DB CAFE
| 1번째 줄: | 1번째 줄: | ||
| − | = REACT 프로젝트 생성 = | + | = REACT + Materail UI Table 이용한 Admin DashBoard 구축 = |
| + | == REACT 프로젝트 생성 == | ||
<source lang=javascript> | <source lang=javascript> | ||
yarn create react-app react-admin-dashboard | yarn create react-app react-admin-dashboard | ||
</source> | </source> | ||
| − | ==추가 패키지 설치 == | + | ===추가 패키지 설치 === |
- @material-ui/icons : 여러가지 아이콘을 사용 | - @material-ui/icons : 여러가지 아이콘을 사용 | ||
- @material-ui/core : 다양한 기능을 가진 테이블 사용 | - @material-ui/core : 다양한 기능을 가진 테이블 사용 | ||
| 14번째 줄: | 15번째 줄: | ||
yarn add recharts | yarn add recharts | ||
</source> | </source> | ||
| − | == 불필요 파일 정리 == | + | === 불필요 파일 정리 === |
| − | === public/index.html === | + | ==== public/index.html ==== |
<source lang=javascript> | <source lang=javascript> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
| 46번째 줄: | 47번째 줄: | ||
</source> | </source> | ||
| − | === src/index.js === | + | ==== src/index.js ==== |
<source lang=javascript> | <source lang=javascript> | ||
import React from 'react'; | import React from 'react'; | ||
| 59번째 줄: | 60번째 줄: | ||
); | ); | ||
</source> | </source> | ||
| − | === src/App.js === | + | ==== src/App.js ==== |
<source lang=javascript> | <source lang=javascript> | ||
function App() { | function App() { | ||
| 66번째 줄: | 67번째 줄: | ||
export default App | export default App | ||
</source> | </source> | ||
| − | == 프로젝트 실행 하기 == | + | === 프로젝트 실행 하기 === |
<source lang=javascript> | <source lang=javascript> | ||
yarn start | yarn start | ||
</source> | </source> | ||
| − | = NavBar 와 TopBar 추가 = | + | == NavBar 와 TopBar 추가 == |
2024년 3월 10일 (일) 14:31 판
thumb_up 추천메뉴 바로가기
- DBA { Oracle DBA 명령어 > DBA 초급 과정 > DBA 고급 과정 }
- 튜닝 { 오라클 튜닝 목록 }
- 모델링 { 데이터 모델링 가이드 }
목차
1 REACT + Materail UI Table 이용한 Admin DashBoard 구축[편집]
1.1 REACT 프로젝트 생성[편집]
yarn create react-app react-admin-dashboard1.1.1 추가 패키지 설치[편집]
- @material-ui/icons : 여러가지 아이콘을 사용 - @material-ui/core : 다양한 기능을 가진 테이블 사용 - Recharts : 그래프 기능
yarn add @mui/material @emotion/react @emotion/styledyarn add recharts1.1.2 불필요 파일 정리[편집]
1.1.2.1 public/index.html[편집]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app"/>
<!- google font added --/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;0,1200;0,1300&display=swap" rel="stylesheet"/>
<style>
* {
font-family: 'Source Sans Pro', sans-serif;
}
</style>
<title>React Admin Dashboard</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>1.1.2.2 src/index.js[편집]
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render (
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);1.1.2.3 src/App.js[편집]
function App() {
return <div className="App">Hello</div>
}
export default App1.1.3 프로젝트 실행 하기[편집]
yarn start