트위터 클론코딩) database 추가

[fbase.js]

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
// Your web app's Firebase configuration

const firebaseConfig = {
 // secrets
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export default app;
export const auth = getAuth(app);
export const db = getFirestore(app);

---

[Home.js]

import { db } from "fbase";
import React, { useState } from "react";
import { collection, addDoc } from "firebase/firestore";

const Home = () => {
  const [tweet, setTweet] = useState("");

  const onSubmit = async (event) => {
    event.preventDefault();
    await addDoc(collection(db, "nweets"), {
      tweet,
      createdAt: Date.now(),
    });
    setTweet("");
  };
  const onChange = (event) => {
    setTweet(event.target.value);
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          value={tweet}
          onChange={onChange}
          placeholder="What's on your mind?"
          maxLength={120}
        />
        <input type="submit" value="Tweet" />
      </form>
    </div>
  );
};

export default Home;

addDoc(collection(db, "tweets"), { tweet, createdAt: Date.now(), });

강의와 달리 버전 9에서는 addDoc를 이용한다. 또한 collection도 이용하므로 따로 import 해줄 것.

+)
또한 자꾸 Uncaught (in promise) FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore 오류가 나서 엄청 헤맸는데 collection()의 첫번째 인자, 즉 db의 문제였다. 무슨 일인고 하니 fbase.js 파일에서 db를 export const 하고 있는데, Home.js 파일에서 import db from "fbase"; 하고 있는 거다..,, 멍청이ㅠ