Chapter3 - react에 Firebase 연동하기

1. 파이어배이스 패키지 설치

2. Firestore 프로젝트 대쉬보드 우측 상단 '문서로 이동' 클릭

 

3. '웹 시작하기' 클릭

 

4. 연동하는 방법이 잘 설명되어 있다. (Firebase Document)

5. 다시 대쉬보드로 돌아가 '프로젝트 개요' -> '웹 아이콘' 클릭 

6. 닉네임 설정 후 '앱 등록'   호스팅은 나중에 설정 가능하다.

7. 복사하기 ( apiKey는 내 프로젝트에 접근 가능한 key이기 때문에 중요하다! )

8. VScode 내 프로젝트의 src 폴더에 firebase.js 를 만들어주고 붙여넣기를 한다.

 

9. 아까 Firebase Document에서 쭉 내려보면 사용 가능한 서비스가 있는데 그곳에서 Firestore Document로 이동

10. 밑으로 내려보면 개발 환경 설정이 있는데, 밑에 코드를 복사하여 firebase.js 에 import 해준다.

11. 밑으로 내려 초기화에서 const db 부분을 복사해 붙여넣고 App.js에서 쓸 수 있도록 export 해준다

     (내가 쓰지 않을 애널리틱스는 지워주었다)

// Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = {   apiKey: "AIzaSyA9imHyM8qAF-OjTOUrf5YtPmTzhVrOyTw",   authDomain: "first-fb-project-fa62c.firebaseapp.com",   projectId: "first-fb-project-fa62c",   storageBucket: "first-fb-project-fa62c.appspot.com",   messagingSenderId: "23945394531",   appId: "1:23945394531:web:7051d9ea6d965f2f157b56",   measurementId: "G-BFMP4GJL10", }; initializeApp(firebaseConfig) //변수없이 하는 이유는 파이어배이스를 호출하는 순간 쓸 수 있도록 기초설정 해주는 것이다. // Initialize Firebase // const app = initializeApp(firebaseConfig); export const db = getFirestore();

12. App.js 에서 db를 import 해주고 useEffect를 통해 콘솔에 찍어보자 (꼭 useEffect를 쓸 필요는 없다)

import { db } from "./firebase";

  React.useEffect(() => {

    console.log(db)

  },[])

이렇게 연결하고 데이터를 잘 가져오는 것을 알 수 있다. 끝!!!