Flipper는 0.62 버전에 도입된 이래로 React Native 개발자의 워크플로우에서 큰 부분을 차지해 왔습니다. 이는 React Native 개발자들에게 희소식이었습니다! 저희는 오랫동안 더 나은 디버깅 툴을 원했습니다.
하지만 컴파일 시간이 길어지고, 여러 가지 문제가 발생하고, 앱 연결에 가끔 문제가 발생하고, Flipper에 전혀 영향을 미치지 않아야 할 업그레이드가 실패하는 등의 대가가 따랐습니다.
결국 React Native 코어 팀은 Flipper를 제거하기로 결정했습니다.
자세한 내용은 RFC를 읽어보시면 알 수 있지만, 간단히 요약하면 커뮤니티 CLI에서 Flipper를 제거하고 기본적으로 사용을 권장하지 않는다는 것입니다.
이제 무엇을 할까요? Flipper는 핵심 기능과 플러그인을 통해 React Native 개발자에게 유용한 기능을 많이 제공했습니다.
소매를 걷어붙이고 하나씩 하나씩 교체해 보겠습니다.
React DevTools
저는 종종 Flipper를 열 때 React render tree와 Components Inspector, Profiler flamegraph를 활용하기 위해 React DevTools로 향합니다.
대안:
React DevTools를 단독으로 실행하세요! 이 간단한 명령어는 가벼운 Electron 앱에 React DevTools 버전을 팝업합니다.
npx react-devtools
이 도구는 React Native 앱에서 몇 가지 문제가 발생할 수 있습니다.
디바이스 로그 표시
console.log 호출은 일반적으로 Metro packager 윈도우 출력에서 볼 수 있지만, 네이티브 디바이스(시뮬레이터나 디바이스) 로그 자체는 확인하기가 조금 더 어렵습니다. Flipper는 모든 디바이스 로그를 한 곳에서 볼 수 있는 화면을 제공했습니다.
대안:
Android에서는 다음과 같이 Android Studio 또는 CLI에서 'logcat'을 사용할 수 있습니다.
# if using an emulator
adb logcat
# if using a real device
adb devices
adb -s "DEVICE_ID" logcat(더 쉽게 실행하는 방법은 npx react-native log-android를 사용하는 것입니다.)
iOS에서는 Xcode에 내장된 디바이스 로그를 사용할 수 있습니다.
Xcode에서 실행하고 싶지 않다면 MacOS 앱 Console.app을 사용할 수도 있습니다. Spotlight로 실행한 다음 실행 중인 디바이스를 선택하고 로그 스트리밍을 시작합니다. 오른쪽 상단에서 검색(앱 이름 입력)을 통해 앱의 로그만 보거나 특정 로그를 검색할 수 있습니다.
npx react-native log-ios를 실행해 볼 수도 있지만 테스트에서 제대로 작동하지 않았기 때문에 지금은 위의 대안을 사용하는 것이 좋습니다.
네트워크 호출 로그
네트워크 호출을 가져와서 검사하는 것은 흔한 일입니다. Flipper의 네트워크 플러그인을 사용하면 요청 및 응답 헤더와 페이로드를 살펴볼 수 있습니다.
대안:
Infinite Red의 Reactotron을 사용하세요! 타임라인에서 네트워크 요청과 응답을 살펴볼 수 있습니다. 이 기능은 매우 유용하기 때문에 향후 릴리스에서 전용 네트워크 탭을 만드는 것을 논의 중입니다.
요청을 CURL로 복사하여 터미널에서 실행할 수도 있습니다.
데이터베이스 보기
Flipper에는 디바이스에서 SQLite 쿼리를 검사할 수 있는 데이터베이스 플러그인이 있습니다.
대안:
솔직히 이것은 대체하기 어려운 것 중 하나입니다! Flipper의 데이터베이스 뷰어는 사용하기 매우 쉽고 강력합니다.
그러나 SQLite는 파일일 뿐이므로 선택한 데이터베이스 뷰어를 사용하여 파일 시스템에서 SQLite 파일의 위치를 찾아서(iOS 시뮬레이터를 사용하는 경우) 파일을 열고 쿼리를 실행할 수 있습니다.
Crash Reporter
Flipper의 Crash Reporter는 네이티브 측에서 크래시가 발생하면 로그와 함께 알림을 표시합니다.
대안:
프로덕션 환경에서는 Sentry, BugSnag, Crashlytics 등과 같은 Crash Reporter를 이미 사용하고 있을 것입니다. Ignite에는 크래시 리포팅 설정을 연결할 수 있는 편리한 공간도 제공됩니다. 이런 기능 없이 앱을 출시해서는 안 됩니다!
개발 시에는 네이티브 로그(위에서 설명한)에서도 충돌을 확인할 수 있습니다. 어쨌든 이 기능은 Flipper에서 기본적으로 수행하는 모든 기능입니다.
Shared Preferences Viewer
저는 이 플러그인을 거의 사용하지 않았지만, 이 플러그인을 사용하면 기본 키 값 저장소인 NSUserDefaults(iOS) 또는 SharedPreferences(Android)에 액세스할 수 있습니다.
대안:
React Native 개발자는 일반적으로 preference를 저장할 때 react-native-mmkv 또는 AsyncStorage를 사용하지만, 네이티브 코드와 공유하는 경우에는 일반적으로 이러한 네이티브 툴을 사용한다는 점에 유의하세요.
이에 대한 액세스가 필요한 경우 iOS의 로그에 덤프하거나 Android Studio에서 직접 파일을 볼 수 있습니다.
Layout Inspector / UI Debugger
Flipper의 Layout Inspector와 UI Debugger는 네이티브 뷰를 파헤치고 관련 정보를 확인하는 데 유용합니다.
대안:
Xcode에 내장된 view hierarchy inspector를 사용하여 iOS 네이티브 뷰를 확인합니다.
-
Xcode에서 디버그 메뉴로 이동한 다음 "Attach to Process"을 클릭하고 실행 중인 앱을 선택합니다.
-
디버그 메뉴로 돌아가서 'View Debugging' 및 'View Hierarchy'를 선택합니다. 왼쪽에 계층 구조가 표시되고 가운데에 익스플로드 뷰가 표시됩니다. 오른쪽에서 마지막 두 아이콘을 클릭하면 뷰에 대한 다양한 정보를 볼 수 있습니다.
Android의 경우 Android Studio의 Layout Inspector를 사용하세요.
-
Android Studio에서 앱을 실행합니다.
-
View -> Tool Windows -> Layout Inspector로 이동합니다.
이렇게 하면 네이티브 뷰가 표시되며 Xcode와 유사한 3D 익스플로드 뷰에서 검사할 수 있습니다.
Navigation
솔직히 이 글을 위해 조사하기 전에는 이 플러그인이 있는지조차 몰랐습니다. 이 플러그인을 사용하면 딥링크를 설정하고 앱 내 위치한 곳을 쉽게 탐색할 수 있습니다.
대안:
Reactotron에는 유사한 기능을 달성하기 위해 설정할 수 있는 커스텀 커맨드가 있습니다. 디바이스의 브라우저에서 실행되는 간단한 웹 페이지에서 딥링크를 설정할 수도 있습니다.
Hermes Debugger
Hermes를 사용하는 경우 Flipper에 전용 디버거가 있습니다.
이것은 비교적 간단할 것입니다! 공식 문서에서 발췌한 내용입니다.
-
Chrome 브라우저 창에서
chrome://inspect로 이동합니다. -
"Configure…" 버튼을 사용하여 개발 서버 주소(일반적으로
localhost:8081)를 추가합니다. -
이제 "inspect" 링크가 있는 "Hermes React Native" 타겟이 표시됩니다. 이를 클릭하면 디버거가 열립니다.
Flipper 이후의 삶
이제 Flipper의 모든 기능을 대체할 수 있는 도구를 마음대로 사용할 수 있게 되었으니, 안전하게 폐기할 수 있습니다!
더 많은 기능을 원한다면 Reactotron을 확인하고 개발 워크플로우에 통합하세요. 이 툴은 과소평가된 훌륭한 툴이며, 이를 발견한 15.5%의 React Native 개발자가 사랑하고 있습니다.
하지만 잠깐만요!
더 있습니다!
React Native에 새로운 디버거가 출시됩니다!
이를 React Native JS Inspector라고 하며, npx react-native start --experimental-debugger로 실행할 수 있습니다. 개발자 메뉴에서 "Open Debugger"를 선택하면 Google Chrome 또는 Microsoft Edge를 사용하여 새 디버거가 실행됩니다.
새로운 React Native JS Inspector가 아직 정식 버전으로 출시되지는 않았지만, 이미 몇 가지 유용한 툴이 포함되어 있으며 향후 새로운 기능과 개선 사항을 계속 지켜봐 주세요. 다만 아직은 React Native JS Inspector에 너무 많은 것을 기대하지 마시기 바랍니다. 코어 팀은 2024년 후반에 출시될 것으로 예상되는 개편된 백엔드 작업에 몰두하고 있으며, 몇 가지 알려진 문제가 있습니다.
마지막으로... 디버깅 툴 모음에 있는 마지막 툴도 빼놓지 마세요.
준비되셨나요?
그것은... Flipper입니다.
더 이상 공식 템플릿에 권장되거나 포함되지 않지만 Flipper는 여전히 존재하며 여전히 작동합니다!
필요한 상황이 발생하면 수동 설치 단계(Android 및 iOS)를 거쳐 바로 Flippering으로 돌아갈 수 있습니다.
