[FrontEnd] 대시보드 개발하기

근데 이제 차트들이 컴포넌트화 된

🥅 Goal

• Phase 1

• Phase 2

🛠️ Tech Stack

• React.js

👩🏻‍🏫 Subject

React useState, useEffect with Filtering

• Ref

  • https://react.vlpt.us/basic/07-useState.html

  • https://codingapple.com/unit/react-setstate-async-problems/

React Hook

Event Handling

Props, State

Re-rendering Conditions

Dropdown

Concat, Map, Filter

DnD(Drag and Drop)

React-Grid-Layout

React-DnD

• resizing은 따로 구현

React-Beautiful-Dnd

React-Rnd

React Theme Change with Material-UI

React Styled Components

CSS

Component 배치하기

React Snowflaskes

.js vs .jsx

React Proxy 설정하기

React 18 + Redux + JWT Login 기능 구현하기

High Chart 그래프 사용하기

React.js와 Highcharts를 사용한 대시보드 제작

• React.js를 사용하여 실시간 데이터 대시보드를 개발함

• Highcharts를 활용하여 다양한 데이터 시각화 차트를 구현함

• Redux를 통해 애플리케이션 상태를 효율적으로 관리함

• RESTful API와 통합하여 실시간 데이터를 가져오고 업데이트함

• 반응형 디자인을 적용하여 다양한 디바이스에서 최적의 사용자 경험을 제공함

• 성능 최적화를 통해 부드러운 사용자 경험을 제공함

Reference