[Debug] IDE로 리액트 프로젝트를 디버깅해보자.

디버깅...?

리액트 프로젝트에서 videos의 자료형을 보고 싶다면 어떻게 할 것인가?

가장 먼저 생각나는 방법은 console.log이다.

 

우리들의 강력한 디버깅 친구는 console.log다.

console.log와 구글크롬으로 사실 충분할지도 모른다.

머리 아픈 디버깅 방법을 알 필요도 없고 바로 크롬 개발자도구에서 결과를 볼 수 있으니까.

 

그러나, console.log는 딱 개발자가 지정한 변수만을 출력해준다는 단점이 있고,

문제의 인과관계를 알기도 힘들고, 특히 this binding과 같이 조금만 어려워져도 추적이 힘들어진다.

변수가 3-4개만 연관되어 있어도, console.log(a,b,c,d); 와 같이 모두 담아줘야 한다.

때로는 특정 시점 이전과 이후로 console.log를 추가하여 관찰해줘야 한다.

 

심지어는 종종 console.log를 지우는 것을 까먹어서, 커밋에 포함되어 원격저장소에 푸시되기도 한다.

 

그렇다면 ide에서 제공하는 디버깅 방법을 배워두면 쓸만하지 않을까?

디버깅 덕에 “특정 지점”에서의 데이터 관찰 뿐 아니라 문제 해결의 논리적 추리력도 키울 수 있다.

 

---

디버깅 절차

저는 vscode IDE를 사용하므로 vsode 기준으로 설명하면,

 

절차는 무척 간단하다.

• 관찰하려는 시점에서 중단점(break point)를 걸어준다.
• 디버그 명령을 실행한다.
• IDE가 자동으로 중단점에서 프로그램 실행을 중단해주며, 그 때 보여주는 데이터들을 관찰하면 된다.

이게 디버깅의 처음이자 끝이다.

보려는 실행시점을 체크하고, 실행하고, 보면 된다.

---

리액트 프로젝트에서 디버깅하기

우선 우리의 리액트 앱을 실행한다.

CRA로 만든 프로젝트라면 npm start, 직접 설정한 프로젝트라면 개발모드를 켜준다.

 

터미널에서 우리 리액트 프로젝트의 포트(3000번)을 기억해둔다.

 

그리고는 디버그 탭을 열어주는데,

• 좌측 메뉴 4번째 탭 실행 및 디버그
• shift + option + D
• fn + F5

셋 중에 아무거나 실행하면 된다.

 

프론트를 디버깅해야 하므로, 디버거로 chrome을 지정해주자.

 

실행 및 디버그 > chrome을 검색한다.

프로젝트 루트에 .vscode 디렉토리가 생성되고, 내부에 launch.json이 추가된다.

이 파일에는 디버그 설정들이 담기게 된다.

 

url에는 우리 개발서버의 포트(필자는 3000번)로 수정하여 저장한다.

 

그럼 이제 Launch Chrome against localhost라는 실행 명령이 생겼을 것.

원하는 시점에 중단점을 걸어 디버그 실행을 해주면 된다.

 

이처럼 관찰하려는 시점에 중단점(break point)를 걸어준다.

좌측 빨간 점이 중단점에 해당하며, 여러 곳을 관찰하려면 여러 곳을 지정하면 된다.

 

디버그 실행 탭에서, 실행 및 디버그의 우측 화살표를 누르면 디버그가 실행된다.

프로그램이 실행되면서, 개발자가 걸어둔 중단점에서의 데이터들을 보여주게 된다.

(이 때 npm start로 개발서버를 먼저 띄워둔 상태에서 디버그를 실행해준다. 구동중인 개발서버 기반으로 디버그가 실행된다.)

 

중단점에서의 데이터를 관찰하면 된다.

videos의 자료구조인 배열에 담긴 모든 데이터도 볼 수 있고

this에 어떤 객체가 바인딩되어있는지,

이론으로만 배워왔던 클로저, 전역변수에는 어떤 변수들이 있는지도 볼 수 있다.

 

그래서 문제 해결을 위해 개발자가 디버깅을 하면서, 문제의 인과관계를 파악하기 더 쉽다.

(= 결과적으로 개발자 의도에 따라 소프트웨어가 완벽하게 동작할 확률이 높아진다는 것이다.)

 

---

비동기함수도 관찰 가능

위에서 특이한 점은, 중단점이 걸린 위치가 useEffect + 내부의 즉시실행함수도 async 함수 내부라는 점이다.

이는 비동기적으로 실행되는 코드도 감지할 수 있다고 보여진다.

 

조금 더 쉬운 예시를 보면,

사용자 이벤트에 의해 이벤트리스너가 실행되는 시점에 중단점을 걸어둘 수 있다.

event 객체의 내용을 보거나, 이벤트리스너가 의도치 않은 동작을 하는 경우 분석할 수 있게 된다.

 

다음은 이벤트리스너가 의도대로 동작하지 않는 대표적인 예시이다.

버튼을 클릭하면 console.log("Tom")을 출력하도록 설계되어 있다.

 

문제는 없어 보였으나, Cannot read properties of undefined (reading 'name') 라는 에러를 뿜는다.

this가 undefined라서 undefined의 참조할 수 없다. 가 오류의 원인이다.

 

동일하게 이벤트리스너 sayName에 중단점을 걸어주면, this에 어떤 객체도 바인딩되어있지 않다.

그렇다면 이제 자신이 아는 방법대로 this를 바인딩해주면 된다.

 

현재 상황에서, 우선 생각나는 방법으로는 화살표함수를 활용해봤다.

화살표함수로 바꿔서 이벤트를 발생시키니, this에 Customer의 인스턴스가 바인딩 된 것이 보인다.

이제 의도한대로 say name 버튼 클릭시 console.log("Tom")이 출력된다.

---

짧게 소개를 마치며..

디버깅을 배우면서 글의 내용 외에도

• 디버깅 시 나타나는 버튼들은 어떤 역할들을 하는지
• closure가 무엇인지
• this가 왜 사라지는지
• event 객체는 무엇인지
• 클래스의 인스턴스가 무엇인지

등등 궁금한 것이 많이 생겨났을 수도 있을 것 같다.

 

이제 궁금한 것을 학습하거나, 프로젝트에서 디버깅을 잘하는 개발자인 척 하러 가보자~