React-Native firebase 연결

오늘은 예전부터 못했지만 성공한 나의 firebase 연결 스토리와 해결 방법에 대해 쓸려고 한다. 물론 다음 벨로그는 회원가입과 로그인에 대해 쓸 예정이다.. 예정이라고 했지만 곧 쓸 듯?

우선 나는 ios 위주로만 세팅 했기 때문에 andriod 버전을 보고싶은 분들은 다른 블로그를 참조하시길..!

🚀 Firebase install in ios

firebase 를 RN 에 적용하기 위해선 두개의 주소가 필요한데 첫번째로는
구글 파이어베이스 이다. 여기에서 프로젝트를 만들어야 본격적으로 시작할 수 있다는 말씀!

• 여기서 '+' 버튼을 눌러 프로젝트를 추가한다. 그리고 프로젝트 이름 및 추가하기 이 부분은 하라는대로 하면 되니 패스!
  • 계정은 참고로 Default Account for firebase 로 해도 되니 참고

• 프로젝트가 생성이 되면 다음과 같은 페이지를 볼 수 있는데 여기서 ios+ 를 누르고 Apple Id 번들이 필요한데 이는 xcode 에 들어가 해당 프로젝트를 연 후 프로젝트의 general 부분에 'Bundle Identifier' 에서 복붙하면 된다!

• 그리고 문제인 구성파일 다운로드와 복붙 부분이 있는데.. 이 부분은 해당 링크 에서 똑같이 하면 된다!

• 하지만 문제가 있다.. 이 부분이 내가 오랫동안 firebase 를 적용을 못했는데 바로 다음과 같은 얘기가 있었다.

  참고: React-Native-Firebase는 use_frameworksFlipper 및 Fabric과의 호환성 문제가 있는 를 사용합니다.
  플리퍼: 플리퍼와 호환 use_frameworks 되지 않습니다 . :flipper_configurationPodfile의 해당 줄을 주석 처리하여 Flipper를 비활성화해야 합니다 . Flipper는 React-Native 커뮤니티에서 더 이상 사용되지 않으며 이 문제는 수정되지 않습니다. Flipper와 React-Native-Firebase는 iOS에서 절대로 함께 작동하지 않습니다.
  새로운 아키텍처: Fabric은 use_frameworks!. 브리지/호환 모드를 활성화하면 React-native-firebase가 올바르게 컴파일되어 사용할 수 있습니다.

• 이것도 모르고 그냥 복붙만 하고 실행했더니 충돌이 일어나 계속 빌드하다가 오류가 났던 것이다.. 아마 다들 그럴 것이다 왜냐하면 RN 버전이 올라간 이후부터 안되는 거였으니까.. 그래서 이걸 어떻게 해결했느냐.. 코드 몇줄 더 추가하고 삭제했더니 올바르게 적용되는 것을 확인할 수 있었다. /ios/podfile 로 가보자!

  # 이 부분은 어디에 넣어야 되는지 알기 위해서 넣은 코드
   react_native_post_install(
        installer,
        config[:reactNativePath],
        :mac_catalyst_enabled => false
      )
      ## 이 부분부터 복사해서 넣으면 됨!
      ## for Firebase (all below)
          installer.pods_project.targets.each do |target|
            target.build_configurations.each do |config|
              config.build_settings["GCC_WARN_INHIBIT_ALL_WARNINGS"] = "YES"
            end
          end
  
          installer.pods_project.targets.each do |target|
            target.build_configurations.each do |config|
              config.build_settings["CC"] = "clang"
              config.build_settings["LD"] = "clang"
              config.build_settings["CXX"] = "clang++"
              config.build_settings["LDPLUSPLUS"] = "clang++"
            end
          end
  
          installer.aggregate_targets.each do |aggregate_target|
            aggregate_target.user_project.native_targets.each do |target|
              target.build_configurations.each do |config|
                config.build_settings['ONLY_ACTIVE_ARCH'] = 'YES'
                config.build_settings['EXCLUDED_ARCHS'] = 'i386'
              end
            end
            aggregate_target.user_project.save
          end
  
          installer.pods_project.targets.each do |target|
            if (target.name.eql?('FBReactNativeSpec'))
              target.build_phases.each do |build_phase|
                if (build_phase.respond_to?(:name) && build_phase.name.eql?('[CP-User] Generate Specs'))
                  target.build_phases.move(build_phase, 0)
                end
              end
            end
          end
  
          installer.pods_project.targets.each do |target|
            target.build_configurations.each do |config|
              config.build_settings["ENABLE_BITCODE"] = "NO"
            end
          end

  이렇게 넣으면 우선 충돌은 안생길 것이다.. (안생겼으면 90% 는 다 왔음)

🚀 Firebase npm

이제 vscode 로 가보자. ios 에 설치 했으니 이제 프로젝트에 적용을 시켜야겠지?
firebase/app 로 가서 npm install 를 한다. 사실 여러가지 옵션들.. 로그인, 회원가입, 데이터 저장 등등 여러 옵션을 적용할려면 /auth, /storage ... 여러 라이브러리들을 설치해야되는데 우선 저것만 설치해보도록 하자! 깃허브에 들어가도 되지만 아까 위에 올렸던 해당 링크로 가도 된다! 그러면 오류 없이 build 되는 시뮬레이터를 볼 수 있을 것이다..!

---

참고로 ios 에서 설치했으면 pod install, pod update 는 무조건 하는거,, 잊지 않았겠죠..? 꼭 해야 적용되니 잊지 말구, 한 다음에 재시작 해보기!

저번 프젝때 firebase 해보고 싶었는데 안되서 이틀 날려먹은 지난 나날들이 기억나지만 결국 이겨냈다.. 결국 해냈ㄷㅏ 내가... 빨리 실시간 연동 적용해서 재밌게 작업해보고싶다!