브라우저에 설치하면 리액트의 성능을 평가해주는 크롬 확장 프로그램을 설치해보자.

더불어 컴포넌트 구조, props도 확인할 수 있다.

https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko&utm_source=ext_sidebar

바로 이녀석이다.

다음시간부터 이 친구를 통해 우리가 만든 앱의 성능을 확인하고, 성능을 어떻게 높일지 알아보자.

React Profiler

React Profiler는 React16.5부터 추가된 플러그인이다. React의 Profiler API를 이용해 React으로 제작된 애플리케이션의 성능 병목 현상을 식별하기 위해 렌더링되는 각 구성 요소에 대한 타이밍 정보를 수집한다.

솔직히 뭔소린지 모르겠다. 설명 진짜 못하네!

리액트 프로파일러로 성능을 측정해보기 위한 애플리케이션을 빠르게 하나 만들어보자.

새로운 workSpace에서

image.png

을 진행한다.

npm과 npx의 차이를 언젠가 한번 정리해야할 듯 하다.

[Js] npm과 npx의 차이는?

image.png

리액트 프로젝트 구조가 형성되었다.