React 디버깅

Sonic_Velog·2024년 6월 18일
14

디버깅

목록 보기
1/1
post-thumbnail

프로그래밍을 하면서 내가 만든 웹 사이트가 전부 정상적으로 돌아간다면 너무나 좋겠지만, 만들어진 사이트를 운영하다보면 무수히 많은 불청객들이 찾아온다. 바로 버그이다. 간단한 오탈자, UI 오동작 부터 원인을 찾기힘든 여러가지 버그들이 발생한다. 이 같은 버그들을 미연에 방지하거나 해결하기 위해 이루어지는 작업을 디버깅이라고 한다.

프론트엔드에서 사용할 수 있는 디버깅 방법에는 어떤것들이 있을까? 이번 포스팅의 주제는 프론트엔드에서의 디버깅이다.

기본 방식 : 콘솔 디버깅

내가 가장 일반적으로 사용하고 있는 디버깅 방법은 console.log를 사용하여 데이터 핸들링이 필요한 곳에 로그를 남겨 하나 하나 동작을 확인하는 방법이다.

const Data = [];

// 데이터를 확인하고 싶은곳에 로그 코드 작성
console.log('Data >>>>>>>', Data);

이 방법은 가장 간단하면서도, 가장 많이 사용되는 방법일 것이다. 하지만 프로그램이 커지고 오래 진행되다보면 이 로그들을 제대로 지워주지 않는다면 개발자 도구에서는 불이 날것이다. 너무 많은 로그들 때문에 의도했던 디버깅도 제대로 진행되지 못하고, 매번 배포하기전에 log를 전부 지워주는 작업을 해주거나 별도의 세팅으로 배포시에는 로그가 노출되지 않도록 처리해줘야 한다. 또한 최악의 경우이지만 혹시나 작성해 놓은 로그들을 지우다가 바로 위나 아래 있는 핵심 로직을 같이 지우는 불상사가 발생할 수도 있다.(당연히 코드를 커밋하기 전에 꼼꼼히 체크를 하겠지만…)

이렇게 지금까지도 불편하지만 가장 빠르게 적용할 수 있고 무엇보다 편하기에 사용하고 있던 console log 방식외에 무엇이 있고 어떻게 활용할 수 있을지 이번기회를 통해 알아보려고 한다.

1. 콘솔 닌자

콘솔닌자는 VSCode에서 사용할 수 있는 확장프로그램이다.
console.log를 이용한 디버깅 툴이라서 위에서 발생했던 문제점들을 전부 해결 할 수는 없지만, 콘솔이 많아졌을 때 지금 진행중인 부분의 로그를 IDE 상에서 쉽게 확인 할 수 있다는 장점이 있다.(출력 횟수도 출력되어서 의도치 않은 호출을 미연에 방지할 수 있음)
콘솔닌자 보러가기

실행 방법

  • VS code 확장 프로그램 설치하기
  • 코드에 console.log 코드 추가 및 소스 실행
      console.log("data ::::", data);
  • 사용 가능한 기능
    • 콘솔 표기 및 상세 보기
    • 로그 뷰어 제공(브라우저 콘솔창과 비슷한 형태로 로그 뷰어를 제공)
    • 유로 기능 더보기

장/단점

  • 장점
    • 설치가 간단하고, 설치하면 자동으로 적용되므로 사용 방법이 간단함
    • 코드 라인에서 바로 확인 할 수 있어 디버깅이 편함
  • 단점
    • 콘솔을 찍는 방법이다 보니 배포전에 로그를 지워주는 작업이 필요함(유료 Pro 버전을 사용하면 break-point를 사용한 디버깅이 가능)

2. React Dev Tools

React 공식문서에서 디버깅 툴로 소개하고 있는 크롬 확장프로그램이다.
React 문서 보러가기

React Dev Tools가 제공하는 대표적인 기능은 다음과 같다.

  • 구성 요소 검사 : 구성 요소 계층 구조를 탐색하고 검사할 수 있으므로 애플리케이션에서 특정 구성 요소를 쉽게 찾고 이해할 수 있다.
  • 상태 및 속성 : 구성 요소의 상태와 속성을 실시간으로 보고 편집할 수 있어, 문제를 디버깅하고 다양한 시나리오를 테스트하기가 더 쉽다.

