크로스 플랫폼/React-Native <JSX>

[React-Native] Flipper는 무엇인가?

TaeGyeong Lee 2023. 6. 24. 15:57

소개

flipper 는 페이스북(메타)팀에서 개발, 운영하는 오픈소스 디버거 입니다. iOS, Android, React-Native 등의 모바일 플랫폼 개발에 활용할 수 있습니다. 일반적으로 데스크탑 어플리케이션 형태로 제공되어 사용할 수 있습니다.

https://fbflipper.com/docs/features/react-native/

 

React-Native 에서의 Flipper

React-Native 프로젝트에서는 기본적으로 Flipper가 설치되어 있습니다. 디버그 모드에서 개발 도중 에러 발생 시 아래와 같은 에러모달을 자주 확인하셨을 텐데요, 이게 flipper의 기능입니다. 데스크탑 앱 형태가 아니라 React-Native에 내장되어 있습니다.

Flipper는 gradle 스크립트를 통해 디버그 모드에서만 의존성 목록에 포함되어 있습니다.

위 스크린샷은 metro 서버가 응답하지 않는 경우 flipper를 통해 나오는 화면입니다. 

 

간혹 flipper SDK 버전과 프로젝트의 React-Native 버전이 호환되지 않아 문제가 발생하기도 합니다. 호환 문제에 대한 github issue 글을 참고하여 React-Native 버전에 맞는 Flipper 버전을 확인해 주세요.