Firebase 이란 ? Firebase 사용 방법 - 데이터 저장 ,삭제,수정

시작하기 

1. 데이터 베이스 만들기

로그인 후에 왼쪽 창에서 Firestore Database를 누르고 데이터베이스 만들기를 누릅니다

 

실제 프로덕션이 아니라면 테스트 모드를 권장합니다

자신의 위치와 가까운 곳을 선택하면 됩니다.

이 화면이 당신의 데이터베이스 입니다.

 

2.데이터 추가하기

 

addDoc 와  collection , getFirestore 을 사용하여 데이터를 추가할 수 있습니다.

//firebase.ts
export const dbService = getFirestore();

//Home.tsx
const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const docRef = await addDoc(collection(dbService, 'messages'), {
      message,
      createdAt: Date.now(),
    });
    console.log('Document written with ID: ', docRef.id);
  };

 

https://firebase.google.com/docs/firestore/manage-data/add-data?authuser=0 

Cloud Firestore에 데이터 추가  |  Firebase Documentation

 

데이터가 추가된 모습

3. 데이터 실시간으로 불러오기 

 

페이지에서 데이터가 생길 때 실시간으로 반영되는 기능입니다.

 

https://firebase.google.com/docs/firestore/query-data/listen?authuser=0 

Cloud Firestore로 실시간 업데이트 가져오기  |  Firebase Documentation

 

import {
  addDoc,
  collection,
  onSnapshot,
  orderBy,
  query,
} from 'firebase/firestore';
import { dbService } from '../firebase';

useEffect(() => {
    const q = query(
      collection(dbService, 'messages'),
      orderBy('createdAt', 'desc')
    );
    onSnapshot(q, async (snapshot) => {
      const messageArr = snapshot.docs.map((item: any) => {
        return {
          id: item.id,
          ...item.data(),
        };
      });
      //   console.log(messageArr);
      setMessageList(messageArr);
    });
  }, []);

 

4. 데이터 삭제하기

deleteDoc(doc(getFirestore() ," 삭제할 콜렉션 ", "삭제할 콜렉션의 글 id")

 

가운데 +문서추가 에 있는것이 글 id 입니다

 

import { dbService } from '../firebase';
import { deleteDoc, doc } from 'firebase/firestore';

export default function Message({ id, text, isOwner }: IMessageListProps) {
  const [isEdit, setIsEdit] = useState(false);
  const [editMessage, setEditMessage] = useState(text);
  const onDeleteClick = async () => {
    const ok = window.confirm('정말 삭제하시겠습니까?');
    if (ok) {
      await deleteDoc(doc(dbService, 'messages', `${id}`));
    }
  };

 

 

https://firebase.google.com/docs/firestore/manage-data/delete-data?authuser=0 

Cloud Firestore에서 데이터 삭제  |  Firebase Documentation

 

 

5. 데이터 수정하기

 

updateDoc(doc(getFirestore(), "수정할 콜렉션","수정할 글 id") , { 

수정하고자 하는 것

}

이렇게 사용하시면 됩니다

import { deleteDoc, doc, updateDoc } from 'firebase/firestore';
import { dbService } from '../firebase';

const messageRef = doc(dbService, 'messages', `${id}`);


const onEditSubmit = async (e: any) => {
    e.preventDefault();
    await await updateDoc(messageRef, {
      text: editMessage,
    });
    setIsEdit(false);
  };

https://firebase.google.com/docs/firestore/manage-data/add-data?authuser=0 

Cloud Firestore에 데이터 추가  |  Firebase Documentation

 

6. 데이터 필터링 하는 방법 

 

where 을 이용하면 간단히 필터링 할 수 있습니다.

 

https://firebase.google.com/docs/firestore/query-data/order-limit-data

Cloud Firestore로 데이터 정렬 및 제한  |  Firebase Documentation

 

  import {
  collection,
  getDocs,
  orderBy,
  Query,
  query,
  where,
} from 'firebase/firestore';
import { authService, dbService } from '../firebase';

  
  const getMyMessages = async () => {
    const q = query(
      collection(dbService, 'messages'),
      where('creatorId', '==', `${userObj.uid}`),
      orderBy('createdAt', 'desc')
    );
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((item) => {
      console.log(item.id, '=>', item.data());
    });
  };

  useEffect(() => {
    getMyMessages();
  }, []);

 

 

orderBy 를 썻을때 index query 가 꼭 필요하다고 설정하라는 문구가 나옵니다.

 

 

들어가셔서 색인만들기를 누르면 생성을 시작합니다