나는 리액트, 넥스트를 사용해서 개발하는 프론트엔드 개발자이다. 그래서 리액트 팀에서 리액트 애플리케이션의 원할한 개발을 위해 만든 개발 도구인 react-dev-tools 설치가 필수이다. 그 안에 많은 활용할 수 있는 다양한 기능들이 있지만 필수로 사용해야 하는 몇 가지만 적어본다. (안사용하면 바부..)
우선, react-dev-tools을 내 크롬에 확장한다.
[설치 링크]
(미리보기가 안뜨넹..)
두번째, 개발자 도구를 연다. (F12 다들아시져?)
세번째, Profiler를 찾는다.
네번째, 오른쪽에서 검정색 톱니바퀴를 찾는다.
다섯번째, 클릭하면 General > Hightlight updates when components render을 체크한다.
이제 리랜더링이 될 때마다 어떤 컴포넌트들이 되고 있는지 가시적으로 확인할 수 있다.
여섯번째, 아래와 같이 연한 회색으로 (#ddd)같은 글자가 콘솔에 찍힌다. 같은 내용이 두 번 찍히니 매우 거슬린다. 지워보자.
리액트 개발 모드를 strict mode로 해놔서 생기는 일이다. 하지만 우리는 strict 해야하기때문에 어쩔수 없다..
일곱번째, 위의 다섯번째 순서에서, Debugging > Hide logs during second render in Strict Mode 를 체크한다.
이제 console.log를 코드상에서 사용해도 한번씩만 찍힌다.
++ Profiler > Record why each component rendered while profiling 체크도 추천한다. 속도가 조금 느려질 수 있지만 디버깅에 좋다.
'맥북관련 셋팅 및 오류' 카테고리의 다른 글
| 맥 vscode 권한 오류 해결법 | react typescript 설치시 (0) | 2024.04.14 |
|---|---|
| 노트북 변경시 프론트엔드 개발자의 초기 셋팅 (0) | 2024.02.16 |
| 프론트엔드 개발자의 맥북에어 m1 16g 256gb + 투명케이스 (0) | 2024.02.14 |