종합프로젝트에서
엑스포를 사용하고
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] 프로젝트 생성하기
1. Firebase 웹사이트에 접속한다. firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 2. 시작하기 ->
mrw0119.tistory.com
모두 생성하면
나는 firestore을 사용 할 것이기 때문에
firestore 프로젝트를 생성하였다
파이어베이스에 </>이 모양이 있는 걸로 생성해줘야함!
![](https://blog.kakaocdn.net/dn/bbTMlu/btslugOVDx2/YLa3Wmb2xwY3c5p7MPup4K/img.png)
Using Firebase - Expo Documentation
Use Firebase
A guide on getting started and using Firebase JS SDK and React Native Firebase library.
docs.expo.dev
참고 링크임
npx expo install firebase
이렇게 install 해준 뒤
파이어스토어 데이터 베이스를 생성해준다
![](https://blog.kakaocdn.net/dn/VINVB/btslti7JnwE/UaFHrc1iF2BSTMEM9yoBy1/img.png)
![](https://blog.kakaocdn.net/dn/dwzMVR/btsljit0ddk/NmfqpvbTTeD6O6tnG9G420/img.png)
한국 말고 미국으로 설정
(이유는 잘 모르겠움,,)
데이터베이스를 생성한 뒤
![](https://blog.kakaocdn.net/dn/nzSyY/btslvw4U1gM/IMWK2B2RYd5pv8HwATEkb0/img.png)
false값을 true로 변경해준 뒤
저장한다
이렇게 되면 데이터베이스는 모두 생성이 된것이다
그리고 react native와 firebase가 연동이 되어야 하는데
react native
![](https://blog.kakaocdn.net/dn/6NUkQ/btslvKBYrE2/jLtykyURzZLxxFHRWY87BK/img.png)
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는
프로젝트 관리에 들어가면 알 수 있다
![](https://blog.kakaocdn.net/dn/cF21Ze/btsls60mVuZ/ukBgkhcypijOO3QeGSknw0/img.png)
프로젝트 설정에 들어간다
![](https://blog.kakaocdn.net/dn/to81M/btslndyYePK/A5L9ZB0pXhhBbqKkweXay1/img.png)
이렇게 값이 나올 거고
맨 하단의
![](https://blog.kakaocdn.net/dn/tVQpO/btsljhaKpg3/Lad0g5uZ3bksNUyq6qMeOK/img.png)
이부분이 있는데
npm으로 설정하고
여기를 확인하면 된다
![](https://blog.kakaocdn.net/dn/eNiM0R/btslpWqcL4i/ZmLyF7rlWzCbhgUBOqFMbK/img.png)
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 }
![](https://blog.kakaocdn.net/dn/Ct3ws/btslvz8sQ6Q/fi5oJ9EFultktoZWwg7pD0/img.png)
이렇게 하면 연동이 완료 됨!!
빠진 내용이 있을 수 있으니까ㅏ
구글링 꼭 해보는게 좋을 것 같습니당
다음에는
데이터 읽기 하겠움
'프론트 > React Native, React' 카테고리의 다른 글
[리액트 네이티브] React-Native GPS로 사용자의 위치 가져와서 이동한 거리 선긋기 (Expo) (0) | 2023.07.07 |
---|---|
[리액트네이티브] react-native 날씨 가져오기(Expo) (0) | 2023.06.27 |
[리액트네이티브] react-native firebase firestore 데이터 읽기 (0) | 2023.06.26 |
[리액트네이티브] react-native header 헤더 꾸미기 (0) | 2023.06.26 |
[리액트네이티브] react-native Dimension 화면 비율 맞추기 (0) | 2023.06.26 |