[리액트네이티브] react-native firebase 연동 파이어베이스 연동

종합프로젝트에서

​

엑스포를 사용하고

​

firebase와 react native 연동하는 부분이 있었다

​

적어놔야 할 거 같아서 입력

​

​

일단 파이어베이스와 연동하려면

​

install 해야하는 부분이 있다

npm install --save @react-native-firebase/app
npm install @react-native-firebase/database
npm install @react-native-firebase/firestore

이렇게 3가지를 install해야한다

​

yarn을 사용하면

yarn add @react-native-firebase/app
yarn add @react-native-firebase/database
yarn add @react-native-firebase/firestore

 

그리고 파이어베이스에 프로젝트를 생성하고

​

생성한 프로젝트에 firestore을 만든다

​

프로젝트 생성 방법은 아래 링크에서 받으면 됩

https://mrw0119.tistory.com/150

[Firebase] 프로젝트 생성하기

모두 생성하면

​

나는 firestore을 사용 할 것이기 때문에

​

firestore 프로젝트를 생성하였다

​

파이어베이스에 </>이 모양이 있는 걸로 생성해줘야함!

​

Using Firebase - Expo Documentation

Use Firebase

참고 링크임

npx expo install firebase

 

이렇게 install 해준 뒤

​

파이어스토어 데이터 베이스를 생성해준다

​

한국 말고 미국으로 설정

(이유는 잘 모르겠움,,)

​

​

데이터베이스를 생성한 뒤

false값을 true로 변경해준 뒤

​

저장한다

​

​

​

이렇게 되면 데이터베이스는 모두 생성이 된것이다

​

​

그리고 react native와 firebase가 연동이 되어야 하는데

​

react native

firebaseConfig.js라는 파일을 하나 만들어준다

​

해당 링크를 보면

import { initializeApp } from 'firebase/app';

// Optionally import the services that you want to use
// import {...} from "firebase/auth";
// import {...} from "firebase/database";
// import {...} from "firebase/firestore";
// import {...} from "firebase/functions";
// import {...} from "firebase/storage";

// Initialize Firebase
const firebaseConfig = {
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
};

const app = initializeApp(firebaseConfig);
// For more information on how to access Firebase in your project,
// see the Firebase documentation: https://firebase.google.com/docs/web/setup#access-firebase

 

이렇게 작성하라고 나와있을 것이다!!

​

이게 처음에 파이어 베이스와 연동하는데 필요한 설정값들이다

​

const firebaseConfig는

​

프로젝트 관리에 들어가면 알 수 있다

​

프로젝트 설정에 들어간다

​

이렇게 값이 나올 거고

​

​

맨 하단의

이부분이 있는데

​

npm으로 설정하고

여기를 확인하면 된다

​

​

copy한 뒤에

​

firebaseConfig.js 파일에 붙여넣기

​

이렇게 되면 1차적으로 연동은 끝난것이다

​

​

하지만 여기에서 DataBase와 연동이 되어야 한다

​

import initializeFirestore를 해준뒤

db 변수를 선언하고

export를 해두면 됨

 

import { initializeApp } from 'firebase/app';
import { initializeFirestore } from 'firebase/firestore';

// Optionally import the services that you want to use
// import {...} from "firebase/auth";
// import {...} from "firebase/database";
// import {...} from "firebase/firestore";
// import {...} from "firebase/functions";
// import {...} from "firebase/storage";

// Initialize Firebase
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

const app = initializeApp(firebaseConfig);
// For more information on how to access Firebase in your project,
// see the Firebase documentation: https://firebase.google.com/docs/web/setup#access-firebase

const db = initializeFirestore(app, {
  experimentalForceLongPolling: true,
});

export { db }

​

​

​

이렇게 하면 연동이 완료 됨!!

​

​

빠진 내용이 있을 수 있으니까ㅏ

구글링 꼭 해보는게 좋을 것 같습니당

​

다음에는

데이터 읽기 하겠움

​