REACT + Material UI Table 이용 admin dashboard 만들기
DB CAFE
thumb_up 추천메뉴 바로가기
- DBA { Oracle DBA 명령어 > DBA 초급 과정 > DBA 고급 과정 }
- 튜닝 { 오라클 튜닝 목록 }
- 모델링 { 데이터 모델링 가이드 }
목차
1 REACT + Materail UI Table 이용한 Admin DashBoard 구축[편집]
- 참조 https://www.youtube.com/watch?v=wYpCWwD1oz0&list=PLEYW3pZS6IQ_a-iYAno4VsZonrikphq8L
- 참조 https://citylock77.tistory.com/128
1.1 REACT 프로젝트 생성[편집]
yarn create react-app react-admin-dashboard
1.1.1 추가 패키지 설치[편집]
- @material-ui/icons : 여러가지 아이콘을 사용 - @material-ui/core : 다양한 기능을 가진 테이블 사용 - Recharts : 그래프 기능
yarn add @mui/material @emotion/react @emotion/styled
yarn add recharts
1.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 App
1.1.3 프로젝트 실행 하기[편집]
yarn start