멘토님이 추천해준 글들을 읽고 프로젝트에 디버거를 붙여 보았다.
Debug on expo-dev-client
How to Debug React Native Apps Using Expo and VSCode
Debugging your React Native App with Visual Studio Code(VS code)

1. expo dev menu debugger

npx expo start

이후
터미널에서 m을 눌러 개발 메뉴를 열고

› Toggling dev menu

에뮬레이터 개발 메뉴에서 Open JS debugger를 누르면 크롬 디버거가 나온다.

크롬 디버거에서 상단 메뉴에서 source탭을 보면 내 코드를 볼 수 있다.

브레이크 포인트를 찍었을 때 잘 멈추고, 변수도 잘 캡처되는 것을 확인했다.

하지만 위 스샷은 문제 없이 동작할 때 브레이크 포인트를 찍어본 것인데 오늘 오후에 실제로 에러가 났을 때 브레이크 포인트를 찍어보았는데, 브레이크 포인트에서 제대로 멈추지 않았고, 에러를 재현하기 위해 리렌더링을 하면 바로 디버거와 앱의 연결이 끊겨서 리커넥트를 매번 해줘야 하는 등 문제가 많았다.

2. react native dev menu debugger

react natvie dev menu에서 debugger도 있다.
🔗 문서에 따르면 새로 생긴 실험적인 디버거라고 한다.
설명에는 --experimental-debugger 옵션을 cli에서 줘야하는데 그냥 개발 메뉴에서 Open debugger 누르면 새로운 디버거가 나왔다.

1번과 같이 expo로 앱을 켠 뒤 터미널에서 m을 눌러 개발 메뉴를 열고 제일 아래 react native dev menu를 클릭한다.

새 디버거가 반겨준다.

똑같이 source로 가면 이전 디버거와 다르게 아무 파일도 안나와 있어서 처음에 당황했는데,

안내 문구처럼 cmd+P로 Open file을 하면 원하는 파일을 열고 똑같이 브레이크 포인트 걸고 디버그 할 수 있다.

더 찾아 볼 것

1. 두 디버거의 차이
2. VS Code 디버거에서 보는 방법 왜냐하면 크롬 디버거를 따로 또 띄우면 번거로움 - react native tools 익스텐션이 있지만 launch.json 설정이라던가 연결이 쉽지 않았음.
3. 이후 에러 발생시 MS 문서에 있는 절대 초보자를 위한 디버그 초반 부분 다시 보고 디버깅 해보기