[Firebase] React에 Firebase 연동하기

 

Link : https://console.firebase.google.com/?hl=ko 

로그인 - Google 계정

 

Firebase  프로젝트 추가 

프로젝트 이름 지정

 

사이트에서 발생하는 사용자의 행동 데이터를 쌓을 수 있는것 (애널리틱스)

얼마나 머물렀는지, 오류가 나지는 않았는지 트래킹 해볼 수 있다 

활성상태로 계속 클릭

기본값으로 프로젝트 만들기 

 

프로젝트 만들기 완성 !

 

FireStore  설정하기 

파이어 스토어는 크게 Collection Document 으로 구성이 되어있다

• Collection: 문서(다큐먼트)의 집합
• Document: JSON 형식으로 데이터를 저장할 수 있음

 

My Dictionary 대시보드 화면 들어가기 

 

firestore Database  > 데이터 베이스 만들기 

 

localhost 에서 테스트 해가면서 만들거라서 테스트 모드 클릭 !

위치결정 은 한번 설정하면 나중에 변경 불가능 하니 유의하기

컬렉션 ID 지정 

타입에 맞게 문서 추가!

ID는 (자동ID)적용

추가완료!!! 

 

 

Firebase 패키지 설치

웹앱 등록하러가기 > 웹 선택

호스팅은 나중에 해도됨 그냥 넘어가기

 

Firebase SDK  내용 복사하기 

내프로젝트 src에 firebase.js 파일 생성 후 붙여넣기

 

문서로 이동 -> 웹용 Cloud Firestore 선택

내가 설치한 Firebase 버전 확인 후 동일한 버전 설치

내프로젝트 src > firebase.js 에 붙여넣기

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

 

import { getFirestore } from "firebase/firestore"

const db = getFirestore();

 

파이어베이스.js에

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore();

부분을 

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

export const db = getFirestore();

변경 후 

app.js에서 {db} import 하기

console.log로 db 값 들어오는지 확인하기

import { db } from "./firebase";

 //파이어베이스 db 확인 해보기
console.log(db);

확인되었다면

Firebase  연동 완료!