Firebase (2)

- Database Setup

· Cloud Firestore

· 테스트 모드로 시작하기

· fbase.js에서 import "firebase/database"; 추가

· Cloud Firestore의 database는 NoSQL database

· 많은 것들을 프로그램하지 않아도 되고, 유연함을 가지고 있지만 몇 가지 제한 사항이 있음

(1) Collection과 Document가 있음

Collection은 기본적으로 폴더와 같음

Document는 컴퓨터에 있는 문서 같은 것 (doc 문서 같은 텍스트)

하나의 database는 collection들을 가지고 있고 각 collection은 documents들을 가지고 있음

(2) 

 

firebase.google.com/docs/reference/js/firebase.firestore

firestore | JavaScript SDK  |  Firebase

- Read

const [nweets, setNeweets] = useState([]);

    const getNeweets = async() => {

        //get은 QuarySnapshot을 return

        const dbNweets = await dbService.collection("nweets").get();

        //내 state에 있는 각각의 document.data()를 console.log

        dbNweets.forEach((document) => //console.log(document.data())); 

        { const nweetObject = {

            ...document.data(),

            id: document.id,

        };

            //모든 이전 nweets에 대해 배열을 리턴, 그 배열은 새로 작성한 트윗과 그 이전 것들

            //값 대신에 함수를 전달할 수 있음, 함수를 전달하면 리액트는 이전 값에 접근할 수 있게 해줌

            setNeweets(prev => [nweetObject, ...prev]);

        });

    };

    useEffect(() => {

        getNeweets();

    }, [])

 

//화면에 출력하는 부분

<div>

       {nweets.map((nweet) => (

           <div key={nweet.id}>

           <h4>{nweet.nweet}</h4>

           </div>

       ))}

</div>

 

- Realtime Nweets

· query를 이용하는 게 아니라 snapshot을 사용했기 때문에 실시간으로 볼 수 있음

useEffect(() => {

        //getNeweets();

        //위 방식과 이것 중 하나 선택해서 쓰면 됨

        //이 방식은 더 적게 re-render 하기 때문에 더 빠르게 실행되도록 만들어줌

            dbService.collection("nweets").onSnapshot(snapshot => {

            const nweetArray = snapshot.docs.map(doc => ({

                id:doc.id,

            ...doc.data(),

        }));

        setNeweets(nweetArray);

        });

}, []);

 

- Editing

const [editing, setEditing] = useState(false); //editing mode인지 아닌지를 알려줌

const [newNweet, SetNewNweet] = useState(nweetObj.text); //input에 입력된 text를 업데이트 해줌

 

const onDeleteClick = async () => {

        const ok = window.confirm("Are you sure you want to delete this nweet?");

        console.log(ok);

        if(ok){

            //delete

            await dbService.doc(`nweets/${nweetObj.id}`).delete();

        }

    };

    const toggleEditing =  () => setEditing(prev => !prev);

    const onSubmit = async (event) => {

        event.preventDefault();

        //console.log(nweetObj, newNweet);

        await dbService.doc(`nweets/${nweetObj.id}`).update({

            text: newNweet,

        });

        setEditing(false);

    };

    const onChange = (event) => {

        const {

            target: {value},

        } = event;

        SetNewNweet(value);

    };

 

- fileReader API

//파일을 만들고 문자열로 반환할 수 있음 

developer.mozilla.org/ko/docs/Web/API/FileReader

FileReader - Web API | MDN

const onFileChange = (event) => {

        const {

            target: { files },

        } = event;

        const theFile = files[0];

        const reader = new FileReader();

        reader.onloadend = (finishedEvent) => {

            const {

                currentTarget: { result },

            } =finishedEvent;

            setAttachment(result);

        };

        reader.readAsDataURL(theFile);

    };

 

const onClearAttachment = () => setAttachment(null);

 

- Uploading

· firebase.storage.Reference

: 구글 클라우드 스토리지 오브젝트에 대한 참조를 나타냄(bucket)

개발자들은 오브젝트를 업로드, 다운로드 그리고 삭제할 수 있음

우리가 원하는 것은 Reference의 child를 만드는 것

 

· npm install uuid: uuid는 기본적으로 어떤 특별한 식별자를 랜덤으로 생성해줌

· import { v4 as uuidv4 } from "uuid"; 

 

· 먼저 파일에 대한 reference를 만들고, 그런 다음 파일을 몇몇 내용과 함께 업데이트 

put: 데이터를 이 reference의 위치에 업로드 함

URL에 있는 string을 알고 있으므로 putString을 사용

 

firebase.google.com/docs/reference/js/firebase.storage.Reference#getdownloadurl

Reference | JavaScript SDK  |  Firebase

- Deleting

        if(attachment != "") {

            const attachmentRef = storageService.ref().child(`${userObj.uid}/${uuidv4()}`);

            const response = await attachmentRef.putString(attachment, "data_url");

            attachmentUrl = await response.ref.getDownloadURL();

        }

        const nweetObj = {

            text:nweet,

            createAt: Date.now(),

            creatorId: userObj.uid,

            attachmentUrl,

        };

        await dbService.collection("nweets").add(nweetObj);

        setNeweet("");

        setAttachment("");

 

- Deleting Files (Storage에서 삭제)

firebase.google.com/docs/reference/js/firebase.storage.Storage#reffromurl

Storage | JavaScript SDK  |  Firebase

· 항상 reference의 요소들이 필요

document를 수정하거나 삭제할 때도 reference가 필요하고 collection 안에 무언가를 만들고 싶다면 reference가 필요

컨텐츠랑 같이 업데이트 할 수 있는 어떤 파일을 만들기 위해선 항상 reference가 필요

· refFromURL: 이 사진의 URL을 firebase로 보낼 수 있고 그리고 firebase가 우리 storage 안에서 reference

· await storageService.refFromURL(nweetObj.attachmentUrl).delete();