Next.js - SWC 한줄도 안되는 설정 때문에 밤샌 이야기

• Chart.js 설정을 잘못 넣었나
  • out of range라고?? 너무 자리수가 큰 값들이 들어가서인가?
  • tickLabel 만드는 데서 에러가 나는데, 여기에 값들이 이상하게 들어가는 건가?
  • 왜 여기 this.ticks 안에는 전부 NaN 값이 들어가는건가? 대체 어디서부터 잘못된 건가..
  • useEffect를 잘못써서 그런건가? useLayoutEffect를 써봐야 하나? 이건 SSR에선 못써서 dynamic 컴포넌트로도 바꿔줘야 하네..
  • 다른 코드 예제들도 이런 건가
• Chart.js 버전이 잘못 됐나
• Chartjs-treemap 플러그인이 문제가 있는건가
• Yarn PnP가 문제인가
• Next.js에 얹은게 문제인가
• React 버전이 문제인가
• M1 ARM CPU가 문제인가

정말 밤을 새버리고 ..

화장실에 앉아서 혹시나 하고 GitHub Issue에 잠깐 들어가보는데..

github.com/chartjs/Chart.js/issues/10673

swcMinify: false,

불과 5일전 동일한 문제로 이슈가 올라와 있었고,

답은 너무나도 간단했다..

허무했지만 그만큼 가벼운 마음으로 볼일을 마무리..

생각해보면, dev 환경에서 너무나 잘되는데 build 이후에 문제가 생긴거라면 build 관련 환경설정이나 build-tools 쪽을 봤어야 함.. 너무 심야라 제정신이 아니었던 것 같음..

의외로 깃헙 이슈에 있는 내용들은 구글링으로 잘 안나옴..조회수가 낮아서 그런걸까.. 그냥 해당 라이브러리 깃헙 이슈 먼저 검색해보는 것도 방법일 것 같다

덕분에(?) 의도치는 않았지만 Chart.js 내부가 어떻게 구성되어 있는지 보게 되었음..

• 잠깐 딴 얘긴데, 최대한 외부 의존성 없이 내부에서 helper utils 만들어서 사용하는 건, 다른 차트 라이브러리들과 마찬가지 인듯
• 아마도 성능 때문이지 않을까..
• 사소한 부분이긴 하지만 minMax 구하는 경우엔 for 문 돌리는 것 보다는 Math.max(...iterator)가 조금 더 빨랐던 경험
  • 코드도 더 짧고 보기 좋음
  • 이런 부분 PR 날려서 나도 오픈 소스 컨트리뷰터가 되어 봐야겟다..!