프론트 개발 블로그

애플리케이션에서 긴 목록을 렌더링 하는 경우 ' Windowing' 이라는 기법을 사용하는 것을 추천합니다. 이 기법은 주어진 시간에 목록의 부분 목록만 렌더링 하며, 컴포넌트를 다시 렌더링하는 데 걸리는 시간과 생성된 DOM 노드의 수를 크게 줄일 수 있습니다. React 공식 문서에서 추천하는 windowing 라이브러리 react-window react-virtualized react-window VS react-virtualized NPM Trends 사이트로 확인 해보면 react-virtualized 패키지의 사용자가 더 많은 것을 확인 할 수 있습니다. 그러나 React-virtualized는 React-window 패키지의 비해 크기가 무겁기 때문에 React-virtualized 에서도 ..

Task Runner인 Gulp 설치 시, npx의 버전을 확인하라는 글을 보고 알아보게 되었습니다. 기존 React(create-react-app) 사용 시에도 npx로 설치하라는 예시를 종종 본 적도 있기에 정리해봅니다. npx란? npx는 npm과 다른 것입니다! npx는 npm5.2버전부터 추가된 도구로 npm 레지스트리의 패키지 사용 경험을 파악하기 위해 생겨났습니다. npx는 1회성으로 최신 버전의 노드 패키지를 설치시켜주는 노드 패키지입니다. 글로벌에서 설치된 패키지의 경우 1) 자주 사용되지 않을 경우에 무거운 패키지로 로컬 스토리지에 남음. 2) 새로운 버전이 나왔을 때마다 기존 패키지를 삭제 후 재 설치 해줘야 하는 번거로움 의 단점이 있습니다. 이를 보완하여 최근 npm으로 설치되는 ..