[Firebase 9] React 앱 세팅

파이어베이스 구버전과 9버전은 차이가 크다.

 

공식문서에서도 알 수 있듯이 구버전과 신버전은 문법부터 차이가 크다.

 

일단 npm으로 firebase를 설치한다.

npm install firebase

리액트 src 폴더에 firebase.ts 파일을 추가한다.

 

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore"

const firebaseConfig = {
   ~~~~~~~~~~~~~~~
};

const firebase = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebase);
const db = getFirestore(firebase);

export { firebase as firebase, analytics, db }

firebaseConfig는 본인의 파이어베이스 프로젝트설정에 가면 나온다.

 

이제 사용을 할 떄에는

import { db } from './firebase'
import { collection, addDoc } from "firebase/firestore";

function App() {
  async function addData() {
    await addDoc(collection(db, "게시판"), {
      content: 'content',
      timeStamp: 'dateAndTime',
      feedId: 'feedId',
      imagelink: 'imagePath',
      writerId: 'uid',
      writerNickname: 'displayName',
    }).then((docRef) => {
      console.log("Document written with ID: ", docRef.id);
      console.log("내용은 :", );
      console.log("시간은 :", );
      console.log("ID는 :", );
      console.log("사진 URL은 :", );
      console.log("작성자 ID는 :", );
      console.log("작성자 닉네임은 :", );//생각해보니 작성자 페이지 url을 넘겨줘도 되겠다.
      alert("글 작성 완료! Board 탭에서 게시글 확인해주세요!");
    })
      .catch((error) => {
        console.error("Error adding document: ", error);
      })
  }
  addData();

  return (
	<></>
  )
}


export default App

이런 식으로 가져다 쓰면 된다.

 

구버전보다 더 쉬워진 것 같다.

이제 코딩애플 강의 안들어도 된다! 만세!

 

자세한 활용법은 공식문서에 다 나온다.