개발자 도구를 사용해보자

• 브라우저에서 F12를 누르면 브라우저 개발자 도구가 뜬다.
• 다만 컴포넌트 구조같은 상세한 내용을 확인하기가 어렵다.
• 이럴때 Chrome 웹스토어 > react DevTools를 사용하면 디버깅할때 좀더 편하다

기능1. Components탭

• 이를쓰면 다음 사진과 같이 React로 작성된 웹사이트의 React구조를 확인 할 수 있다.

• 특히 유용한것은 자식component에 어떤 props가, 잘 넘어갔는지 확인할 수 있다.
• 컴포넌트가 어디에 작성되었는지도 확인할 수도 있다.
• 임의로 수정도 가능하다
• state도 확인/수정 할 수도 있다.

장점2. profiler

• Profiler탭에서 녹화 버튼을 클릭하고 웹 상호작용을 진행하고 녹화를 끝내면 많은 정보를 알수 있다.
• 어떤 component를 사용했는지
• 해당 component가 몇초에 걸쳐서 랜더링되는지 (범인이 누구인지!) 알 수 있다.

참고2. Redux devtools

• 어떤 Redux 가 작동했는지
• 알마나 걸렸는지 등등을 알 수 있다.

성능 개선 태크닉

1. SPA의 특징
   • npm build를 발행하면
   • js파일 하나에 모든 코드를 다 쑤셔 넣는다 = 사이즈가 매우 크다.
   • 이러면 로딩속도가 느려질 수 밖에 없다.
   • 이를 위해 잘게 분할 해서 lazy import를 하면
   • 사용자에 우선보여줄것 보여준 이후 > 백그라운드에서 추가 로드를 하여 사용자의 체감 로딩 속도를 개선할 수 있다.