Act99 기술블로그

먼저 오늘 한 결과물은 이렇다. 저번 시간에는 차트구현까지는 했으나, 데이터 값 대비 차트 구현이 정확하지 않았으며, 화면 리사이즈를 할 때 오류가 생겼다. (몇개의 데이터만 변화) 따라서 유지보수에도 편하고, 화면 리사이즈 시 자연스럽게 변하며, 차트를 좀 더 정밀하게 구현할 필요가 있었다. 먼저, 화면 리사이즈부터 다루었다. ReactHook 을 이용해 사이즈 변화상태마다 width, height 값을 구할 예정이다. (tailwindCSS 를 사용하면 편하지만, 정확한 width 값과 height 값이 필요했으며, Hook 연습도 필요했기 때문에 직접 구현했다.) Hook Docs를 보면 useWindowSize 를 이용하는 코드가 나와있다. (공부를 목적으로 하면 직접 타이핑하면서 작성할 것을 추..

React-Google-Chart 를 사용하던 중, 직접 차트를 만들고 싶은 충동이 생겼다. 먼저 handmade-chart.tsx 를 만들어주고 svg 를 이용해 차트 틀부터 만들어 주었다. (CSS 경우 tailwind를 사용하였다.) - handmade-chart.tsx import React from "react"; const SVG_CHART_WIDTH = 1600; const SVG_CHART_HEIGHT = 400; const SVG_VOLUME_WIDTH = 1600; const SVG_VOLUME_HEIGHT = 400; export const HandmadeChart = () => { const x0 = 50; const xAxisLength = SVG_CHART_WIDTH - x0 *..