# Firestore & CRUD

📌 Cloud Firestore

firestore 기능을 활용하면 간편하게 database를 만들 수 있다.

만드는 방법

데이터베이스 만들기 -> test mode 선택 -> cloud firestore 위치 설정(north korea)

NoSQL database의 특징

• Collection : 폴더와 같은 역할을 함

• Document : 문서와 같은 역할을 함

• 새로운 collection과 document들을 추가할 수 있다.
  (사이트에서 직접 추가할 수도 있고, 코드로 자동으로 추가 할 수도 있음)
  

⭐️ CRUD란?

CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다. 사용자 인터페이스가 갖추어야 할 기능을 가리키는 용어로서도 사용된다.
https://livedata.tistory.com/3

입력한 값을 데이터베이스에 올리기(Create)

addDoc, collection 이용

fbase.js

import { getFirestore } from "firebase/firestore";
export const dbService = getFirestore();

Home.js

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

const [tweet, setTweet] = useState("");
  const onSubmit = async (event) => {
    event.preventDefault();
    try {
      const docRef = await addDoc(collection(dbService, "tweets"), {
        tweet,
        createdAt: Date.now(),
      });
    } catch (error) {
      console.log("Error adding document", error);
    }
  };

• 자동으로 입력한 값이 database에 올라가는 것을 볼 수 있다.
  

데이터베이스에서 입력값 가져오기(Read)

getDocs, query 이용

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

 const [tweets, setTweets] = useState([]);
 const getTweets = async () => {
    const q = query(collection(dbService, "tweets"));
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
      const tweetObj = {
        ...doc.data(),
        id: doc.id,
      };
      setTweets((prev) => [tweetObj, ...prev]);
    });
  };
  useEffect(() => {
    getTweets();
  }, []);

return(
   <div>
        {tweets.map((tweet) => (
          <h4 key={tweet.id}>{tweet.tweet}</h4>
        ))}
   </div>
)

참고) 입력값이 여러번 저장되는 경우

해결책 : index.js에서 strictmode 지우기

여러번 저장되는 이유 : strict mode에서는 side effect를 줄이기 위해 일부러 두 번씩 실행시킨다. production 환경에서는 무시된다.

onSnapshot : 데이터베이스 변화를 실시간으로 알려줌

새로고침을 해야 변경된 데이터가 반영되는데, 새로고침을 하지 않고도 실시간으로 데이터를 업데이트를 하기 위해 사용함.
(모든 요소가 실시간일 필요는 없다.)

데이터를 수정하기 (Update)

UpdateDoc() : 수정하는 함수

  const onSubmit = (event) => {
    event.preventDefault();
    updateDoc(TweetTextRef, {
      text: newTweet,
    });
    setEditing(false); // editng 모드 풀어주기
  };

삭제하기 (Delete)

deleteDoc() : 선택한 요소 삭제하기

const TweetTextRef = doc(dbService, "tweets", `${tweetObj.id}`);
deleteDoc(TweetTextRef);