리액트 디버깅

1. 브레이크포인트 설정하기

• index.js에 브레이크포인트를 설정하려면, 줄번호 왼쪽의 빈 공간을 클릭하면 브레이크포인트가 설정되며 빨간 원 모양이 보이며 디버깅을 시작한다.

2. 크롬 디버거 설정하기

3. 라이브 수정과 디버깅

• React 앱과 함께 webpack을 사용중이라면, webpack의 HMR 메커니즘의 장점을 이용해 훨씬 효율적인 워크플로우를 경험 할 수 있다.

4. Linting

• Linter는 소스 코드를 분석하여 애플리케이션이 실행되기 전에 잠재적인 문제들을 경고해준다.