Skip to main content

디버깅 기초

note

릴리스(프로덕션) 빌드에서는 Dev Menu, LogBox, React Native DevTools와 같은 디버깅 기능이 비활성화된다.

개발자 메뉴 열기​

React Native는 앱 내에서 디버깅 기능에 접근할 수 있는 개발자 메뉴를 제공한다. 기기를 흔들거나 키보드 단축키를 사용해 개발자 메뉴에 접근할 수 있다:

  • iOS 시뮬레이터: Ctrl + Cmd ⌘ + Z (또는 Device > Shake)
  • Android 에뮬레이터: Cmd ⌘ + M (macOS) 또는 Ctrl + M (Windows와 Linux)

대체 방법 (Android): adb shell input keyevent 82.

React Native 개발자 메뉴

DevTools 열기​

React Native DevTools는 React Native를 위한 내장 디버거다. 웹 브라우저와 유사하게 JavaScript 코드가 어떻게 실행되는지 검사하고 이해할 수 있게 해준다.

DevTools를 열려면 다음 방법 중 하나를 사용한다:

  • Dev 메뉴에서 "Open DevTools"를 선택한다.
  • CLI에서 j 키를 누른다 (npx react-native start).

첫 실행 시, DevTools는 환영 패널과 함께 열린 콘솔 서랍을 보여준다. 여기서 로그를 확인하고 JavaScript 런타임과 상호작용할 수 있다. 윈도우 상단에서 통합된 React 컴포넌트 검사기와 프로파일러를 포함한 다른 패널로 이동할 수 있다.

React Native DevTools가 "Welcome" 패널로 열린 화면

React Native DevTools는 React Native에 내장된 전용 디버깅 아키텍처로 구동되며, Chrome DevTools 프론트엔드의 커스텀 빌드를 사용한다. 이를 통해 익숙하고 브라우저와 일관된 디버깅 기능을 제공하며, 엔드투엔드 신뢰성을 위해 깊이 통합되어 있다.

자세한 내용은 React Native DevTools 가이드에서 확인할 수 있다.

note

React Native DevTools는 Hermes 엔진에서만 사용 가능하며, Google Chrome이나 Microsoft Edge가 설치되어 있어야 한다.

info

Flipper와 대체 디버깅 도구​

React Native DevTools는 이전의 Flipper, Experimental Debugger, 그리고 Hermes 디버거(Chrome) 프론트엔드를 대체한다. 만약 이전 버전의 React Native를 사용 중이라면, 해당 버전의 문서를 참고하길 바란다.

우리는 여전히 Direct JSC Debugging과 Remote JS Debugging(사용 중단됨)과 같은 레거시 디버깅 방법을 제공한다. 자세한 내용은 다른 디버깅 방법을 참고하길 바란다.

React Native DevTools는 React 앱의 디버깅을 위해 설계되었으며, 네이티브 도구를 대체하기 위한 목적이 아니다. React Native의 하위 플랫폼 레이어를 검사하고 싶다면(예: 네이티브 모듈 개발 중), Xcode와 Android Studio에서 제공하는 디버깅 도구를 사용하길 바란다. 자세한 내용은 네이티브 코드 디버깅을 참고하길 바란다.

기타 유용한 링크:

LogBox​

LogBox는 앱에서 경고나 오류가 발생했을 때 이를 표시해주는 내장 도구다.

LogBox 경고와 확장된 LogBox 구문 오류

치명적 오류​

자바스크립트 구문 오류와 같이 복구할 수 없는 오류가 발생하면, LogBox가 해당 오류의 위치와 함께 열린다. 이 상태에서는 코드가 실행될 수 없기 때문에 LogBox를 닫을 수 없다. Fast Refresh를 통해 또는 수동으로 페이지를 새로고침한 후 구문 오류가 수정되면 LogBox는 자동으로 닫힌다.

콘솔 에러와 경고​

콘솔 에러와 경고는 화면에 빨간색 또는 노란색 배지와 함께 알림으로 표시된다.

  • 에러는 알림 개수와 함께 표시된다. 알림을 탭하면 확장된 뷰를 확인할 수 있으며, 다른 로그를 페이지별로 탐색할 수 있다.
  • 경고는 세부 정보 없이 알림 배너로 표시되며, React Native DevTools를 열도록 유도한다.

React Native DevTools가 열려 있을 때, 치명적이지 않은 모든 에러는 LogBox에서 숨겨진다. 특정 로그를 숨기거나 조정할 수 있는 다양한 LogBox 옵션 때문에, React Native DevTools 내의 Console 패널을 신뢰할 수 있는 정보 소스로 사용하는 것을 권장한다.

💡 로그 무시하기

LogBox는 LogBox API를 통해 설정할 수 있다.

js
import {LogBox} from 'react-native';

로그 박스 알림은 LogBox.ignoreAllLogs()를 사용하여 비활성화할 수 있다. 이 기능은 제품 데모를 보여줄 때와 같은 상황에서 유용하게 사용할 수 있다.

js
LogBox.ignoreAllLogs();

특정 로그 무시하기​

LogBox.ignoreLogs()를 사용하면 개별 로그에 대해 알림을 비활성화할 수 있다. 이 기능은 지나치게 자주 발생하는 경고나 수정할 수 없는 경고(예: 서드파티 의존성에서 발생하는 경고)에 유용하다.

js
LogBox.ignoreLogs([
  // 정확한 메시지
  'Warning: componentWillReceiveProps has been renamed',

  // 부분 문자열 또는 정규식 매칭
  /GraphQL error: .*/,
]);
note

LogBox는 React에서 발생하는 특정 오류를 경고로 처리하며, 이 경우 앱 내 오류 알림으로 표시되지 않는다. 고급 사용자는 LogBoxData.setWarningFilter()를 사용해 LogBox의 경고 필터를 커스터마이징하여 이 동작을 변경할 수 있다.

성능 모니터​

안드로이드와 iOS에서 개발 중에 **"Perf Monitor"**를 개발자 메뉴에서 선택하면 앱 내 성능 오버레이를 활성화할 수 있다. 이 기능에 대해 더 자세히 알아보려면 여기를 참고한다.

iOS와 안드로이드에서의 성능 모니터 오버레이

info

성능 모니터는 앱 내에서 실행되며 가이드 역할을 한다. 정확한 성능 측정을 위해서는 Android Studio와 Xcode의 네이티브 툴을 사용해 조사하는 것을 권장한다.