CRUD with firebase: ✅ Create(만들기)-Tweeting

1. Cloud Firestore의 DB의 제한 사항

• SQL database
  • 오래됌
  • 많은 규칙과 관습
  • 그렇다 보니 좀 더 자유로움
    • 관계 맺고 있는 데이터가 자주 변경될 경우 NoSQL에서는 여러 Collection을 수정해야 한다. 명확한 스키마를 보장할 경우 SQL을 사용하는 것이 좋다.
• NoSQL database
  • 유연하고 규칙이 많이 없어서 사용하기 쉬움
  • 규칙이 많이 없기 때문에 제한되는 부분이 있음
    • 분산형 구조로 여러 서버에 데이터를 분산 저장하여 특정 서버에 장애 발생해도 서비스가 중지되지 않게 한다.
    • 명확하지 않은 테이블 스키마를 가진다. 정확한 데이터 구조를 알 수 없거나 데이터 구조가 변경, 확장 될 경우 NoSQL을 사용하는 것이 좋다.
    • 페이스북, 트위터 같은 소셜 미디어의 경우 게시글을 저장하는데 NoSQL database를 사용한다.

Cloud Firestore의 DB는 NoSQL database이다.
많은 것을 프로그램하지 않아도 되고 유연하다.
그렇다보니 몇 가지 제한 사항이 있다.

NoSQL database의 특징

collection(기본적으로 폴더 같은 개념), document(컴퓨터에 있는 문서 같은 개념)를 가진다.
따라서 하나의 Database는 collection들을 가지고 있고, 각각의 collection은 document들을 가지고 있다.

몽고디비가 생각나는 구먼! 몽고디비는 document db 였음 ㅇㅇ!

2. Cloud Firestore의 admin panel 에서 컬렉션과 다큐먼트 만들어 보기

1. Cloud Firestore의 admin panel 에서 + 컬렉션 시작을 클릭하여 컬렉션을 만들어 보자.
   

2. tweets 컬렉션을 만든다.
   

3. 다큐먼트 ID를 정하자. 자동 ID를 누르면 자동으로 정해준다.
   

4. 이렇게 어드민 패널에서 컬렉션과 컬렉션의 다큐먼트를 쉽게 만들 수 있다.
   

3. 코드로 컬렉션, 다큐먼트 생성하기

이제 어드민 패널에서 사용한 기능을 똑같이 코드를 작성하여 구현해보자. 코드를 작성하여 컬렉션을 생성하고 다큐먼트와 데이터를 생성해 보자.

1. 먼저 📍fbase.js에 firestore를 사용하기 위해 firebase/firestore에서 getFirestore를 가져온다.

2. 그리고 dbService라는 변수이름으로 getFirestore()를 내보낸다.

//✅ 파이어베이스에서 데이터 베이스 가져오기
import { getFirestore } from "firebase/firestore";

//✅ 디비 서비스 내보내기
export const dbService = getFirestore();

📍 fbase.js

//✅ Firebase Web v.9
//참고: https://firebase.google.com/docs/web/modular-upgrade#refactor_to_the_modular_style
//Follow this pattern to import other Firebase services
//import { } from 'firebase/<service>';

//앱 초기화 가져오기
import { initializeApp } from "firebase/app";
//파이어베이스에서 인증 시스템 가져오기
import { getAuth } from "firebase/auth";
//✅ 파이어베이스에서 데이터 베이스 가져오기
import { getFirestore } from "firebase/firestore";

// Your web app's Firebase configuration
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,
};

//파이어베이스 앱 초기화 하기
const app = initializeApp(firebaseConfig);

//어스 서비스 내보내기
//굳이 firebase 전체 다 안내보내고 authService만 export할 수 있다.
//authService 사용하고 싶을 때 마다 getAuth(app) 호출해야 하니까 app.js에서 단 한 번만 호출하고 export 시키면 된다.
export const authService = getAuth(app);

//✅ 디비 서비스 내보내기
export const dbService = getFirestore();

3. routes/Home.js에 fbase에서 dbService를 가져온다.

   //dbService 가져오기
   import { dbService } from "fbase";

4. 트윗하기를 누르면, 즉 submit하면 트윙클앱의 파이어스토어에 새로운 document를 생성할 수 있도록 코드를 작성하자.

