react-native firebase 초기 셋팅하기

react-native를 사용하여 개인프로젝트를 개발하는 과정에서 firebase를 설정하던중 겪었던 오류상황 및 해결 과정을 작성해보겠다.

"책 리액트 네이티브를 다루는 기술"을 읽고 적용해보려했으나, 21년도에 발행한 책인지라 최신버전의 firebase설정방법과 조금 차이가 있었다.

android 설정시 겪었던 문제

SDK 설정파일 위치 헷갈림

오류메세지

오류 메세지를 보면 build.gradle파일에서 2번째 라인에문제가 있다는것을 알 수 있다. 그리고 다다음 줄에 "com.google.gms.google-services" 찾을 수 없다는 메세지도 보인다. 하지만 이미 잘 셋팅되어있었다.

google-services.json

근데 왜 찾을 수 없다고 나올까?를 생각해보다가 https://rnfirebase.io/ 여기서 android/app/src/build.gradle 이아닌, android/app/build.gradle 경로라는걸 알게되었다.. 혹시나해서 책이 오류였나?해서 찾아봤는데 내 눈이 잘못된거였다. 

build.gradle 위치

그렇다. build.gradle파일이 두개다. dependencies만 보다가 정작 파일위치를 착각해버렸다. 위치를 변경하여 추가하니 에러메세지가 더이상 보이지 않았다.

 

ios 설정시 겪었던 문제

1. SDK설정문제

ios에서는 다음 두가지 경로에위치한 파일에 SDK설정을 추가해줘야한다.

1) ios/[프로젝트이름]/AppDelegate.mm

2) ios/podfile

공식문서를 토대로 설정해나갔으나, 다음과같은 오류메세지가 발생했다. (너무길어서 단서라고 생각했던것만 가져왔다)

 

오류 매새자중 일부1

오류 매새자중 일부2

빌드가 실패했다고 나오고.. FlipperKit이 뭐라고하는데 FlipperKit이 뭔가해서 봤더니 react-native에서 사용하는 디버깅 툴이라고 한다.

FlipperKit에대한 GPT 답변

그래서 구글에 react-native관련 FlipperKit를 찾아보다가 깃헙 이슈가 있길래 들어가봤고 따봉을 많이 받은 답변을 바로 찾아갔더니..

react-native build에러 이슈

이전에 봤던 공식문서의내용을 보여주면서 FlipperKit이 호환성 문제가 있다고하여 주석처리를 하라고한다. (처음 문서를 읽을때 확인할 수 있었던 부분이었는데..) 그래서 ios/Podfile에 위치한 :flipper_configuration부분을 주석처리를했더니 빌드는 성공하였으나, 시뮬레이터에서 실행됬다가 바로 꺼지면서 "예기치 않은 오류가 발생했습니다."라는 시스템 오류가 발생했다..(메세지를 스크린샷으로 첨부하기위해 재현을 해보려했는데 수정전으로 돌려봐도 정상동작한다..) 그래서 아예 처음부터 다시 설정해보자는 마음으로 gpt에게 물어봤다.

gpt에게 질문 내용

답변에는 초기 설정(defaultApp)을 확인하는 코드가 있었는데, 공식문서에는 확인하는 조건처리코드가 작성되어있지 않았다..

답변중 일부

이부분을 처리하고 다시 실행하니 시뮬레이터에서 정상적으로 동작하게되었다. 그렇다고 이전처럼 조건처리없이 실행했을때 다시 "예기치 않은 오류가 발생했습니다."라는 메세지가 뜨냐? 그것도아니다.. 물론 이것외에도 빌드과정에서 xcode에 저장된 캐시도 날리긴 했지만.. 정확한 원인을 파악했다고 보기엔 어렵다.

 

결론

리액트네이티브로 개발을진행하면서 언어자체가 자바스크립트가 아니여서 디버깅이 쉽지않다.

 

참고자료

react-native firebase 공식문서:  https://rnfirebase.io/

React Native Firebase | React Native Firebase

 

 

FlipperKit이슈: FlipperKit:https://github.com/facebook/react-native/issues/34748

Build on IOS failed · Issue #34748 · facebook/react-native