React Native 0.62에서 Flipper 디버깅 도구 적용하기

배경

재택근무를 시작하면서 모바일 앱 디버깅 환경을 개선할 필요가 있었다. React Native 0.62부터 Facebook에서 만든 Flipper가 기본 디버깅 도구로 포함되었다는 소식을 듣고 도입을 결정했다.

Flipper 설정

iOS는 별도 설정 없이 바로 동작했지만, Android는 약간의 수정이 필요했다.

// android/app/build.gradle
dependencies {
    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.fbjni'
    }
    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}")
}

// MainApplication.java
import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;

public class MainApplication extends Application implements ReactApplication {
    private static final NetworkFlipperPlugin networkFlipperPlugin = 
        new NetworkFlipperPlugin();
}

실제 사용 경험

네트워크 요청을 실시간으로 확인할 수 있는 점이 가장 유용했다. Redux 상태 관리는 redux-flipper 플러그인을 추가로 설치했다.

npm install redux-flipper --save-dev

기존 React Native Debugger에서 가끔 발생하던 연결 끊김 문제도 사라졌고, 레이아웃 인스펙터로 View 계층 구조를 확인하는 것도 편했다.

주의사항

Flipper는 Debug 빌드에서만 동작한다. Release 빌드에서는 자동으로 제외되지만, ProGuard 설정을 확인해두는 게 좋다.

전체적으로 개발 생산성이 체감상 20% 정도 향상된 것 같다. 특히 API 응답을 확인하는 시간이 크게 줄었다.