# Firestore & CRUD

Doozuuยท2023๋…„ 1์›” 6์ผ
0

Firebase

๋ชฉ๋ก ๋ณด๊ธฐ
4/6

๐Ÿ“Œ 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);
profile
๋ชจ๋“ ๊ฒŒ ์ƒˆ๋กญ๊ณ  ์žฌ๋ฐŒ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ์ƒˆ์‹น

0๊ฐœ์˜ ๋Œ“๊ธ€