IT Dev Log

목차 2021.10.24 - [REACT/Admin Dashboard - project #1] - React Admin - 0. 프로젝트 준비 2021.10.24 - [REACT/Admin Dashboard - project #1] - React Admin - 1. navbar topbar React Admin - 2. side bar 이번에는 sidebar 를 이용해서 왼쪽에 메뉴를 만든다. 새로운 sidebar 컨포넌트를 위해서 폴더와 파일을 생성한다. Sidebar.jsx 파일에 함수형 컴포넌트(functional componet) 를 생성한다. 새로 생성한 컴포넌트가 정상적으로 동작하는지 보기 위해서 App.js 에 추가해 화면으로 확인해보자. 이제 서버를 구동 시키면 sidebar 와 other..

목차. 2021.10.24 - [REACT/Admin Dashboard - project #1] - React Admin - 0. 프로젝트 준비 React Admin - 1. navbar topbar 이번에는 admin dashboard 에 navbar ( & topbar) 를 추가할 예정이다. 1. topbar 컨포넌트 생성 src 폴더 아래에 components/topbar 폴더를 추가한다. 그리고 Topbar.jsx 파일을 생성한다. Topbar.jsx 에 Topbar 함수형 컨포넌트를 생성하고 "topbar" 를 보여주는 기능만 넣는다. react 는 작은 단위의 컨포넌트를 만들어서 이를 이용해 화면을 구성하는 구조를 가지고 있다. 컨포넌트에는 클래스형 / 함수형이 있는데, 대부분의 react 프..

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..