이 기사는 "【연재】 최초의 React Native + Expo 개발 환경 구축 입문"의 자식 기사입니다. 환경과 같은 조건은 상위 기사를 참조하십시오.

지난번 이미 살짝 나왔습니다만, Expo와 Visual Studio Code로 개발 환경을 만들면, 자연스럽게 개발 동작 환경이 모바일 실기가 되어, 디버거는 Chrome이 됩니다.
이번에는 이 동작 중 기본적인 부분을 살펴보겠습니다.

구문 오류 발생 동작

우선 간단한 오류가 코드에 맞는 경우 어떤 동작을 하는지 살펴보겠습니다.
App.js에서 아래와 같이 Hello World!를 둘러싸는 Text 태그를 잘못해 보겠습니다.


　 이미 Linting에서 실수가 지적되고 있습니다만, 신경쓰지 않습니다. 저장하고 실행합니다.

> expo start

※ 만약 Edge가 열리는 경우, 기본 브라우저를 Chrome으로 해 두는 것이 더 행복해질 수 있습니다.

이번은 구문 에러이므로, 아래와 같이 Expo 화면과 PowerShell에 에러가 명시됩니다.


디버거 레벨이 아닙니다.

런타임 오류 발생 동작

이번에는 구문 에러가 아니라, 실행해 처음 알 수 있는 에러를 발생시켜 보겠습니다. 숫자 객체의 멤버 함수를 실행해 봅니다.

export default function App() {
  var a = 1;
  var b = a.undefinedfunction();
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Text>Hello World!</Text>
    </View>
  );
}

Chrome 디버거 쪽에, 문제의 소스 코드 부분과, 에러의 내용을 명시해 줍니다.


짱과 a 의 내용까지 보여주네요.
Visual Studio Code의 헤비 유저에게 있어서는, Visual Studio Code의 디버그 콘솔등이 무반응인 것이 납득할 수 없을지도 모릅니다만, 가볍고 우수한 디버거가 움직이고 있기 때문에, 너무 생각하지 않는 편이 좋은 것 같습니다. (와 이 근처의 기사를 읽고 판단하고 있습니다.)

브레이크 포인트

브레이크 포인트를 사용해 봅시다. 소스 코드를 다음과 같이 하여 변수 b에 무엇이 대입되려고 하는지를 살펴보기로 한다. var b = a; 의 줄에서 멈추고 싶네요.

App.js

export default function App() {
  var a = 1;
  var b = a;
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Text>Hello World!</Text>
    </View>
  );
}

App.js를 수정하고 저장한 후 실행합니다.

Chrome에서 디버거( http://localhost:19001/debugger-ui/ 페이지)가 시작되면 Chrome 개발 도구의 소스 탭에서 다음과 같이 중단점을 만들 수 있습니다.


모바일 실기를 흔들어 Expo 메뉴를 내고 [Reload Manifest and JS Bundle] 합니다.


모바일에서 앱이 다시 로드되어 var b = a; 의 처리를 실행하기 직전에 일시정지 상태가 되어 다음과 같이 디버거에 표시됩니다.


브레이크 포인트에서 정지하고 있음이 표시되고, 변수 a의 내용이 자동으로 표시됩니다.
변수를 Watch(오른쪽 창에 있음)에 추가할 수도 있습니다. 이 근처는 Chrome 디버거의 사용법이 되어 오므로 자세한 것은 구구 해 보세요.

또한, 임의의 파일을 열고 싶을 때는, 소스 탭의 왼쪽의 파일 트리로부터 선택합니다. 예를 들어, 적당한 App.js를 지정하는 경우는 다음과 같습니다.

로그 출력

일반적인 JS 앱과 마찬가지로 console.log()의 출력도 할 수 있습니다.

App.js

export default function App() {
  console.log("Test message from Hello World!");
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Text>Hello World!</Text>
    </View>
  );
}