[REACT] 파이어베이스에서 데이터베이스 만들고 리액트와 연결하기

파이어베이스

https://firebase.google.com/

Firebase

 

 

1) 프로젝트 만들기

 

 

 

 

 

(2) 파이어스토어

 

파이어스토어란?

Firebase에 포함되어 있는 서비스 중 하나로 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스

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

 

프로젝트를 선택하고 Cloud Firestore에 들어간다.

 

 

 

데이터베이스를 만든다.

 

 

 

localhost에서 수정할 수 있게 테스트 모드로 시작한다.

 

 

 

 

나라를 지정해준다.

 

 

 

 

(3) 데이터 저장

 

 

나는 컬렉션 이름은 myName이라고 했고

문서 ID는 자동 ID생성

필드의 KEY값은 name그리고 value는 이현주라고 저장했다.

 

 

그러면 이렇게 딱 들어간다.

 

 

 

 

 

 

(4) 리액트에 패키지 설치

yarn add firebase

 

 

(5) config가져오기

1. src 폴더 하위에 firebase.js파일을 만든다.

//firebase.js
import firebase from "firebase/app";
import "firebase/firestore";

const firebaseConfig = {
    // firebase 설정과 관련된 개인 정보
};

// firebaseConfig 정보로 firebase 시작
firebase.initializeApp(firebaseConfig);

// firebase의 firestore 인스턴스를 변수에 저장
const firestore = firebase.firestore();

// 필요한 곳에서 사용할 수 있도록 내보내기
export { firestore };

 

 

 

2. 대시보드에서 웹을 선택한다.

 

 

3. 앱등록

 

 

4. firebaseConfig내용을 firebase.js에 추가

 

 

 

//firebase.js
import firebase from "firebase/app";
import "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyADP5N-o6_UIQx3vIp1zUFNwoIWe-a4OQk",
    authDomain: "hyeonju-97de7.firebaseapp.com",
    projectId: "hyeonju-97de7",
    storageBucket: "hyeonju-97de7.appspot.com",
    messagingSenderId: "699829145025",
    appId: "1:699829145025:web:a8522188278c04368b7340",
    measurementId: "G-N9WQ0979DX"

};

// firebaseConfig 정보로 firebase 시작
firebase.initializeApp(firebaseConfig);

// firebase의 firestore 인스턴스를 변수에 저장
const firestore = firebase.firestore();

// 필요한 곳에서 사용할 수 있도록 내보내기
export { firestore };

 

 

 

 

5. App.js에서 firebase.js에서 내보낸 firestore가져오기

import { firestore } from "./firebase";

 

 

 

6. componentDidMount에서 데이터 불러와보기

 

//전체 확인하기
        
      myName.get()
      .then((docs) => {
        let bucket_data = [];
        docs.forEach((doc) => {
          // 도큐먼트 객체를 확인해보자!
          console.log(doc);
          // 도큐먼트 데이터 가져오기
          console.log(doc.data());
          // 도큐먼트 id 가져오기
          console.log(doc.id);
 
          if (doc.exists) {
            bucket_data = [...bucket_data, { id: doc.id, ...doc.data() }];
          }
        });
 
        console.log(bucket_data);

myName은 컬렉션 이름