Optimization 썸네일형 리스트형 React 18 useDeferredValue로 성능 최적화하기 프로젝트: tracking map 키워드: react v18, useDeferredValue, interruptible rendering, rendering blocking 상황 react 18에서 새로 나온 useDeferredValue hook을 사용해보고 장점을 알아본다. 실제 프로젝트에 적용하여 렌더링 성능 최적화를 확인한다. 해결 과정 1 먼저 useDeferredValue hook을 체험해보기 위해 간단한 코드를 작성한다. 아래 코드는 input element에 value를 입력할 때마다, boxes를 새로 연산하여 렌더링하는 코드이다. // Test.tsx import React, { useState, useDeferredValue, useMemo } from 'react'; function.. 더보기 이미지 용량 최적화하기(feat. picture tag, sprite image) 프로젝트: loplat UI, 채식 지도 키워드: picture tag, source tag, WebP, sprite image, naver map marker, image optimization 상황 1 loplat UI의 Spinner 컴포넌트는 용량이 큰 sprite image와 css 애니메이션을 통해 구현했다. (참고: css animation steps로 Spinner 구현하기) gif를 사용하지 않고 png로 구현했음에도 아직 이미지 용량이 크다는 생각이 들었다. WebP 형식을 사용하려다가 safari 브라우저에서 지원하지않아 보류했는데, 크롬에서라도 WebP 이미지를 지원하고자 한다. 해결방법 1 picture tag를 사용하면 browser/display마다 최적의 이미지를 제공할 수 .. 더보기 번들링 최적화를 통해 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.. 더보기 useSetRecoilState로 렌더링 최적화하기 프로젝트: loplat X mobile 키워드: recoil, 렌더링 최적화 상황 loplat X mobile 은 CRA 에 기반하여 CSR 방식을 사용한다. 로그인이 필요한 '캠페인 목록 페이지'에서 로그아웃 버튼을 누르면, protected router HOC에 의해 자동으로 로그인 페이지로 이동한다. 로그아웃을 시키는 것 외에 side effects 가 발생하면 안되는 상황이지만, 로그인 페이지로 이동하기 전 캠페인 목록 페이지에서 '캠페인 목록 GET API'가 의도치않게 한 번 호출되는 버그가 있다며 팀원분이 도움을 요청하셨다. 해결과정 먼저 API를 어떤 코드에서 호출하는지 살펴보았다. const { ... data: ExampleData, ... } = useInfiniteQuery( ['c.. 더보기 이전 1 다음