실행 방법

  • 확장 프로그램 설치하기

  • 리액트로 개발된 사이트 또는 빌드되어 실행중인 로컬 주소에서 확장프로그램 사용하기

    • Dev Tools를 사용가능한 환경에서는 아래와 같은 메세지가 나타난다.
      React Dev Tools Init - 1

  • 개발자 도구에서 기능 확인하기

    • 개발자 도구를 열어보면 components와 profiler라는 탭이 새로 추가된 것을 볼 수 있다.
      React Dev Tools Init - 2
    • Components : 컴포넌트의 트리 구조와 컴포넌트의 상태를 보거나 수정 할 수 있다.
    • Profiler : 컴포넌트 렌터와 업데이트에 소요되는 시간을 추적하고 분석해 어떤 부분에서 성능 이슈가 발생하는지 확일 할 수 있다.

  • 아래 튜토리얼에 따라서 필요한 방식으로 디버깅 진행

장/단점

  • 장점
    • 간단하게 설치하여 추가 코드 없이 테스트 할 수 있어서 편함
    • React Memo, Context, State, Suspense 등 리액트 기능들에 대한 디버깅이 가능함
    • 많이 사용되는 디버깅 툴이여서 레퍼런스를 쉽게 찾아 사용할 수 있음
  • 단점
    • 아직까지 단점을 잘 모르겠음

3. Reactotron

React와 React-Native에서 애플리케이션의 상태, 네트워크 요청 및 성능 지표를 모니터링 할 수 있게 도와주는 데스크탑 프로그램이다.

실행 방법

  • 데스크톱 프로그램 설치

  • 초기 세팅하기(기본 세팅 & zustand 세팅)

    • src/ReactotronConfig.ts

      import Reactotron from 'reactotron-react-js';
import reactotronZustand from 'reactotron-plugin-zustand';
import useAuthStore from '@store/useAuthStore';
import usePartnerStore from '@store/usePartnerStore';

Reactotron.configure({})
.use(
reactotronZustand({
  stores: [
    {
      name: 'auth',
      store: useAuthStore,
    },
    {
      name: 'partner',
      store: usePartnerStore,
    },
  ],
}),
) // we can use plugins here
.connect(); // let's connect!
		```

    • src/main.tsx

      import './ReactotronConfig.ts';

  • 커스텀 로그 추가

    import Reactotron from 'reactotron-react-js';
//...생략...

axiosInstance.interceptors.request.use(
  Reactotron.display({
    name: `Reqeust [${config.url}]`,
    value: `${config.method} ${JSON.stringify(config.params)}`,
  });
);

  • 네트워크 요청시 데스크탑 앱에서 로그를 확인하듯이 확인할 수 있음

  • Store와 연결시 store의 상태도 쉽게 확인할 수 있다.

장/단점

  • 장점
    • UI가 깔끔하고, 사용성이 좋음
    • 초기 세팅만 잘해주면 추가 코드 필요없이 디버깅이 가능함
  • 단점
    • 추가 데스크탑 프로그램 설치가 필요함
    • 초기 세팅을 해줘야하는데 쉽지 않음
    • React-Native에서 사용하는 레퍼런스는 많으나 웹 개발시 사용하는 레퍼런스를 찾기 어려움

마치며...

프론트엔드에서 활용할 수 있는 디버깅 툴들이 많다는 것을 느꼈다. React Dev Tools는 많이 사용하고 유명한 툴이여서 조금이지만 사용하고 있었지만, 많이 활용하지는 못했던것 같다. 위 3개뿐만 아니라 다양한 디버그 툴이 있었는데, 사용방식 별로 하나씩 정해서 리뷰를 진행해 보았다.
리뷰를 진행하다보니 하나하나의 기능들이 많아서 다 담기에는 이번 블로깅 주제와는 맞지 않는 것 같아서 다음 블로깅에 하나씩 자세하게 작성해보려고 한다.

profile
Sonic_Velog
모든것이 궁금한 신입 프론트 개발자 일지

0개의 댓글