기록

1. Highcharts 개념과 사용[ Highcharts 이란? ]자바스크립트만으로 다양한 차트를 그려낼 수 있는 차트 라이브러리로, 웹 페이지에서 실시간으로 변경되는 다양한 차트를 그려줄 때 매우 유용한 라이브러리입니다.  [ Highcharts 설치 ]npm install highcharts  개발환경 : React 18, highcharts 6.0.4[ Highcharts 생성 ]import React, { Component } from "react";import Highcharts from "highcharts";const defaultOptions = {  chart: { width: 1560,      height: 250,   },  xAxis: {    crosshair: true..

도서 관리 프로젝트에서 공통적인 4개 항목들을 개별적으로 변경해야 하는 작업을 맡게 되었습니다. 일반적으로 이러한 변경 작업은 모델 창을 사용하여 수행됩니다. 그러나, 모델 창을 통해 데이터를 하나씩 수정하는 방식은 사용자 경험을 저하시키고 작업 효율성을 떨어뜨릴 수 있습니다. 이 문제를 해결하기 위해, 더 가벼운 대안으로 툴팁을 활용해 보았습니다.   1. React-Tooltip 개념과 사용[ React-Tooltip 이란? ]툴팁은 사용자에게 필요한 정보를 간결하고 직관적으로 제공할 수 있는 도구로, 쉽게 말해 말풍선이나 복잡한 UI를 단순화하고 사용자가 더 쉽게 접근할 수 있게 도와줍니다. 특히, React-tooltip 라이브러리를 사용하면 툴팁을 간편하게 구현하고 데이터 수정 작업을 보다 유연..

1. Rc-Tree 개념과 사용[ Rc-Tree 이란? ]Rc-Tree는 부모와 자식 즉, 폴더와 문서로 이루어진 관계로 폴더 안에 폴더를 넣거나 여러 가지 문서를 넣어 편하게 관리할 수 있는 라이브러리이다. 트리 구조를 쉽게 시각화하고 조작할 수 있는 기능을 제공합니다. [ Rc-Tree 설치 ]npm i rc-treenpm rc-tree 공식 사이트 개발환경 : React 18, rc-tree 2.1.2[ Rc-Tree 생성 ]import React, { Component } from "react";import Tree, { TreeNode } from "rc-tree";import "rc-tree/assets/index.css"const treeData = [  {    key: "0-0",    ..

AG-Grid 란?한마디로 데이터 그리드를 제공해 주는 친구입니다.서버사이드 랜더링, 엑셀 추출, Master-Detail 구조, Tree, Pivot 등을 지원하며, 무료 버전과 유료 버전으로 나뉘어있지만 무료 버전만으로도 많은 기능을 제공하고 있습니다. AG-Grid를 사용한다면JS 스크립트 기반으로 어떤 플랫폼에서도 사용이 가능합니다. 복잡한 그리드를 Ag-grid를 통해 손쉽게 그릴 수 있으며 수많은 데이터를 한눈에 정리가 되는 장점이 있습니다.출처 - https://www.ag-grid.com/ 개발환경 : React 18, ag-grid-community 26, ag-grid-react 26AG-Grid 세팅하기npm i ag-grid-community ag-grid-react  --saven..