CHINGOO.BE

CHINGOO.BE - 가장 재밌게 친구비를 받는 방법. Contribute to skymins04/chingoo.be development by creating an account on GitHub.

가장 재밌게 친구비를 받는 방법

서론 필자가 최근 프로젝트를 진행하면서, SVG 이미지 파일들을 컴포넌트처럼 import하여 사용하고 싶다는 니즈가 생겼다. 그래서 Next.js와 Storybook 등, Webpack 환경에서 SVG 이미지 파일을 컴포넌트처럼 사용하는 방법을 찾아보았고, 이번 포스팅에선 이를 공유해보려 한다. SVGR과 @svgr/webpack SVGR은 SVG 이미지 파일을 React 컴포넌트로 변환해주는 프로젝트이다. 그중에서 @svgr/webpack 패키지를 이용하면, Webpack 번들러를 이용하는 프로젝트에서 SVG 이미지 파일을 컴포넌트처럼 import하여 사용할 수 있게 된다. SVGR - Transforms SVG into React Components. - SVGR Transforms SVG into ..

서론 최근 필자는 Supersturct를 사용해보다가 Superstruct는 기본적으로 오류메시지를 커스텀할 수 없다는 점을 알게됐다. 이는, 개발자가 임의로 오류메시지를 수정하여 부정확한 validation 결과를 내보내지 못하도록 하는 Supersturct의 철학이라고 한다. 하지만 일상적인 상황에선 사용자에게 현재 발생한 오류에 따른 문구를 보여주어야 하는 상황이 더 많을 것이고, Supersturct는 이를 위한 대응을 지원하지 않는다. 이를 위한 해결방법을 찾다가 Superstruct GitHub issue에 괜찮은 아이디어를 발견하게 되어 이번 포스팅에서 소개해보고자 한다. 해결책: 오류 메시지 함수를 직접 만들어버리자 custom error messages · Issue #568 · ians..

서론 이번 포스팅에선, 필자가 CHINGOO.BE 프로젝트(GitHub repo.)를 진행하면서 여러가지 최적화들을 시도하다가 번들 사이즈 관련 최적화의 일환으로 기존 프로젝트에서 사용중이던 zod 라이브러리를 superstruct로 전환하게 된 과정을 소개한다. Zod를 다른 라이브러리로 전환하려는 이유 Zod에서 다른 라이브러리로의 전환을 통해 달성하려던 목표는 "번들 사이즈" 절감이어있다. CHINGOO.BE는 Next.js 기반의 프로젝트라서 next-bundle-analyzer를 돌려보았었다. 여러가지 눈에 띄는 큼직큼직한 패키지들이 보인다. react-dom에나 next관련 패키지는 대체 가능한 패키지가 없으니 건너뛰고, 그 다음으로 가장 눈에 띄는 패키지는 위 이미지에서 빨간 박스가 쳐진 Z..