HwangSee

221107 TIL | 트위터 클론코딩_(2)

  • 2022년 11월 07일

오늘 한 일

  • 노마드코더 트위터 클론코딩 실습
    • Firestore Database 생성
    • 트윗 생성, 수정, 삭제 기능 구현
    • RealTime 연동을 위해 트윗을 onSnapshot()으로 가져오도록 변경

FireStore 데이터베이스 생성하기

Untitled

Untitled2

Untitled3

/fbase.js

  • 사용하고자 하는 기능은 import 해야 쓸 수 있다.
import "firebase/database";

Cloud Firestore의 database는 NoSQL 데이터베이스이다.

NoSQL의 특징

  • Collection
  • Document

Collection은 Document의 그룹이다.

유튜브라는 기능을 만든다면 비디오 콜렉션, 댓글 콜렉션 등을 가질 수 있을 것이다.

콜렉션에 원하는만큼 필드를 만들고 타입을 지정할 수 있다.

웹사이트에서도 콜렉션을 만들 수 있지만 코드 상에서도 만들 수 있으니, 만들어보자.

❗ firebase에서 사용하고자 하는 기능은 import를 해야 사용할 수 있다.

import "firebase/firestore";

CollectionReference 문서

const onSubmit = (event) => {
    event.preventDefault();
    dbService.collection("hweets").add({
      // 어떤 데이터든 입력 가능하다.
      hweet,
      createAt: Date.now(),
    });
    setHweet("");
  };

여기까지 했는데, onSubmit해도 트윗 생성이 안 됨.

1️⃣ Database location을 asia-northeast3로 생성하지 않으면 await 실행이 되지 않는 이슈가 있다. **클라우드 위치 참고 : https://firebase.google.com/docs/firestore/locations?hl=ko#location-r

→ 같은 아시아인데 실행이 안 될 수가 있나…? 싶었는데 프로젝트 삭제하고 다시 시도해보니 안 된다..

2️⃣  form 태그에 onSubmit 이벤트를 달았어야 했는데 input 태그에 이벤트를 달아서 실행이 안 됐었다.. 🥲

CollectionReference.onsnapshot

useEffect(() => {
    getHweets();
    dbService.collection("hweets").onSnapshot((snapshot) => {
      console.log("뭔가 일어나는 중..");
    });
  }, []);
  • 리얼타임 연동을 위해 collection("hweets").get(); 으로 가져오는 소스 코드를 지우고 collection("hweets").onSnapshot 으로 가져오도록 수정한다.
useEffect(() => {
    dbService.collection("hweets").onSnapshot((snapshot) => {
      const nweetArray = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setHweets(nweetArray);
    });
  }, []);
검색