개선

이전 게시글에서 UI테스트를 하기 위해 Storybook을 도입했다. 각각의 프로젝트마다 각각의 컴포넌트 테스트를 해볼 수 있어서 좋을것이라 판단했다. 하지만 문제가 있었다. 배포가 너무 많다. 3개의 배포 3개의 레포에 대해서 chromatic을 통해 storybook을 각각 배포하다보니 두가지 문제가 발생했다. 테스트하기 힘들다. 배포 완료된 링크가 3개라 일일히 들어가서 테스트해봐야한다는 단점이 있다. 속도가 느리다. 위 사진처럼 순차적인 형태로 각각의 레포 storybook을 배포하다보니 2분씩, 총 7분가까이 걸리는 문제가 발생했다. 심지어 이 CI는 pull_request마다 돌아야하므로 더 자주, 더 많이 호출되어야한다. 또 우리 레포는 현재 4개의 프로젝트로 구성되어있고, 추후에 더 추가될..

문제점 네이버 부스트캠프에서 진행하고 있는 AlgoITNi프로젝트에서 아래와 같은 문제가 발생했다. 빌드하는 과정에서 이러한 경고 메시지가 발생한 것이다. 특정 청크가 500KB보다 크다는 것이 문제이다. 위 사진을 보면 번들사이즈가 1285kb이고, 사용자가 실제로 받는 번들사이즈인 gzip사이즈가 425.33kb이라 초기 렌더링이 느려질 수 있다는 문제가 있다. 청크 사이즈 줄이기 청크 구조 분석하기 원인을 알기위해서 vite-bundle-visualizer를 사용해서 청크의 시각적인 분석을 해보았다. highlight.js가 번들의 절반을 차지하고있었다. highlight.js는 에디터에서 코드하이라이팅에 사용되는 라이브러리인데, 여러가지 언어를 모두 지원하기때문에 이렇게 라이브러리 사이즈가 커지는..