vscode에서 expo react native 디버깅

유튜브에 동영상이 있는데, 동영상대로 하면 제대로 디버깅 되지 않습니다.

react native tools 공식 문서를 따라하면 제대로 설정됩니다.

 

1. React native tools 설치 및 설정

- vscode 에서 react native tools extension을 설치합니다.

- 설정에 들어갑니다.

- packager 포트를 19001로 변경합니다.

 

2. launch.json 설정

- vscode 디버그 탭에 create a launch.json file 클릭해 launch.json 파일을 생성합니다.

- 아무거나 선택해 줍니다. 저는 VS Code Extension Development 선택했습니다.

- Add configuration을 클릭한 후, Debug in Exponent를 선택합니다.

3. 디버거 실행

- 설정한 세팅을 선택하고, F5 버튼을 눌러 디버깅을 시작합니다. 처음 한 경우 expo 아이디와 비밀번호를 입력해야 합니다.

- QR을 스캔하여 앱 실행 후 리모트 디버깅을 활성화하면 아래와 같이 정상적으로 연결됩니다. 리모트 디버깅은 디바이스를 양쪽으로 흔들면 나오는 메뉴에서 Remote Debugging 버튼을 눌러 설정할 수 있습니다.