frontendReactNative

React native firebase 적용하기

firebase, frontend, native, react, react native, typescript, 리액트 네이티브
Views: 155

업데이트

2023.01.10 업데이트

시작하기

firebase는 손쉬운 방법으로 데이터 관리를 할수 있는 서비스 입니다. 서버의 인프라를 고민할 필요가 없습니다. 그리고 백엔드를 작업해야할 시간이 단축되는 장점이 있습니다.

설치

설치를 먼저 해줍니다.

1
npm install --save @react-native-firebase/app

ios

메인페이지 프로젝트 등록
메인 페이지에 로그인을 한 후 프로젝트 등록합니다.

xcode 번들 Id
xcode에서 Bundle Identifier를 복사 붙여넣기 합니다.

구성파일 넣을때 설정
구성파일을 넣을때 Copy items if needed를 체크 해줍니다.

ios내부의 podfile을 열어 pod ~~이렇게 되어있는 부분쪽에 다음과 같은 값을 넣어줍니다.

podfile

podfile에서 코드 추가후 에러가 나올때에는 다음과 같이 use_native_modules 밑에 코드를 입력해줍니다.

1
2
3
4
5
6
7
8
9
# ...
  config = use_native_modules!

  pod 'Firebase', :modular_headers => true
  pod 'FirebaseCore', :modular_headers => true
  pod 'GoogleUtilities', :modular_headers => true 
  $RNFirebaseAsStaticFramework = true

# ...

코드 추가
설정 완료

android

안드로이드 추가 버튼을 클릭합니다.

안드로이드 Id
앱등록
bundle.grade파일에서 applicationId를 찾아 입력합니다.

구성파일 다운로드
구성파일 옮기기
구성파일을 다운받아 android 상단에 넣어 줍니다.

firebase sdk추가
이미지를 참고해서 해당 코드를 입력합니다.

코드 수정파일 경로

동기화
마지막으로 IDE의 표시줄에 있는 ‘지금 동기화’를 누르면 완료가 됩니다.

완료

React-native에서 적용방법 사이트

적용방법 사이트에서 초기 설정을 자세한 방법으로 알 수 있습니다.

Share