어리둥절 분석가 그리고 개발자

여기서 라인 차트위에 있는 동그라미 포인트를 없애고 싶으면 options에 다음과 같이 추가해주면 된다! const options = { elements: { point: { radius: 0, }, }, };

✔️ 필요성 바 차트와 라인 차트가 혼합된 멀티 차트에서 이번에는 양쪽 y축을 함께 사용하는 multi Axis까지 활용해보고자 한다 ✔️ 문제 해결 해당 예제를 동일하게 잘 따라하면 된다 ㅎ https://react-chartjs-2.js.org/examples/multiaxis-line-chart Multiaxis Line Chart | react-chartjs-2 Example of multiaxis line chart in react-chartjs-2. react-chartjs-2.js.org scales에 y와 y1을 만든 다음에 (이름은 달라도 된다) datasets에서 yAxisID에 해당 축이름을 기재해주면 된다. grid나 ticks 옵션을 적절하게 사용하면 내가 원하는대로 조정이 가능하..

✔️ 필요성 react에서 Chart.js wrapper인 react-chartjs-2을 사용하여 멀티타입 차트를 그리려고 한다. 아래에 예제가 나와있어서 그대로 가져다가 써보았는데 에러가 난다. https://react-chartjs-2.js.org/examples/multitype-chart Multitype Chart | react-chartjs-2 Example of multitype chart in react-chartjs-2. react-chartjs-2.js.org 아래처럼 바 차트와 라인차트를 동시에 그리는 멀티타입 차트를 그리려고 한다 ✔️ 에러 상황 아래처럼 Dimensions를 활용해서 스크린의 너비를 가져오거나, 혹은 다른 어떤 value 값으로 지정해놓고 참조할 때 px를 까먹는 ..

✔️ 필요성 검색창 컴포넌트를 개발했는데 검색창의 외부 영역을 클릭했을 때 아래 검색 결과 창이 없어졌으면 좋겠다. 즉 리액트의 컴포넌트의 외부 영역의 클릭을 감지해서 효과를 줘야 한다. ✔️ 문제 해결 거의 90%는 아래 이 분의 코드를 보고 참고했다. 나중에 내가 기억하기 쉽게 하도록 내 블로그에 기록 https://close-up.tistory.com/entry/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%8A%B9%EC%A0%95-%EC%98%81%EC%97%AD-%EC%99%B8-%ED%81%B4%EB%A6%AD-%EA%B0%90%EC%A7%80 React 컴포넌트 특정 영역 외 클릭 감지 const mymenuRef = useRef(null); funct..

✔️ 필요성 react에서 버튼을 만들었으면 버튼을 눌렀을 때 잠깐 깜빡인다든지 해서 버튼을 누른 것 같은 UI를 만들어야 한다 const Button = styled.button` width: 92px; height: 52px; margin-left: 8px; border-radius: 4px; border: 0px; text-align: center; background-color: ${({ theme }) => theme.colors.grayEa}; `; ✔️ 문제 해결 :active에서 opacity를 낮춰서 눌렀을 때 깜빡이는 효과를 주고, 마우스 커서를 올려두었을 때 커서 이미지가 바뀌는 효과도 함께 부여하자 const Button = styled.button` width: 92px; heig..

✔️ 필요성 MUI에서 AutoComplete SearchInput을 예쁘게 꾸몄는데 스크롤바 디자인이 너무 무식하다 이를 어쩐담 const InputWrapper = styled.div` width: 300px; background-color: "transparent"; border: 0px solid ${({ theme }) => theme.colors.grayD0}; border-bottom-width: 2px; padding: 1px; display: flex; flex-wrap: wrap; &:hover { border-color: "#40a9ff"; } &.focused { &::before { content: ""; display: block; position: absolute; width:..

https://norwayy.tistory.com/m/370 이슈 해결 - Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in Goal - 컴포넌트가 unmount된 후 해당 컴포넌트의 state를 업데이트했을 때 발생하는 이슈 공유 - 해당 이슈 해결 과정 공유 리엑트에서 비동기 동작은 정말 흔하다. 서버에 데이터를 요청하거나, s norwayy.tistory.com useState를 통해서 currentStep과 setStep을 사용하는데, 컴포넌트가 unmounted 되었을 때 setStep()이 동작하면 나타나는 에러이다. mounted라는 변수를 ..

✔️ 필요성 무료이고 가벼워서 차트 라이브러리로 많이 쓰이는 chart.js! 리액트 계열에서 사용할 때에는 react wrapper인 react-chartjs-2 를 사용하면 된다. chart.js의 custom-tooltip을 만들 때 이미지를 툴팁에 포함하고 싶을 때는 조금 어렵지만 아래와 같이 하면 된다. 공식 문서와 stack-overflow를 이틀간 삽질해서 겨우 성공했다. https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips Tooltip | Chart.js Namespace: options.plugins.tooltip, the global options for the chart toolt..

✔️ 필요성 Next.js에서 fusionCharts를 활용한 차트 컴포넌트를 올리니까, 맨 처음에는 차트가 잘 나오는데 새로고침을 누르니까 "Reference Error: document is not defined"라는 에러가 등장한다. ✔️ 문제 확인 문제 원인은 Next.js의 장점인 SSR(Server Side Rendering) 때문인데 https://helloinyong.tistory.com/248 여기 블로그에 이유가 상세하게 잘 나와있다. 웹 페이지를 구성시킬 요소들이 렌더링 및 클라이언트로 로드되기 전에 document에 접근하여 View 요소를 조작하려하니 발생한 문제그러나 이 상태에서 새로고침을 하게 된다면, 서버 렌더링이 동작하게 되어 에러가 발생하게 될 것이고, 이는 서버 렌더링이..

✔️ 상태(recoil)와 상태를 변경하는 cusom-hook 생성 recoil에서 atom 상태를 생성한다음, 상태를 변경하는 custom-hook을 생성한다. import { atom } from "recoil"; import { NavBarTheme } from "../types/common"; export const navBarTheme = atom({ key: "navBarTheme", default: "white", }); import { useEffect } from "react"; import { useRecoilState, useSetRecoilState } from "recoil"; import { navBarTheme } from "../recoil/navBarTheme"; impor..