스파르타 코딩클럽 - 리액트 4주차(9)
1. 리액트에 Firebase 연동하기.
1-1. 파이어베이스 패키지 설치하기.
yarn add firebase
1-2. config 가져오기.
- (1). src폴더 하위에 firebase.js 파일을 만든다.
//firebase.js
import firebase from "firebase/app";
import "firebase/firestore";
const firebaseConfig = {
// firebase 설정과 관련된 개인 정보
};
firebase.initializeApp(firebaseConfig);
// firebaseConfig 정보로 firebase 시작
const firestore = firebase.firestore();
// firebase의 firestore 인스턴스를 변수에 저장
export { firestore };
// 필요한 곳에서 사용할 수 있도록 내보내기
-
(2). firebase 대시보드에서 웹 버튼을 눌러준다.
-
(3). 앱 이름을 적고, 잠시 기다리면 sdk 추가영역에 텍스트가 뜬다.
firebaseConfig 내용만 위의 firebase.js에 붙여넣어준다.
-
(4). App.js에서 firebase.js에서 내보낸 firestore가져오기.
import { firestore } from "./firebase";
- (5). componentDidMount에서 데이터 불러와보기.
const bucket = firestore.collection("buckets");
// 하나만 확인하기
bucket
.doc("bucket_item")
.get()
.then((doc) => {
// .exists를 써서 데이터가 있는 지 없는 지 확인!
if(doc.exists){
// 데이터를 콘솔에 찍어보자!
console.log(doc.data());
}
});
//전체 확인하기
bucket
.get()
.then((docs) => {
let bucket_data = [];
docs.forEach((doc) => {
// 도큐먼트 객체를 확인해보자!
console.log(doc);
// 도큐먼트 데이터 가져오기
console.log(doc.data());
// 도큐먼트 id 가져오기
console.log(doc.id);
if (doc.exists) {
bucket_data = [...bucket_data, { id: doc.id, ...doc.data() }];
}
});
console.log(bucket_data);
Author And Source
이 문제에 관하여(스파르타 코딩클럽 - 리액트 4주차(9)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tmdals3785/스파르타-코딩클럽-리액트-4주차9저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)