React 디버깅

디버깅이란?

버그(Bug)란 프로그램이 개발자가 의도하지 않은 방향으로 실행된다거나 갑자기 오류가 발생해 실행이 중단되는 등 프로그램의 임무를 정상적으로 실행하지 못하는 오작동을 의미한다.

디버그(Debug)란 버그를 잡는다는 의미로 개발자가 의도하지 않은 결과나 오류를 해결하는 작업을 뜻한다.

디버깅 기능의 활용 정도에 따라 개발 단계 중후반에서 각종 버그를 잡고 고치는 데에 상당한 시간 비용 차이를 만들어낸다고 한다.

+) 에러는 선언하지 않은 파일, 변수 등으로 프로그램이 동작 자체를 못 한다.

Debugger for Chrome

리엑트 디버깅 툴 관련해서 구글링하다가 vscode 확장 마켓에 Debugger for Chrome을 발견했다!

Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

Chrome 브라우저 또는 Chrome Debugger 프로토콜을 지원하는 경로에 로드된 JavaScript 코드를 디버그할 수 있다.

사용 전 세팅

1. 확장 설치가 끝나면 .vscode 폴더를 설치한다. 이때 만약 git을 사용하는 중이라면 이것을 추적할 필요가 없고 또한 개발자마다 사용 환경이 다르기 때문에 .gitignore 파일에 vscode를 넣어둔다.

2. .vscode 폴더 안에 launch.json 파일을 생성하고 아래 코드를 입력한다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

이렇게 하면 모든 세팅은 끝났다. 이제 직접 사용해 디버깅이라는 것을 해보자!

실전! 사용해보기

예전에 만들었던 westagram에 디버깅을 하려고 한다.

만약 내가 설정한 유효성 검사에 부적합한 아이디와 비밀번호 값이 들어왔는데 로그인 버튼이 활성화된다면 어떨까?

이 아이디와 비밀번호 값을 확인하고 싶을 것이다.

20번 왼쪽에보면 붉은 점이 브레이크 포인트다.
내가 디버깅하고 싶은 시점의 코드라인을 찾아 숫자 왼쪽에 마우스를 클릭하면 붉은 점(브레이크 포인트)이 생긴다.

왼쪽 탭에 보이는 벌레 아이콘을 클릭한 후 상단의 >Chrome을 클릭하면 디버거가 실행된다.

새로운 화면과 함께 아래 툴이 생성된다.

• continue
  다음 브레이크 포인트로 이동한다. 만약 다음 브레이크가 없으면 디버깅을 종료한다.

• step over
  현재 브레이크 된 라인에서 다음 라인으로 이동하되 함수 안으로 들어가진 않는다.

• step into
  브레이크 된 라인에서 실행되고 있는 내부 함수로 이동한다.

• step out
  브레이크 된 라인에서 호출한 곳으로 이동한다.

• restart
  디버거를 재실행한다.

• stop
  디버거를 종료한다.

브레이크 포인트에 걸린 시점에서 들어간 값을 마우스 호버 시 볼 수 있다.

step over을 통해 다음 라인을 이동하며 local 변수 할당 값을 확인할 수 있다.

알아가는 단계기 때문에 솔직히 아직 잘 모르겠고 디버깅이라고 불릴 필수 작업을 수행하진 못했다.

하지만 디버깅이 무엇인지 그리고 툴을 발견했으므로 나는 이제 내가 무엇이 부족한지 안다!

이제부터는 열심히 구글링하며 사용법과 디버깅 기술들을 터득할 일만 남았다!!!

참고

• 실전코딩 - 디버깅
• E02-3-React. 디버깅 방법, 정보를 얻는 방법
• React debugging 하기
• Live edit and debug your React apps directly from VS Code — without leaving the editor 🔥 🎉🎈