Debugging

본 포스트는 Udemy 리액트 완벽가이드 2024 를 듣고 정리한 내용입니다.

목차 🌳
1️⃣ 리액트 오류 메시지 이해하기
2️⃣ 브라우저를 통한 에러 발견 (DevTools & Debugger)
3️⃣ Strict Mode
4️⃣ DevTools 사용방법

오류 메시지 이해하기 🧐

<강의내용 요약>
지난 practice 1 에서, Duration에 0을 넣으면 위와 같은 에러가 뜬다.
에러 메시지 아래에 at 부터 시작해서 해당 라인에
오류가 난 파일 명, 라인 번호, 몇번째 단어인지가 나옴
결론) 흔적을 따라가서 고치거라 ~

<수정사항 요약>

에러 메시지에는 속성값이 undefined로 읽혀서 오류가 나왔다.
그 안으로 들어가서 읽어보니 results[0].valueEndOfYear 에서 에러가 났는데, result를 반환한 곳에 가보니 for문에서 돌아가는 횟수에 대해서 음수나 0이 들어가면 
반복문이 돌지 않아 results 배열이 비게 되고 
빈배열의 0번째 인덱스에 접근하니 오류가 나게 된 것! ~  
그래서 if문으로 예외처리를 해주니 컴포넌트가 깨지지 않게됨

오류 메시지가 나지 않는 'Logical Error'⚙️

Logical Error란🤨
프로그램이 엉터리로 동작하지만 컴파일과 실행은 정상적으로 진행되는 오류
즉! 오류 메시지가 나오지 않지만 원하는 대로 동작하지 않는 경우를 뜻함.

해결방법🥸
1️⃣ 항상 논리적으로 생각하려고 하기
-> 프로그램이 돌아가는 순서를 차례로 돌아보며 생각
-> 실행과정에서 사용되는 값들을 실행 시점에서 어떻게 처리하는지 살펴보기
2️⃣ 개발자 도구F12 켜서, source 창에서 break point 찍어가면서 돌아가는 매커니즘 찬찬히 살펴보기

Strict mode 🤝

StrictMode 란?
리액트가 제공하는 컴포넌트로, 다른 컴포넌트를 감싸는 컴포넌트임!!
StrictMode는 시스템 내부에서 발생 가능한 오류들을 잡아주는 일을 함

index.jsx

import ReactDOM from 'react-dom/client';
import { StrictMode } from 'react';
import App from './App.jsx';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

더 내부의 컴포넌트를 감쌀 수도 있지만, 보통은 App 컴포넌트를 감싼다.

오류를 어떻게 발견해주는데? 🥸

내부의 함수들을 두번씩 돌려준다.
-> 단 개발단계에서만 그렇게 함 (서버에 업로드하면 ❌)

strict mode 관련 공식문서

React Devtools ⚙️

브라우저에서 설치해서 쓰는 확장 프로그램으로
1️⃣ profiler 리액트의 성능 개선에 도움을 줌!
2️⃣ components 컴포넌트 트리도 확인할 수 있음! 🌳
-> UI 구조 파악에 용이
-> props 및 이벤트 리스너 확인
-> 어떤 hook 들을 사용하는지 확인 가능!