loplat ui 썸네일형 리스트형 SVGR id collision issue 해결하기 프로젝트: loplat UI 키워드: svgr, svg, id collision, unique id, sed, regex 상황 loplat UI에서 svgr을 이용하여 Icon 컴포넌트를 만든다. 실제 프로젝트에서 Icon을 사용할 때, 하나의 아이콘을 2번 렌더링하면 이미지가 깨지는 현상을 발견했다. // 2번 렌더링 ... 원인이 무엇인지 고민해보니 svg 속성 중 id가 random값이 아닌 고정값인 것을 확인했다. __a, __b 가 suffix로 붙지만 'infocircle_outline_svg__a' 라는 id값 자체는 고정이라 컴포넌트를 2번 렌더링하면 id 충돌이 일어나는 것이다. loplat UI 코드를 통해 svgr 이 만들어주는 id는 static하는 것을 확인했다. // id 고.. 더보기 번들링 최적화를 통해 import cost 줄이기(2) 프로젝트: loplat UI 키워드: bundling optimization, rollup, tree shaking, import cost, webpack, side effects, postpublish 상황 이전 포스트 번들링 최적화를 통해 import cost 줄이기(1)에서 'esm format build'와 'code splitting' 단계를 거쳤지만 여전히 tree shaking이 제대로 되지 않는다. 해결 과정 rollup 공식 사이트에서 tree shaking 이 작동하지 않는 상황에 대한 문서를 확인했다.(https://rollupjs.org/guide/en/#tree-shaking-doesnt-seem-to-be-working) Sometimes, you'll end up with co.. 더보기 번들링 최적화를 통해 import cost 줄이기(1) 프로젝트: loplat UI 키워드: bundling optimization, rollup, tree shaking, code splitting, commonJS, es modules, import cost 상황 팀원분이 완성해둔 loplat ui 라이브러리를 실제 프로젝트에서 사용하고자한다. 아래와 같이 사용하고 싶은 컴포넌트를 import 한다. import { Button } from 'loplat-ui'; import { black400 } from 'loplat-ui'; 사용할 컴포넌트에 해당하는 코드만 불러오는 것이 아니라, 번들링 된 코드를 모두 불러와 과도한 import cost가 든다. black400이라는 palette const를 불러오는 것이므로 1kB도 되지않는 작은 크기여야만 한.. 더보기 css animation steps로 Spinner 구현하기 프로젝트: loplat ui 키워드: css animation steps, sprite image, 용량 최적화 상황 로딩 상태일 때 화면에 표시할 Loading UI Component가 필요하다. loplat ui library에서 재사용 가능한 컴포넌트를 직접 구현하고자한다. 로딩 애니메이션을 위해 gif를 사용할 경우 용량과 성능 문제가 발생한다. sprite image와 css animation의 steps 속성을 이용하여 애니메이션 효과를 구현할 수 있다. 해결과정 먼저 디자이너로부터 30장 이상으로 이루어진 sprite image를 받고 img 태그의 src에 넣었다. React Component의 prop으로 duration(애니메이션 재생 시간), scale(컴포넌트 크기 조절), zInd.. 더보기 이전 1 2 다음
