Firebase CRUD

• Firebase의 Cloud Firestore에 들어가 데이터베이스 생성
  

• 위치(리전)을 설정 후 보안규칙 설정
  

• firebase configur 파일에 db추가

import { initializeApp, FirebaseApp, getApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

export let app: FirebaseApp;

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

try {
  app = getApp("app");
} catch (e) {
  app = initializeApp(firebaseConfig, "app");
}

const firebase = initializeApp(firebaseConfig);

export const db = getFirestore(app); // 추가된 것
export default firebase;

생성

• addDoc, collection(db, '사용할 폴더명') 메서드 사용
• 공식문서

const onSubmit = async (e: any) => {
    e.preventDefault();
    try {
      if (user) {
        await addDoc(collection(db, "posts"), {
          content: content,
          createdAt: new Date()?.toLocaleDateString("ko", {
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
          }),
          uid: user.uid,
          email: user.email,
        });
        setContent("");
        toast.success("게시글을 생성했습니다.");
      }
    } catch (e: any) {
      console.log(e);
    }
  };

읽기

• onSnapshot 메서드 사용
• 공식문서
• Query
  • orderBy

 const [posts, setPosts] = useState<PostProps[]>([]);
  const { user } = useContext(AuthContext);

  useEffect(() => {
    if (user) {
      let postsRef = collection(db, "posts");
      let postsQuery = query(postsRef, orderBy("createdAt", "desc"));

      onSnapshot(postsQuery, (snapshot) => {
        let dataObj = snapshot.docs.map((doc) => ({
          ...doc.data(),
          id: doc.id,
        }));
        setPosts(dataObj as PostProps[]);
      });
    }
  }, [user]);

업데이트

• updateDoc 메서드 사용
• 공식문서

// id로 post의 정보 가져오는 함수(useEffect로 구현)
const getPost = useCallback(async () => {
    if (params.id) {
      const docRef = doc(db, "posts", params.id);
      const docSnap = await getDoc(docRef);
      // fireStore에 따로 id가 없어서 params에서 id값을 추출후 id값 넣기
      setPost({ ...(docSnap.data() as PostProps), id: docSnap.id });
      setContent(docSnap.data()?.content);
    }
  }, [params.id]);

// updateDoc함수 사용하는 제출 함수
const onSubmit = async (e: any) => {
    e.preventDefault();
    try {
      if (post) {
        const postRef = doc(db, "posts", post?.id);
        await updateDoc(postRef, {
          content: content,
        });
      }
      navigate(`/posts/${post?.id}`);
      toast.success("게시글을 수정했습니다.");
    } catch (e: any) {
      toast.error(e.code);
    }
  };

useEffect(() => {
    if (params.id) getPost();
  }, [getPost, params.id]);

삭제

• deleteDoc 메서드 사용
• 공식문서

const handleDelete = async () => {
    const confirm = window.confirm("해당 게시글을 삭제하시겠습니까?");
    if (confirm) {
      await deleteDoc(doc(db, "posts", post.id));
      toast.success("게시글을 삭제했습니다.");
      navigate("/");
    }
  };