TIL 210927

오늘 한 일

리액트 학습

Firebase

• 클라우드 데이터 베이스를 제공하는 서비스

• firebase 패키지를 사용하여 react 연결

• 데이터 가져오기, 추가, 삭제 가능

import {db} from './firebase';
// 데이터 가지고 올 때 필요
import { collection, doc, getDoc, getDocs, addDoc, updateDoc, deleteDoc } from 'firebase/firestore'

// firebase data 가져오기
// 접근순서 : collection - docs
// async - 비동기 처리(await와 같이 씀)

  React.useEffect(async() => {
  console.log(db);

// collection 정보에 있는 모든 doc 가져오기
// await - 작업이 끝나고 결과를 가져올 때까지 기다림
   const query = await getDocs(collection(db, 'bucket'));
   console.log(query);
    
// 객체안에 포함되어 있는 내장함수 forEach사용 (Array x)
   query.forEach((doc) =>{
     console.log(doc.id, doc.data())
   })

// doc 추가
   addDoc(collection(db,'bucket'), {text: 'new', completed:false})

// doc 수정
   // 수정할 doc 정보
   const docRef = doc(db, 'bucket','RP7iwnFSrKtI4GKRDg0h' );
   // 어떤 정보로 수정할 것인지
   updateDoc(docRef, {completed:true});

// 삭제하기
   const docRef = doc(db, 'bucket','RP7iwnFSrKtI4GKRDg0h' );
   deleteDoc(docRef);


// 새로운 컬렉션 추가
   addDoc(collection(db, 'buckets'), {text:'new', completed: false});
   
  }, []);

느낀 점

에러랑 싸우다가 끝난 하루. 차라리 기능을 구현하는 곳에서 에러가 나는 거면 그건 에러메세지 따라 가서 수정하면 될 일. 근데 에러가 결국 오타 때문이다? 아 진짜로 내 손가락을 원망하고 싶다. 내 두 눈으로 부족해서 동료까지 합세해서 뭐가 잘못되었나 찾는데 아 진짜로 미칠 노릇이다. 손가락아 처음부터 잘하자.

내일 할 일

• 리액트 학습
• 프로젝트 수정 및 배포