Ect./Library21 리액트 Chart 라이브러리 자바스크립트 기반 차트 라이브러리 1. Chartjs Chart.js Chart.js Simple yet flexible JavaScript charting library for the modern web www.chartjs.org 2. C3.js C3.js | D3-based reusable chart library C3.js | D3-based reusable chart library Comfortable C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. Customizable C3 giv.. 2023. 8. 26. 리액트 테이블(표) 라이브러리 종류 1. react-base-table https://github.com/Autodesk/react-base-table GitHub - Autodesk/react-base-table: A react table component to display large datasets with high performance and flexibility A react table component to display large datasets with high performance and flexibility - GitHub - Autodesk/react-base-table: A react table component to display large datasets with high performance... github.c.. 2023. 8. 25. Bundler (feat.vite) 번들러 개발자가 직접 처리해줘야할 일들을 대신 처리해주는 것 (transfiler) https://www.youtube.com/watch?v=UdTD_NAWxyE yarn create vite vite 로 만들어준 프로젝트에 yarn build 로 빌드해주면 나오는 dist 폴더를 확인해준다. assets 폴더에 존재하는 파일은 vite로 생성해준 프로젝트를 압축시킨 내용이므로 얼핏 보기에 알아보기 힘들다. 이러한 파일을 vite.config.js 파일의 build 안에 minify을 false로 설정하면 그나마 보기 좋게 바뀌는데 export default defineConfig({ plugins: [react()], esbuild: { jsxInject: `import React from 'react.. 2023. 7. 31. React Chart 라이브러리 소개 기본적으로 차트 라이브러리는 자바스크립트 기준으로 만들어져 있다. Chartjs, C3js, D3js ... 이러한 라이브러리를 리액트에서 사용해주기 위해선 리액트 래퍼 형식으로 된 라이브러리를 사용해줘야 한다. Chartjs : 일반적인 차트 그릴 때 사용, 단순하고 유연, 간단한 데이터 표현에 최적되어 있으나 확장성은 부족하다는 평이 있다. D3js : 라이브러리 패키지의 크기가 작은 편이며 svg 를 활용한다. 웹 표준에 가깝고 활용가 높지만, 러닝커브가 높으며 이미지 요소가 많아질 경우 canvas에 비해 성능이 좋지 못할 가능성이 있다. 회사에서 쓸 라이브러리라 라이선스를 고려하여 오픈 소스라서 제한 없이 사용할 수 있는 리액트 전용 차트 라이브러리를 정리했다. react-chartjs-2 ht.. 2023. 7. 24. 이전 1 2 3 4 5 6 다음
