🕶️ Firebase 연동하기

Firebase로 프로젝트를 만들기 위해 연동시켜보자.

 

 

---

 Firebase 추가

yarn add firebase

 

https://console.firebase.google.com/u/0/

들어가서 로그인 해보자.

 

로그인 하고보면 이런 화면일 것이다.

프로젝트를 추가하여 만들면 된다.

 

프로젝트 이름을 정하고 계속 누르다보면 프로젝트가 만들어 진다.

조금 기다리다보면 된다.

 

그후 앱추가에서 웹을 선택하고 가자

닉네임을 적고 기다리면

 

이렇게 나온다.

기다란 코드는 복사해서

firebaseConfig.js

파일에 만들어 넣는다.

 

import firebase from "firebase/compat/app"
import "firebase/compat/auth"
import { initializeApp } from "firebase/app"
import { getFirestore } from "@firebase/firestore"

const firebaseConfig = {
  apiKey: "본인 SDK에 있는거 입력",
  authDomain: "본인 SDK에 있는거 입력",
  projectId: "본인 SDK에 있는거 입력",
  storageBucket: "본인 SDK에 있는거 입력",
  messagingSenderId: "본인 SDK에 있는거 입력",
  appId: "본인 SDK에 있는거 입력",
  measurementId: "본인 SDK에 있는거 입력", 
}

// firebaseConfig 정보로 firebase 시작
firebase.initializeApp(firebaseConfig)
const app = initializeApp(firebaseConfig)

export const authService = firebase.auth() // 로그인 모듈
export const firebaseInstance = firebase // 소셜로그인
export const db = getFirestore(app) // DB 정보

이런식

 

 

Firestore Database

왼쪽에 빌드를 누르고 Firestore Database를 만든후 시작하면 된다.

 

 

확인

간단하게 연결되어있는지 확인해 보자

import { useState, useEffect } from 'react';
import './App.css';
// 파이어베이서 파일에서 import 해온 db
import {db} from './firebase-config'
// db에 접근해서 데이터를 꺼내게 도와줄 친구들
import { collection, getDocs } from "firebase/firestore";

function App() {
 // 이따가 users 추가하고 삭제하는거 진행을 도와줄 state
  const [users, setUsers] = useState([]);
  // db의 users 컬렉션을 가져옴
  const usersCollectionRef = collection(db, "users");

   // 시작될때 한번만 실행
  useEffect(()=>{
  	// 비동기로 데이터 받을준비
    const getUsers = async () => {
     // getDocs로 컬렉션안에 데이터 가져오기
      const data = await getDocs(usersCollectionRef);
      console.log(data);
    }

    getUsers();
  },[])
  return (
    <div className="App">
     
    </div>
  );
}

export default App;

 

docs(....)   라고 되있으면   ....을 클릭하면 열린다.