06. 리액트 개발 도구로 디버깅 하기
6.1 리액트 개발 도구란?
- 리액트 팀에서 제공하는 개발 도구 react-dev-tools
- 다양한 애플리케이션을 디버깅하기 위해 만들어짐
- 브라우저 확장 프로그램으로 설치하여 사용 가능
6.2 리액트 개발 도구 설치
- 브라우저 확장 도구로 설치하기
6.3 리액트 개발 도구 활용하기
컴포넌트
컴포넌트 트리
- 애플리케이션의 전체 트리 구조를 한눈에 보여줌
- 기명함수 → 해당 컴포넌트 보여줌 익명함수 → Anonymous라는 이름으로 보여줌
- 기명함수로 바꾸기 어려우면 displayName 속성 추가하기
컴포넌트명과 props
- 컴포넌트 선택 시 해당 컴포넌트에 대한 자세한 정보 제공
프로파일러
- 컴포넌트 트리가 아닌 렌더링하는 과정에서 발생하는 상황을 확인하기 위한 도구 ⇒ 어떤 컴포넌트가 렌더링 되었는지, 몇 차례 되었는지 확인
Flamegraph
- 렌더 커밋 별로 어떠한 작업이 일어났는지 나타냄
Ranked
- 해당 커밋에서 렌더링하는데 오랜 시간이 걸린 컴포넌트를 순서대로 나열한 그래프
타임라인
- 시간이 지남에 따라 컴포넌트에서 어떤 일이 일어났는지 확인 가능
07. 크롬 개발자 도구를 활용한 애플리케이션 분석
7.1 크롬 개발자 도구란?
- 크롬에서 제공하는 개발자용 도구로, 웹에서 일어나는 거의 모든 일을 확인 가능
- 제대로된 디버깅을 원한다면 시크릿모드에서 하는 것을 권장
7.2 요소 탭
- 현재 웹을 구성하고 있는 HTML, CSS 등의 정보를 확인 가능
7.3 소스 탭
- 웹을 불러오기 위해 실행하거나 참조된 모든 파일 확인 가능
- 소스 코드에 중단점을 만들어 디버깅 가능
7.4 네트워크 탭
- 웹을 접속하는 순간부터 발생하는 모든 네트워크 관련 작동 기록
7.5 메모리 탭
- 웹페이지가 차지하고 있는 메모리 관련 정보 확인 가능
자바스크립트 인스턴스 VM 선택
- 디버깅하고 싶은 JS VM 환경 선택 ⇒ 환경 별 힙 크기를 보면 얼마나 점유하고 있는지 나타남
힙 스냇샵
- 현재 페이지의 메모리 상태를 확인해 볼 수 있는 메모리 프로파일 도구
- 스냅샷을 두개 이상 찍어서 차이를 비교하는 것이 수월
- 스냅샷 활용 시
useMemo나useCallback과 같은 의존성이 있는 값들이 렌더링 사이에서 유지되는지 확인 가능
타임라인 할당 계측
- 시간의 흐름에 따라 메모리 변화를 확인할 수 있는 기능
할당 샘플링
- 할당 계측과 비슷하지만, JS 실행 스택별로 분석 가능하며, 해당 분석을 함수 단위로 함
7.6 Next.js 환경 디버깅하기
Next.js 프로젝트를 디버그 모드로 실행하기
- package.json 파일에 명령어를 수정
"dev": NODE_OPTIONS='inspect' next devNext.js 서버에 트래픽 유입시키기
- 아파치의 ab 명령어
- 서버 성능 검사 ⇒ 50개의 요청을 10000번 시도