06. 리액트 개발 도구로 디버깅 하기

6.1 리액트 개발 도구란?

리액트 팀에서 제공하는 개발 도구 react-dev-tools
브라우저 확장 프로그램으로 설치하여 사용 가능

6.2 리액트 개발 도구 설치

6.3 리액트 개발 도구 활용하기

6.3.1 컴포넌트

컴포넌트 트리

어플리케이션의 전체 트리 구조를 한눈에 보여준다
상단 입력란에서는 정규식을 활용하여 검색이 가능하다
함수 선언식 또는 표현식으로 선언되지 않은 컴포넌트는 개발자 도구를 통해 컴포넌트의 이름을 확인할 수 없는 문제가 있다
아래의 코드로 실행하면 컴포넌트 명이 Anonymous, _c 로 뜨게 된다

const withSampleHOC = (Component) => {
  return function () {
    return <Component />;
  };
};
 
const HOCComponent = withSampleHOC(() => <>HOCComponent</>);
 
export default function DevTools() {
  return <HOCComponent />;
}

이를 수정하기 위해 기명 함수를 적용하면, 컴포넌트 명이 함수명으로 바로 나오기 때문에 추후 디버깅에 있어서 도움이 된다

const withNamedSampleHOC = (Component) => {
  return function withNamedSampleHOC() {
    return <Component />;
  };
};
 
const NamedHOCComponent = withNamedSampleHOC(function NamedHOCComponent() {
  return <>NamedHOCComponent</>;
});

혹은 displayName 을 설정하여 해결하는 방법도 있다. displayName 을 추가하면 개발자 도구에 해당 속성 이름으로 표기

const MemoizedComponent = memo(() => <>MemoizedComponent</>);
 
MemoizedComponent.displayName = "메모된 컴포넌트";

컴포넌트명과 props

컴포넌트명과 Key

컴포넌트 도구

컴포넌트 props

컴포넌트 hooks

컴포넌트를 렌더링한 주체, rendered by

해당 컴포넌트를 렌더링한 주체를 확인 가능

6.3.2 프로파일러

리액트 트리가 아닌 리액트가 랜더링하는 과정에서 발생하는 상황을 확인하기 위한 도구

설정 변경

General 옵션에서 Highlight updates when components render 옵션을 키면 리렌더링 되는 컴포넌트 하이라이트

6.4 정리

디버그 툴을 사용하면 시간에 따른 컴포넌트의 변화 상황 혹은, 불필요한 리렌더링 발생 여부 등을 체크 가능
꾸준히 한다면 디버깅에 익숙해 질 수 있을 것

07. 크롬 개발자 도구를 활용한 애플리케이션 분석

7.1 크롬 개발자 도구란?

크롬에서 제공하는 개발자용 도구, 웹에서 일어나는 거의 모든 일을 확인 할 수 있음
실제로 어플리케이션 디버깅을 위해서는 시크릿 모드나, 프라이빗 모드로 여는 것을 권장 -> 크롬 확장 프로그램이 불필요한 정보를 추가하는 것을 막아준다

7.2 요소 탭

중단점 지정으로 디버깅에 편리함 제공

7.3 소스 탭

실제 파일의 소스 코드 확인 가능
소스 코드에 중단점을 걸어 디버깅 가능

7.4 네트워크 탭

네트워크에서 발생하는 정보 확인 가능

7.5 메모리 탭

웹페이지가 차지하고 있는 메모리 관련 정보 확인 가능
특정 객체를 우클릭 -> 전역 변수로 저장을 누르면 window.temp1 에 기록 되어 콘솔에서 확인이 가능하다
스냅샷을 2개 찍어서 그 사이의 값 변경을 확인하는 방법이 편리하다
해당 탭을 통하여 memo, useMemo, useCallback 의 의존성 값들이 실제로 그대로 유지되는 것 확인이 가능

7.6 Next.js 환경 디버깅하기

SSR 의 메모리 누수는 사용자의 기기에서 발생하는 것이 아니라 서버 자체에서 발생하므로 서비스 자체에 부담 + 비용의 증가로 이어질 수 있으므로 잘 관리해야 한다

7.6.1 Next.js 프로젝트를 디버그 모드로 실행하기

package.json 파일에 명령어를 수정

  "dev": "NODE_OPTIONS='inspect' next dev",

chrome://inspect 로 이동하여, Open dedicated DevTools for Node 클릭하여 디버깅 모드 실행

7.6.2 Next.js 서버에 트래픽 유입시키기

아파치의 ab 명령어로 서버 성능 검사 (50개의 요청을 10000번 시도)

ab -k -c 50 -n 10000 "http://127.0.0.1:3000/"

7.7 정리

개발자 도구를 사용하여 다양한 디버깅이 가능하다!

About About