[React] Recharts의 Treemap
·
React
Recharts 란?- React 기반의 데이터 시각화 라이브러리- 간편하게 차트와 시각적 데이터를 화면에 렌더링 할 수 있음- SVG 기반으로 구현되어 있어 브라우저 호환성 높음- 다양한 차트 타입 제공- 바 차트, 선 차트, 원형 차트 등 여러 차트 생성 가능- 사용자 정의 및 애니메이션 기능 지원됨  Treemap 개념 - 데이터를 계층적으로 시각화할 때 사용하는 차트- 데이터의 크기와 중요도를 표현하는 데 유용- Treemap의 각 사각형: 특정 범주나 값을 나타냄, 사각형의 크기나 색상이 데이터 특성에 따라 변함- 복잡한 데이터 셋을 한눈에 쉽게 파악 가능  Recharts의 Treemap 사용설치 npm install recharts yarn add recharts환경에 맞춰 설치  Treem..
[React] AG Grid
·
React
https://www.ag-grid.com/웹페이지 만들다보면 리스트 페이지를 많이 만드는 경우가 있다.가장 기본적인 게시판부터 실제 여러 프로젝트를 접하다보면 리스트 테이블 페이지를 많이 만들게 된다.테이블을 만들게 되면 당연 페이징,필터링, 데이터 정렬, 그룹화, 선택된 리스트 한번에 확인할 수 있게 하는 등 여러 기능이 요구되는데 이 모든 기능을 다 가진 웹 컴포넌트를 개발하려면 시간이 많이 든다. (엑셀에 익숙하면 웹페이지에서도 엑셀처럼 좋은 리스트 형식을 쓰고싶은건 사실.. )이 모든 기능을 가진 것을 AG Grid 로 사용할 수 있다! AG Grid와 같은 그리드 라이브러리는 서버에서는 데이터를 제공하고, 클라이언트는 데이터를 가공하고 표시하는 역할 분담하는 단일 책임 원칙(SRP)을 준수하는..