React Admin - 0. 프로젝트 준비

React Admin - 0. 프로젝트 준비

 

유튜브에서 admin dashboard 를 검색해서 나온 어드민 패널을 따라 만들어 볼 예정이다. 

 

 

프로젝트를 위한 새로운 폴더를 생성하고 시작한다. 

 

react 프로젝트를 생성 

yarn create react-app react-admin

이하 생략... 

그럼 이제 프로젝트에 들어가서 작업을 시작한다. 

 

cd react-admin-dashboard

 

추가 패키지 설치 

 

- @material-ui/icons :  여러가지 아이콘을 사용할 수 있다. 

- @material-ui/core : 다양한 기능을 가진 테이블 사용가능

- Recharts  : 그래프 기능 사용

 

yarn add @mui/material @emotion/react @emotion/styled
yarn add recharts

 

생성된 폴더로 이동해서 필요한 패키지들을 추가한다. 

 

 

VS code 를 이욯해서 프로젝트를 오픈하면 기본 파일들이 생성된 것을 볼수 있다. 여기서 앞으로 사용되지 않는 파일을 삭제하고 시작한다. 

 

그리고 index.html 파일도 다음과 같이 심플하게 정리한다. 

 

폰트 추가 

구글 폰트에서 원한느 폰트를 찾아서 추가한다. 이런 프로젝트에서는 Source Sans Pro 를 추가한다. 

index.html 파일에 구글 폰트를 추가한다. 

다음은 index.js 파일을 정리한다. 

마지막으로 App.js 를 다음과 심플하게 한다. 

여기까지 하고 프로젝트를 실행한다. 

아무것도 없는 화면에 "Hello" 만 보인다면 정상적으로 실행이 된 것이다.

여기서 한가지 빠진것으로 구글 폰트를 적용하는 부분인데, 일단 index.html 에 직접 적용해 보면, 

다시 프로젝트를 실해한다. 그럼 변경된 폰트가 적용된 것을 확인할수 있다. 

 

 

프로젝트 준비 끝...