Builder.shin

React Native 0.62 업그레이드 중 Flipper 설정 문제 해결

문제 상황

프로젝트를 React Native 0.62로 업그레이드하면서 iOS 빌드가 실패했다. 0.62부터 기본으로 포함된 Flipper 디버깅 도구 때문이었다.

Undefined symbols for architecture x86_64:
  "_OBJC_CLASS_$_FlipperClient", referenced from:

재택근무 시작 첫 주라 팀원들과 화면 공유로 디버깅하느라 시간이 더 걸렸다.

원인 분석

Flipper는 Facebook이 만든 모바일 앱 디버깅 플랫폼인데, CocoaPods를 통해 설치되면서 여러 의존성을 추가한다. 문제는 기존 Podfile 설정이 새로운 구조와 맞지 않았던 것.

특히 use_flipper! 설정이 CocoaPods 1.9.0 이상을 요구하는데, 로컬 환경이 1.8.4였다.

해결 과정

  1. CocoaPods 업데이트
sudo gem install cocoapods
pod --version # 1.9.1 확인
  1. Podfile 수정
platform :ios, '11.0'

use_flipper!({ 'Flipper' => '0.33.1' })

post_install do |installer|
  flipper_post_install(installer)
end
  1. 기존 pod 제거 후 재설치
cd ios
rm -rf Pods Podfile.lock
pod install
  1. Xcode에서 Clean Build Folder (Cmd+Shift+K)

Flipper 비활성화 옵션

당장 Flipper가 필요 없다면 비활성화도 가능하다.

# Podfile
use_flipper!({ 'Flipper' => '0.33.1' }) # 이 줄 주석 처리

프로덕션 빌드에서는 자동으로 비활성화되므로 개발 환경에서만 영향을 받는다.

결과

Flipper를 사용해보니 Redux 상태, 네트워크 요청, 레이아웃 검사가 한 화면에서 가능해서 편했다. Chrome DevTools보다 React Native에 최적화되어 있다는 느낌.

다만 초기 설정 복잡도가 있어서 팀 온보딩 문서에 추가했다.