웹은 클라이언트가 서버에게 요청, 서버가 클라이언트에게 응답!
Firebase는 서버리스이다.
Firebase의 기능 중 Firestore를 사용
파이어베이스 패키지 설치yarn add firebase
src 폴더 하위에 firebase.js 파일을 만들기. 개인 파이어베이스에서 제공해주는 코드 복사해서 붙여넣는다.
//firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
// firebase 설정과 관련된 개인 정보
};
// firebaseConfig 정보로 firebase 시작
initializeApp(firebaseConfig);
// firebase의 firestore 인스턴스를 변수에 저장
const db = getFirestore();
// 필요한 곳에서 사용할 수 있도록 내보내기
export { db };
firebase.js에서 내보낸 firestore DB가져오기
import {db} from "./firebase";
파이어스토어의 데이터를 가지고 올 때는 collection 먼저 접근 후 doc에 접근
collection()으로 찾은 다음, getDocs()로 콜렉션 내의 데이터를 가져온다
import { db } from "./firebase";
import { collection, getDoc, getDocs } from "firebase/firestore";
...
React.useEffect(async() => {
const query = await getDocs(collection(db, 'bucket'));
console.log(query);
query.forEach((doc) => {
console.log(doc.id, doc.data()); //id와 데이터 가져옴
});
}, []);
여기서 forEach는 배열 내장함수가 아니고 getDocs의 객체 내장함수이다.(이름이 같음)
forEach는 Doc 하나 하나를 의미
async-awit을 안쓰면 Promise{<pending>}
이 나온다.
콜렉션을 찾고 → addDoc()!
import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";
...
const docRef = await addDoc(collection(db, 'bucket'), {
completed: false,
text: "new"
})
콜렉션 이름을 바꿔서 추가하면 새로운 콜렉션이 생긴다.
콜렉션을 찾고 → 도큐먼트 id로 updateDoc()!
import { db } from "./firebase";
import { collection, doc, updateDoc } from "firebase/firestore";
...
React.useEffect(async() => {
const docRef = doc(db, "bucket", "P5Oz4GbccEg9uaca8sJG");
await updateDoc(docRef, {
completed: true,
});
}, []);
콜렉션을 찾고 → 도큐먼트 id로 deleteDoc()!
import { db } from "./firebase";
import { collection, doc, deleteDoc } from "firebase/firestore";
...
React.useEffect(async() => {
const docRef = doc(db, "bucket", "P5Oz4GbccEg9uaca8sJG");
await deleteDoc(docRef);
}, []);