• firebase/firestore에서 collection, addDoc, serverTimestamp를 사용하기 위해 가져온다.

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

• onSubmit함수 안에 다큐먼트에 새로운 데이터를 추가하는 코드를 작성한다.

Cloud Firestore는 Collection에 저장된 Document에 data를 저장한다.

• Cloud Firestore는 처음으로 Document에 data를 추가할 때 암시적으로 Collection과 Document를 만든다.
• Collection이나 Document를 명시적으로 만들 필요는 없다.
  • 다음 예제 코드를 사용하여 새 Collection과 Document를 만들 수 있다.

//Web v.9
import { collection, addDoc } from "firebase/firestore"; 
//
try {
  const docRef = await addDoc(collection(db, "컬렉션 이름"), {
    //data는 `key: value` 쌍으로 정보를 적으면 된다.
    first: "Ada",
    last: "Lovelace",
    born: 1815
  });
  console.log("Document written with ID: ", docRef.id);
} catch (e) {
  console.error("Error adding document: ", e);
}

• 또한 같은 Collection에 다른 Document도 추가할 수 있다.
• 위의 Document에는 없는 키(key)와 값(value)의 쌍을 포함해도 된다. 즉, Collection의 Document에는 서로 다른 정보 세트가 포함되도 된다. (이 말은 스키마가 명확하지 않다는 뜻인 듯 ㅇㅇ! 파이어베이스는 노에스큐엘!)

//Web v.9
import { collection, addDoc } from "firebase/firestore"; 
//
try {
  const docRef = await addDoc(collection(db, "컬렉션 이름"), {
    first: "Alan",
    //이런 식으로 위의 다큐먼트에는 없는 정보 세트를 포함할 수 있음!
    middle: "Mathison",
    last: "Turing",
    born: 1912
  });
  console.log("Document written with ID: ", docRef.id);
} catch (e) {
  console.error("Error adding document: ", e);
}

👉 참고 문서

코드

addDoc(collection(db, "컬렉션이름"), { key: value });을 사용하여 collection의 Document에 data를 추가할 수 있다.

• 위의 설명 처럼 Document에 data를 추가할 때 암시적으로 Collection과 Document가 처음 만들어 지기 때문에 이 메서드를 사용하면 된다.
• 이 메서드는 Document의 ID값을 무작위로 정한다.
  • 다큐먼트 ID값은 굳이 필요 없을것 같기 때문에 걍 이걸로 가면 될듯!

    const Home = () => {
    //홈에서 트윗 내용 작성하는 폼
    const [tweet, setTweet] = useState("");
    
    const onSubmit = async (event) => {
     event.preventDefault();
     //트윗하기 누르면 새로운 document 생성하기
     try {
       const docRef = await addDoc(collection(dbService, "tweets"), {
         tweet, // tweet(다큐먼트의 key): tweet(value로 tweet state 값)
         createdAt: serverTimestamp(), //Date.now(),로 해도 되지만 이왕 있는거 함 써보자(타임존 동북아3 = 서울로 설정되어 있음)
       });
       console.log("Document written with ID: ", docRef.id);
     } catch (error) {
       console.error("Error adding document: ", error);
     }
     //state 비워서 form 비우기
     setTweet("");
    };

📍routes/Home.js

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

const Home = () => {
  //홈에서 트윗 내용 작성하는 폼
  const [tweet, setTweet] = useState("");
  
  const onSubmit = async (event) => {
    event.preventDefault();
    //트윗하기 누르면 새로운 document 생성하기
    try {
      const docRef = await addDoc(collection(dbService, "tweets"), {
        tweet, // tweet(다큐먼트의 key): tweet(value로 tweet state 값)
        createdAt: serverTimestamp(), //Date.now(),로 해도 되지만 이왕 있는거 함 써보자(타임존 동북아3 = 서울로 설정되어 있음)
      });
      console.log("Document written with ID: ", docRef.id);
    } catch (error) {
      console.error("Error adding document: ", error);
    }
    //state 비워서 form 비우기
    setTweet("");
  };

  const onChange = (event) => {
    const {
      target: { value },
    } = event;
    setTweet(value);
    //console.log(tweet);
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="무슨 일이 일어나고 있나요?"
          maxLength={120}
          value={tweet}
          onChange={onChange}
        />
        <input type="submit" value="트윗하기" />
      </form>
    </div>
  );
};

export default Home;