[React] Udemy 강의 노트 7

 

 

모듈 소개

- 오류에서 자유로운 코드를 작성할 수는 없다.

- 오류를 찾아서 수정하는 것은 개발자의 덕목이다.

- 리액트 오류 메시지를 이해하고 디버그하고 분석하는 방법과 코드를 이해하는 방법을 배운다.

 

 

리액트 오류 메시지 이해하기

- 스스로 오류를 파악하기

- 오류가 발생한 곳과 몇번째 줄인지도 확인할 수 있다.

 

 

 

- IDE도 오류를 탐색할 수 있다.

 

 

코드 흐름 및 경고 분석

- 콘솔이나 IDE에 경고나 나타나지 않는 오류는 코드 순서를 따라가면서 확인해 볼 수 있다. 

 

 

중단점(breakpoint) 작업하기

- 개발자 센터의 sources 탭에서 현재 웹페이지에서 사용중인 소스 파일을 찾아볼 수 있다.

- npm start 스크립트는 브라우저에 코드를 보내서 실행될 수 있도록 하고 브라우저에 추가적인 정보를 제공해 개발자 도구에서 포착해 원문형태에서 코드를 디버깅 하게 해준다.

- 파일 트리에서 원본 소스 코드를 찾고 원하는 부분에서 중단점을 추가할 수 있다.

- 중단점이 있는 코드에서 실행이 멈춘다. 

 

 

리액트 DevTools 사용하기

- React Developer Tools 를 이용할 수 있다.

- 브라우저 플러그인으로 사용

- 개발자도구에 components와 profiler가 생긴다.

- components에서 컴포넌트 트리를 볼 수 있다.