import Reactotron, { openInEditor } from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux'
import AsyncStorage from '@react-native-async-storage/async-storage';
import apisaucePlugin from "reactotron-apisauce"
import config from '../app.json';
Reactotron
.configure({
name: config.name,
onDisconnect: () => {
},
})
.setAsyncStorageHandler(AsyncStorage) // AsyncStorage의 모니터링 설정
.useReactNative({
asyncStorage: true, // AsyncStorage의 모니터링 설정
networking: true, // netwrok의 모니터링 설정
})
.use(reactotronRedux()) // Redux 모니터링 설정
.use(apisaucePlugin()) // Apisauce 모니터링 설정
.use(openInEditor()) // 편집기에서 열기 설정
.connect();
3) 앱을 실행합니다.
1. Reactotron App을 실행합니다.
2. 안드로이드의 디바이스를 이용하는 경우 포트포워딩을 해줍니다.
💡 안드로이드의 디바이스를 이용하는 경우 포트포워딩을 해줍니다. - 안드로이드 디바이스를 사용하는 경우는 안드로이드 기기의 포트를 포트포워딩을 통해서 9090 포트로 연결을 해주어야 합니다. - 이는 Reactotro이 통신할 수 있도록 안드로이드 디바이스와 Reactotron를 설정하는 필수적인 단계입니다. - 디바이스를 연결한 뒤 아래의 명령어를 통해서 포트포워딩을 수행합니다.
$ adb reverse tcp:9090 tcp:9090
💡 해당 포트포워딩을 수행하고 Metro Bundler를 새로고침 하면 연결됨을 확인할 수 있습니다.
3. React-native 앱의 Metro Bundler를 재 실행합니다.
4. Timeline 탭을 선택하고 앱을 동작시킵니다.
💡 Timeline 탭을 선택하고 앱을 동작시킵니다.
- 위에서 지정한 Redux(Async Storage)와 API Response에 대한 로그 및 일반 DEBUG에 대해서 출력이 됨을 확인하였습니다.
5. 오른쪽에 필터 버튼을 눌러서 필요한 로그에 대해서만 확인이 가능합니다.
💡 필터를 선택하였습니다.
💡 아래와 같이 ‘API’ 필터만 선택한 경우, 이에 따르는 각각에 대해서만 확인이 가능합니다.
4) 앱 내에 상세 값 확인
1. RTK(Redux Tool Kit) : AsyncStorage 값 확인
💡 RTK(Redux Tool Kit) : AsyncStorage 값 확인
- 아래와 같이 AsyncStorage 내에 저장한 Redux값에 대해 아래와 같이 key, value 형태로 확인 할 수 있음을 확인하였습니다.
2. API 통신 데이터 확인 : Axios 요청/응답 값 확인
2.1. API 통신 요청 값 확인
💡 API 통신 요청 값 확인
- 아래와 같이 데이터 통신 엔드포인트와 요청/응답 시간, 요청 시 사용했던 값을 아래와 같이 확인 할 수 있습니다.
2.2. API 통신 응답 값 확인
💡 API 통신 응답 값 확인
- 아래와 같이 데이터 통신 엔드포인트와 통신 시간, 응답 값을 아래와 같이 확인 할 수 있습니다.
3. 개발자 콘솔 조회
3.1. 디버그 콘솔
💡 디버그 콘솔
- 아래와 같이 하나의 콘솔내에 여러 개 출력 중이며, JSON 형태의 데이터의 경우는 prettier 된 형태로 출력이 됩니다.
