난 즐거워... 개발이...

최근 테이블을 구현하는데 있어서, 10만개가 넘는 대규모 데이터로 구현할 일이 생겼다. 기존 코드에선 엘리먼트를 사용해서 내가 알던 방식으로 table을 구현했는데, 브라우저가 렉 걸리고... 멈춰버리는 현상이 발생했다. 아마도 데이터의 양이 많다보니 모든 행과 열을 한 번에 랜더링 하는과정에서 발생하는 문제인 것 같은데, 이를 해결하기 위해서 가상화 테이블 ( virtualized table ) 을 구현하는 방법에 대해서 알아보았다. 먼저 table 엘리먼트와 react-virtualized를 이용한 table의 차이점에 대해서 설명하겠다. 1. 성능 및 가상화 위에서 언급했듯이 table 엘리먼트는 대규모 데이터를 랜더링하는데 적합하지 않다. react-virtualized의 경우 화면에 보이는 아이..

Recoil 에서 사용하는 selector의 경우 https://recoiljs.org/docs/introduction/getting-started/#selector https://recoiljs.org/docs/basic-tutorial/selectors Getting Started | Recoil Create React App recoiljs.org 공식문서에도 사용방법에 대해서 간단한 예제를 통해 잘 설명되어있다. selectorFamily 의 경우 같은 형태의 selector들을 여러 곳에서 다른 paramater를 가진채로 사용하고 싶을 때 적용한다. 아래는 그 예시이다. // 예시로 params로 들어온 값에 1을 더하는 selectorFamily를 작성한다. const TestSelector..

heatmap, line chart 등 다양한 chart를 만들고 난 뒤 해당 chart의 특정 point, cell 등을 click하여 현재 본인이 선택한 state를 얻고 싶을 때가 있다. ex ) line chart에서 내가 click 한 특정 point 강조하기, heatmap의 click한 cell 하나 강조하기 ... React + Typescript 환경에서의 코드이다. const [nowIndex, setNowIndex] = useState(undefined); useEffect(() => { if (chartRef.current) { const chart = echarts.init(chartRef.current); // 정해진 option이 있다고 가정한다. chart.setOption(..

chart를 만들었는데, 모니터 크기나 브라우저 크기에 맞지 않을 때가 있다. 이어지는 내용에선 위와 같은 경우에 chart크기를 자동으로 조정하는 방법을 서술한다. React + Typescript 환경에서의 코드이다. useEffect(() => { if (chartRef.current) { const chart = echarts.init(chartRef.current); // option은 따로 지정해뒀다고 가정한다. chart.setOption(option); // 크기가 변경될 경우 chart가 resize되는 function을 만든다. window.onresize = function () { chart.resize(); }; // 창 크기 조절 이벤트 리스너 등록 window.addEventL..

Line chart 같은 걸 그리다 보면 특정한 symbol 과 같이 원하는 데이터만 chart UI를 변경해야 하는 경우가 생긴다. React + Typescript 에서 해당 경우를 처리하는 방법이다. // data에서 내가 강조하고 싶은 point의 index const nowIndex = 0 // chart option의 series를 예로 든다. series: [ { name: "Line Chart", type: "line", data: props.data, symbolSize: function (value: number, params: any) { // 클릭한 데이터의 심볼 크기 설정 // 강조하고 싶은 index랑 동일하다면 10으로 기존 크기 6보다 좀 더 크게 return params.d..