React Native 디버깅 자동화 구축기

 

1. 시작 — 콘솔로그 지옥을 탈출하자!

React Native로 앱을 개발하다 보면, 웹처럼 Network 탭을 통해 API 요청과 응답을 쉽게 확인할 수 없습니다.

GraphQL을 사용하는 제 프로젝트에서는 “요청이 잘갔는지?” “응답은 제대로 오는가?”를 매번 확인하기 위해, console.log()를 이곳저곳에 찍고, 문제 해결 후엔 다시 지우는 비효율적인 방법을 사용하고 있었습니다. 이건 디버깅보다는 단순 반복에 가까웠습니다.

---

2. 원인 — React Native는 브라우저가 아니다

가장 큰 이유는 단순합니다. React Native는 브라우저 환경이 아니기 때문이죠. 웹 개발에서는 Chrome DevTools의 Network 탭을 통해 API 요청을 쉽게 추적할 수 있지만, React Native는 JavaScript 코드가 Hermes 엔진 위에서 실행되며, 이 엔진은 Chrome 디버깅 프로토콜과 호환되지 않습니다.

그래서 Debug JS Remotely 메뉴도 보이지 않습니다. Hermes가 빠르고 가볍다는 장점이 있지만, “브라우저 기반 디버깅”은 포기해야 하는 셈입니다.

---

3. 시행착오 — 4개의 React Native 디버깅 도구들

시도 1: React Native DevTools

• 장점: 컴포넌트 트리, props/state, 렌더링 분석 가능
• 단점: 네트워크 요청은 지원하지 않음

→ “UI 성능 분석용이지, 네트워크는 못 봐요.”

---

시도 2: React Native Debugger

• Hermes를 사용하면 원격 디버깅(Remote JS Debugging) 이 비활성화됩니다.
• JSC에서는 잘 되지만, Hermes에서는 불가능.

→ “운영에는 Hermes가 최고지만, 디버깅은 꽝.”

---

시도 3: Flipper

• Meta가 만든 공식 디버깅 툴로, Hermes 전용 플러그인을 지원.
• 하지만 설치 과정이 너무 복잡합니다.

brew tap facebook/fb
brew install idb-companion
pip3 install fb-idb

여기서부터 Python 버전 충돌, 경로 문제(idb_companion 위치 불일치) 등으로 과도한 추상화가 요구된다고 느꼈습니다.

→ “이건 내가 원하는 단순한 네트워크 모니터링과는 거리가 멀다.”

---

시도 4: Reactotron (🫶🏻성공)

설치도 간단하고, React Native에서 앱 실행 시 자동으로 연결되는 점이 매력적이었습니다.

brew install --cask reactotron
yarn add -D reactotron-react-native

이후 설정 파일만 추가하면
Apollo Client의 GraphQL 요청/응답이 실시간으로 시각화됩니다.

---

4. 구현 — Reactotron 적용

// ReactotronConfig.ts
Reactotron 설정 파일을 추가하고, 개발 환경에서만 동작하도록 구성합니다.

// App.tsx
앱 시작 시 Reactotron을 초기화합니다.

// src/apollo/client.ts
Apollo Client에 Reactotron enhancer를 연결해
모든 요청/응답을 Reactotron 창에서 확인할 수 있습니다.

// reactotron.d.ts
타입 정의를 추가해 TypeScript 환경에서도 오류 없이 사용합니다.

이제 앱을 실행하면, Reactotron **Timeline** 창에서 다음을 실시간으로 볼 수 있습니다:
✅ GraphQL 요청 쿼리
✅ 서버 응답 데이터
✅ 요청 상태 (성공/실패)

 

---

5. 결과 

이제 더 이상 함수를 찾아 일일히 제손으로 콘솔로그를 붙였다 지웠다 할 필요가 없고, 제 터치 일절 없이 실시간으로 조회가 가능합니다! 휴먼의 승리입니다 ^^ 

---

Tech Stack

React Native · TypeScript · Apollo Client · Hermes · Reactotron

---