[Firebase] nwitter 트위터 클론코딩

https://nomadcoders.co/nwitter/lectures/1922

All Courses – 노마드 코더 Nomad Coders

 

Collection - 폴더

Document - 문서, 파일

 

Snapshot은 데이터베이스의 변화를 실시간으로 알려줌. 

 

 

데이터를 가져오는 방법

fbase.js

import "firebase/compat/firestore";
export const dbService = firebase.firestore();

Home.js

 useEffect(() => {
        
        dbService.collection("nweets").onSnapshot(snapshot => {
            const nweetArray =  snapshot.docs.map(doc => ({
                id:doc.id,
                ...doc.data(),
            }));
            setNweets(nweetArray)
        })
    
    }, [])

"nweets" 는 collection 이름, 해당 collection의 snapshot을 통해 firestore의 데이터를 가져오는 방법.

 

 

옛날 방식

  const dbnweets = await dbService.collection("nweets").get();
        dbnweets.forEach((document) => {

            const nweetObject = {
                ...document.data(),
                id: document.id,
            }

            setNweets((prev) => [nweetObject, ...prev])
    })

 

 

 

 

 

 

 

 

 

 데이터를 필터링해서 가져오는 방법  

const nweets = await dbService.collection("nweets").where("creatorId", "==", userObj.uid).get();​

 

1) 오름차순(Default)

   const nweets = await dbService
        .collection("nweets")
        .where("creatorId", "==", userObj.uid)
        .orderBy("createdAt") // 정렬 추가(기본 오름차순)
        .get();

기본(오름차순)

2) 내림차순

const nweets = await dbService
        .collection("nweets")
        .where("creatorId", "==", userObj.uid)
        .orderBy("createdAt", "desc") // 내림차순
        .get();

 에러 메시지

 정렬 시, 아래 오류가 뜬다. firebase는 noSQL 이기 때문에 index가 필요. 해당 사이트 들어가서 index를 만들어주면 문제 없이 실행 가능하다.

 

 

 

 

const Nweet = ({ nweetObj, isOwner }) => {
    <div>
        <h4>{nweetObj.text}</h4>
        {isOwner && (
        <>
        <button>Delete Nweet</button>
        <button>Edit Nweet</button>
        </>
        )}
    </div>
};

 

=> 해당 코드가 실행안되는 이유?

 { } 를 ( ) 로 수정해야함.

const Nweet = ({ nweetObj, isOwner }) => (
    <div>
        <h4>{nweetObj.text}</h4>
        {isOwner && (
        <>
        <button>Delete Nweet</button>
        <button>Edit Nweet</button>
        </>
        )}
    </div>
);

또는

const Nweet = ({ nweetObj, isOwner }) => {

    return(
        <div>
            <h4>{nweetObj.text}</h4>
            {isOwner && (
            <>
            <button>Delete Nweet</button>
            <button>Edit Nweet</button>
            </>
            )}
        </div>
    )
};

 

 

 

reference 는 구글 클라우드 스토리지 오브젝트에 대한 참조. (=bucket)

 

 

 

**React.js는 너무 큰 Object의 경우 변화의 결정장애가 올 수 있음. 실시간 렌더링 불가.

작은 단위로 쪼개면 실시간 렌더링ok

 

 

deploy는 강의 참고할 것. firebase의

Authentication - sign-in method 

에서 도메인 ex) jungly5935.github.io 를 추가해야함