소개

Expo 환경의 VSCode에 의한 디버깅 방법을 게시합니다.
사용 환경은 MacOS입니다.

이 게시물에서 다루는 내용

Expo 프로젝트 생성부터 VSCode로 디버깅할 때까지 다룹니다.
1. Expo 프로젝트 작성
2. VSCode 디버그 설정
3. Expo 앱 실행
4. 디버그 시작, 실행

1. Expo 프로젝트 만들기

Expo 프로젝트를 만듭니다.

#expo init プロジェクト名

프로젝트 이름과 템플릿은 자유롭게 지정

2.VSCode 디버그 설정

(1) React Native Tools 플러그인 설치

React Native Tools를 설치합니다.

(2) 디버그 구성 추가

VSCode 상단의 디버그 옆에 있는 '구성 없음' 입력란을 클릭합니다.


구성 추가를 선택하면 선택 후보가 표시되므로 React Native: Attach to packager를 선택합니다.


launch.json 파일이 자동으로 작성됩니다.

(3) settings.json에 Expo 사용 포트 추가

Expo에서 사용할 포트를 VSCode 구성 파일에 추가합니다.

"react-native.packager.port": 19001

메뉴에서 Code > 설정을 클릭하여 설정을 표시합니다.

VSCode의 화면 우측 상단에서 "}"를 클릭하여 설정 내용을 텍스트로 표시합니다.

,"react-native.packager.port": 19001 　을 추가합니다.
설정 내용의 구분 기호 쉼표도 잊지 않고 입력합니다.

3. Expo 앱 실행

터미널에서 Expo 앱을 시작합니다.

iOSの場合
npm run ios

Andoridの場合
npm run android

다음 설명에서는 iOS의 경우를 예로 설명합니다.

Expo 웹 콘솔과 시뮬레이터가 시작됩니다.


iOS 시뮬레이터가 시작되면 Expo 앱이 시뮬레이터에 자동으로 설치됩니다.

Expo에서 앱을 열 수 있는지 확인 대화 상자가 나오므로 Open을 클릭합니다.


앱이 시작됩니다.

4. 디버그 시작, 실행

VSCode 상단에서 Attach Pacage를 선택하고 緑ボタン를 클릭하여 VSCode에서 Expo 앱 프로세스에 연결합니다.


VSCode 상단에 디버그 제어 창이 표시됩니다.


시뮬레이터에서 디버그 설정 화면을 표시하고 Debug Remote JS를 클릭하여 디버그 모드를 활성화합니다.


시뮬레이터에 디버그 설정 화면이 표시되지 않으면 Command + d로 표시합니다.

Command+d에서 디버그 설정 화면을 닫고 Expo 앱으로 돌아갑니다.




소스에 중단점을 넣습니다.


앱 화면을 다시 읽으려면 Command+r에서 화면을 다시 읽습니다.


앱 화면을 다시 읽으면 중단 점에서 멈추고 디버깅이 가능합니다.


VSCODE의 아래 화면에서 브레이크 포인트에 대해 재개 실행, 스텝 실행, 디버그 정지가 가능합니다.


　

디버깅이 잘 안되면
이전의 디버그 실행이 프로세스를 잡고 있을 가능성이나 Expo의 프로세스가 불안정한 때가 있습니다. 이 경우, Expo 재기동, VSCode 재기동, PC 재기동, 시뮬레이터의 초기화나 재기동등을 시험해 주세요. 이들 중 하나에서 디버그가 복구하는 경우가 있습니다.