리액트 네이티브 (React Native) 앱 디버깅 하는 방법들

개요

리액트 네이티브 앱 디버깅 방법에는 어떤 것들이 있을까?

React-Native 에서 제공하는 자체적 Debugging 툴 이용하기

애뮬레이터에서 Ctrl + M 을 누르면, 디버그 모드로 들어가는데 이 디버그 모드를 이용해서 디버깅할 수도 있다. 그러나 Flipper 라는 더욱 강력한 디버깅 도구가 있으니, 그걸 쓰는게 낫다.

왜냐하면 앱에서 보내는 네트워크 요청과 같은 것들을 하나도 볼 수 없다.

Flipper Debugging 툴 이용하기

1. Flipper 웹사이트 에서 다운로드 받을 수 있다. 운영체제에 적합한 버전을 다운받으면 된다.
2. 다운로드 이후 Setup Doctor 를 통해 필요한 패키지를 알아볼 수 있다.

3. 윈도우즈의 경우 OpenSSL 이 설치되어 있지 않으니, chocolatey 라는 패키지 매니저를 통해 OpenSSL 을 설치하면 된다. (choco install openssl, 이게 설치되어야 Flipper 가 제대로 작동한다.)
4. 에뮬레이터를 재시작하면, 완전히 연결된다.

위와 같이 내가 현재 어떤 레이아웃들을 가지고 있는지도 볼 수 있다. 레이아웃 이름 위에 마우스를 대면 해당 레이아웃에 하이라이팅도 해준다.

플러그인 설치하기

• async-storage: 리액트 네이티브의 local storage 같은 개념이다.
• redux-debugger: 리덕스에서 돌아다니는 값을 디버깅할 수 있다.

노드 모듈도 같이 설치해주어야 한다.

npm install react-native-flipper redux-flipper rn-async-storage-flipper --force

--force 옵션이 리액트 네이티브에서는 어쩔 수 없다.

npm install -d react-devtools-core@latest --save-dev --force
npm install -g react-devtools@latest

flipper 에서 React DevTools 가 잘 작동하지 않는다면, 그냥 npx react-devtools 를 stand alone 으로 실행해서 사용하는 것이 정신건강에 이로울듯하다. 뭔가 엄청 안 된다.

레퍼런스

인프런 - 배달앱 클론코딩