리액트에서 디버깅을 해보자

리액트에서 디버깅을 해보자

나는 옛날에 다른 언어로 코딩할 때, 문제가 생기면 break point를 걸어 디버깅을 자주 했었는데,
웹에서는 아무 생각 없이 그냥 console.log를 찍어가면서 디버깅을 하고 있었다.

이번에 공부를 하다가 문득 디버깅도 제대로 못하면 안된다고 생각해서 리액트에서는 어떻게 break point를 걸어서 디버깅을 할 수 있을지 알아보았다.

우선, 가장 기본적인 리액트 프로젝트 생성해서 실행하자.

[실행 및 디버그] 탭으로 이동 해서 [실행 및 디버그] 버튼을 눌러준다.

디버거 선택이 나오면 웹앱(Chrome)을 골라준다

그럼 .vscode 폴더가 생기면서 그 안에 launch.json이 생기는데, 여기서 파일에 내용을 설정한다

url을 3000(리액트) 포트로 변경, webRoot에 "/src"를 붙여준다

[이전 이미지]

[이후 이미지]

그 이후, "디버깅 시작"을 누르면 새로운 브라우저 창이 열리면서 디버깅 가능한 상태가 된다.

이후, 브레이크 포인트를 걸고 브라우저를 새로고침 해보면 브레이크 포인트에 실행이 걸리면서 노란색 표시가 뜨는 것을 확인할 수 있다.

useState를 적용하여 변수를 만들면 브레이크 포인트 시점에서의 변수 상태도 확인할 수 있다.

앞으로는 console.log를 줄이고, breakpoint를 활용한 디버깅을 좀 자주 활용하는 버릇을 들여야 할 것 같다.