IT Dev Log

React Admin - 4. featured info 컨포넌트 만들기 home 페이지를 만들었으니 안에 들어갈 featured info 컴포넌트를 생성해서 화면에 추가할 예정이다. 새로운 featuredInfo 컴포넌트를 생성한다. component 폴더를 만들고, jxs와 css 파일도 추가한다. featured 아이템을 꾸미기위해서 featured 와 featuredItem class 만 지정한 컴포넌트를 만든다. featuredInfo 에서는 Revenue, Sales, Cost 에 대한 정보를 보여줄 예정이다. 먼저 Revenue 에는 money, 지난분기와 비교 정보까지 들어간다. 이렇게 만들어진 컴포넌트를 home 페이지에 추가해보자. 여기서 moneyRate 의 경우, 증가/감소에 따라서 ..

목차 2021.10.24 - [REACT/Admin Dashboard - project #1] - React Admin - 0. 프로젝트 준비 2021.10.24 - [REACT/Admin Dashboard - project #1] - React Admin - 1. navbar topbar 2021.11.02 - [REACT/Admin Dashboard - project #1] - React Admin - 2. side bar React Admin - 3. Home page topbar 와 sidebar 가 준비되었으니 컨텐츠가 들어가는 페이지를 만들 예정이다. 1. home page 만들기 페이지를 저장할 pages 폴더와 Home.jsx / home.css 를 생성한다. src > pages > ho..

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