React-native 에서 firebase 적용하기

생각보다 옛날 버전의 react-native 에서 
firebase 를 적용하는 방법이 많아
직접 해보고 정리해 보았습니다.

 

https://rnfirebase.io/#3-ios-setup

React Native Firebase | React Native Firebase

 

해당 공식문서를 보면 충분히 firebase 를 적용하실 수 있습니다.

하지만 귀찮으신 분들은 제 블로그를 찬찬히 읽어보시면 더 쉽게 적용할 수 있을것 같습니다 😋😋😋

 

 

일단 기본적으로 react-native 를 설치해 주어야 합니다.

npx create-react-native-app chan-app --use-npm

 

chan-app 이라는 이름은 폴더명이기 때문에 바꾸어 주셔도 됩니다.

 

설치가 끝나고 나면 npm install --save @react-native-firebase/app  으로 설치를 진행해 주셔야 합니다.

 

그 다음으로 firebase 에 프로젝트를 하나 만들어 줍니다.

 

저는 chan-coin 이라는 프로젝트 이름으로 시작해 보겠습니다.

여기서 저는 react-native 를 개발할 때 ios 를 중점으로 개발하기 때문에 그림에서 보이는 iOS+ 를 눌러 진행했습니다.

 

iOS+ 를 누르면 저렇게 사진처럼 나옵니다. 

여기서 Apple 번들 ID 는 밑에 첨부한 사진처럼 진행 하시면 최종적으로 나오는 Bundle Identifier 를 참고해서

Apple 번들 ID 에 넣으시면 됩니다. 다른 부분은 선택사항이기 때문에 앱 등록으로 넘어 가셔도 됩니다.

 

 

여기까지 하면 다음 구성 파일 다운로드 Part 로 넘어가실 수 있습니다.

 

해당 파일을 다운로드 한 뒤 다운로드한 파일을 ios/ 경로에 넣어주시면 됩니다.

아까 Bundle Identifier 를 참고하기 위해 열어둔 곳에서 폴더명에 우클릭을 하면 addFiles to "chancoin" 이 나오실 것입니다.

해당 addFiles to "chancoin" 을 누르시면 됩니다.

( chancoin 은 react-native-app 을 만들 때 저의 프로젝트 폴더 명입니다. 여러분은 다르실 수 있습니다.)

 

그리고 아까 다운로드 받은 GoogleService-Info.plist 를 넣어주시면 됩니다.

옵션은 저렇게 똑같이 하시면 됩니다. 저렇게 설정을 하시고 Add 를 누르시면 됩니다.

그럼 vscode 를 확인하면 저렇게 해당 파일이 잘 들어간 것을 확인할 수 있습니다.

 

그 다음으로 해야 할 작업은 복사 ~ 붙여넣기 입니다.

ios 폴더 안에 내가 만든 프로젝트 이름인 폴더로 들어가면 AppDelegate.mm 이라는 파일이 나옵니다. 해당 파일을 클릭 한 뒤에

 

밑에 빨간줄을 그대로 넣어주시면 됩니다.

 

그 다음으로는 ios 안에 있는 Podfile 에 특정 코드를 넣어주어야 합니다.

 

최종적으로 이렇게 까지 하고 터미널에 npx pod-install 을 하시면 자동적으로 firebase 를 설치하게 됩니다.

 

이 부분은 빠르게 그냥 다음다음으로 넘어가시면 됩니다.