[ Nomad coders ] (의식의 흐름으로 쓰는) twitter clone 타입스크립트로 다시 만들어보기 3

 

#3.0 ~ #3.3

 

 

이번에도 진도는 볼품없다

진도를 팍팍 빼서 쓰고 싶은데 다른것들과 병행하느라 너무 바빠..

 

 

 

ts는 어느정도 익숙하게 다루고 있다

아직 모르겠다 싶으면 쓰는 any의 남발이 문제기는 하지만 그건 ts를 더 배우며 나아질것

현재 내가 할 수 있는 최선을 다해 주어진 과제를 해결하는게 목표.

 

 

 

💻

 

 

 

이용한 라이브러리

react-hook-form

 

저번주까지는 그냥 한번 타입만 넣은 클론코딩을 하려고 생각했던 것 같은데

react hook form 정도는 괜찮지 않을까..? 하고 이용했다.

react hook form에 대해서는 블로그로 다시 포스팅 할 예정

그리고 여러 자식 컴포넌트를 타고 내려오는 props가 등장하면서 recoil도 몹시 사용하고 싶지만 이건 꾹 참는중

 

 

 

 

firestore을 활용하는 과정에서 궁금증이 생겼다.

 

fireStore에서 addDoc과 setDoc의 차이점이 무엇인가?

 

 

setDoc

import { doc, setDoc } from "firebase/firestore";

// Add a new document in collection "cities"
await setDoc(doc(db, "cities", "LA"), {
  name: "Los Angeles",
  state: "CA",
  country: "USA"
});

문서에 유의미한 id를 둔다. 'new-city-id' 

 

 

addDoc

import { collection, addDoc } from "firebase/firestore";

// Add a new document with a generated id.
const docRef = await addDoc(collection(db, "cities"), {
  name: "Tokyo",
  country: "Japan"
});
console.log("Document written with ID: ", docRef.id);

문서에 유의미한 id를 두지 않는다. => 랜덤한 id가 자동 생성된다

 

실제로 .add(...)와 .doc().set(...)은 완전히 동일하므로 더 편리한 것을 사용하면 됩니다.

공식문서 내용.

 

만약에 문서에 유의미한 id를 두고 싶으면 setDoc를 이용하고

문서에 유의미한 id가 필요없다면 addDoc를 이용하면 될 것 같다.

 

 

 

 

문서 가져오기

 

공식문서 : 문서 가져오기

import { doc, getDoc } from "firebase/firestore";

const docRef = doc(db, "cities", "SF");
const docSnap = await getDoc(docRef);

if (docSnap.exists()) {
  console.log("Document data:", docSnap.data());
} else {
  // doc.data() will be undefined in this case
  console.log("No such document!");
}

공식문서에서 나온 단일 문서 내용 검색 방법이다.

 

이 공식 문서를 보고

    const docSnap = await getDoc(collection(db, "tweets"));

    if (docSnap.exists()) {
      console.log("Document data:", docSnap.data());
    } else {
      console.log("No such document!");
    }

이렇게 문서 내용을 가져오려고 했으나

여러 문서를 가져와야 하는 상황에 '단일 문서'를 가져오려 해서 실패했다.

 

오류 내용

Uncaught (in promise) FirebaseError: Expected type 'Pa', but it was: a custom Va object

 

=> getDoc가 아닌 getDocs를 사용해야 한다

 

 

공식 문서 : 컬렉션에서 여러 문서 가져오기

import { collection, query, where, getDocs } from "firebase/firestore";

const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

 

내 코드

 const querySnapshot = await getDocs(query(collection(db, "tweets")));
    querySnapshot.forEach((doc) => {
      const tweetObj = {
        text: doc.data().tweet,
        createdAt: doc.data().createdAt,
        id: doc.id,
        userId: doc.data().creatorId,
      };
      setTweets((prev) => [tweetObj, ...prev]);
    });

잘 작동한다🏃‍♀️

 

 

 

 

 

 

 

 

 

🤔

그러나 컴포넌트가 렌더링 될 때만 문서를 가져오는 것은 좋지 못하다.

내가 올린 글을 바로바로 보고 싶다.

이럴 때를 대비해서 실시간 업데이트를 위한 문서가 존재한다.

=> 공식 문서 : 실시간 업데이트 수신 대기

 

 

onSnapshot() 메서드를 이용해서 문서를 수신 대기 상태에 둔 후,

사용자의 호출에 따라 단일 문서의 현재 콘텐츠로 문서 스냅샷이 즉시 형성된다.

그 후 콘텐츠가 변경될 때마다 콜백이 호출되어 문서 스냅샷을 업데이트한다

=> 유저가 올리고 삭제하고 교체하는 등의 활동을 할 때 문서가 자동으로 가져와진다는 말.

 

 

 

 

공식 문서 : 컬렉션에서 여러 문서 수신 대기

 

import { collection, query, where, onSnapshot } from "firebase/firestore";

const q = query(collection(db, "cities"));
const unsubscribe = onSnapshot(q, (querySnapshot) => {
  const cities = [];
  querySnapshot.forEach((doc) => {
      cities.push(doc.data().name);
  });
  console.log("Current cities in CA: ", cities.join(", "));
});

이 스냅샷 핸들러는 문서의 추가, 삭제, 수정 등 쿼리 결과의 변경에 따라 새 쿼리 스냅샷을 수신한다.

 

내 코드

 useEffect(() => {
    const q = query(collection(db, "tweets"));
    onSnapshot(q, (querySnapshot) => {
      const tweetArray: any = querySnapshot.docs.map((doc) => ({
        text: doc.data().tweet,
        createdAt: doc.data().createdAt,
        id: doc.id,
        userId: doc.data().creatorId,
      }));
      setTweets(tweetArray);
    });
  }, []);

useEffect로 처음 시작할 때 실행시킨 다음에

onSnapshot을 이용해서

tweetArray를 만들고(typescript를 쓰지 않으면 : any는 지우셔도 됩니다).

map을 이용하여 setTweets라는 useState 안에 차곡차곡 넣어준다

 

 

 

이외에도 스냅샷 간의 변경사항 보기, 로컬 변경사항 보기, 

데이터를 수신 대기할 필요가 없을 때 리스너 분리하기 등등..

공식 문서를 보면 정말 많은 정보를 얻을 수 있다.

 

 

.

.

.

나는 평소에 언어 세팅을 영어로 해놓기 때문에 공식문서를 읽을 때 설렁설렁 읽는 경우가 많다

언어를 한글로 해놓고 보니 이렇게 읽기 편했구나...

번역 과정에서 생길 수 있는 작은 오류들을 피하기 위해 영어로 읽고 있었는데 더 많은 오류를 범하고 있었던 것 같기도 하다..

 

영어를 열심히 공부하든지 일단 한국어로 설정하든지 해야 할 것 같다.

일단은 영어 공부를 더 해보는 것으로!