개발공부/리액트

[리액트] 서버리스 서비스 firebase/firestore 정리

햄❤️ 2021. 3. 30. 12:50
728x90

 

1) 서버리스란? 

 서버를 신경쓸 필요가 없는 것. 누군가 구축해둔 서버의 일부분을 빌려서 쓰는 것(서버가 없다는 뜻이 아님!)

 

 

2) Firebase는?

 흔히 백엔드 하면 떠올리는것을 빌려온다! 데이터베이스,소셜서비스연동/파일시스템 등을 API형태로 제공해주는 곳

 

 

3) Firestore는?

 realtime-database 제공하는 서비스, 실시간으로 데이터가 추가되고, 삭제되는것을 우리 클라이언트에게 알려준다.

리액트와는 react-firebase라는 패키지를 통해 연결할 수 있다.

 

 

4) 리액트에 파이어베이스 패키지 설치

yarn add firebase

 

 

5) src 폴더 아래에 firebase.js 파일 생성

 

 파이어스토어에서 발급받은 SDK영역을 붙여넣어준다.

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

const firebaseConfig = {
    // firebase 설정 개인 정보
};

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

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

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

 

App.js에서 firestore 가져오기

import { firestore } from "./firebase";
//컴포넌트에 파이어스토어 콜렉션 데이터 가져오기 ( componenDidMount, useEffect 단계에서)

const 변수명 = firestore.collection("콜렉션명");

//가져오기(특정 문서 id만)
변수명.doc("문서ID").get().then((doc) => {
	if(doc.exists){ //만약 doc에 데이터가 존재한다면
    	console.log(doc);
        console.log(doc.data); -> doc의 데이터
        console.log(doc.id); -> doc의 id
    }
    console.log(doc.exists);

});

//가져오기(모든 데이터) -> forEach라는 반복문
변수명.get().then(docs => {
	let 리스트 = []; //이 데이터를 리스트에 추가할때
	docs.forEach((doc) => {
    	if(doc.exists){
        리스트 = [...리스트, {id: doc.id}, ...doc.data()}] 
        }
	    console.log(doc);
        console.log(doc.data); -> doc의 데이터
        console.log(doc.id); -> doc의 id
    });
});

 

 

6) firestore에 데이터 추가/업데이트/삭제하기

 

//데이터 추가
콜렉션명.add({ text: "추가하고자하는 것", compeleted: 추가값 });

//데이터 수정(update)
콜렉션명.doc("doc.id이름").update({ text: "변경하고자 하는 내용", compeleted: 변경값 });

//데이터 삭제
콜렉션명.doc("doc.id이름").delete();

 

 

7) 리덕스에서 firestore 사용하기위해 미들웨어 설치하기

 

- firestore 데이터를 리덕스 스토어에 넣으려면 미들웨어가 필요하다! 

 미들웨어는? 리덕스 데이터를 수정할 때, 액션이 디스패치되고 리듀서에서 처리하는 과정에서 미리 사전 작업을 할 수 있는 중간 다리 역할! 리덕스에서 비동기 통신 할때 필요!

  액션 발생 -> 미들웨어 -> 리듀서 처리

 

 1.미들웨어 redux-thunk 설치

redux-thunk는 액션 객체 대신 함수를 반환. 액션 생성함수를 작성

함수를 작성하게되면 특정 액션이 발생하기 전에 조건을 주거나, 어떤 행동을 사전에 처리할 수 있다. ( 응답이 올때까지 기다릴 수 있다 ) 

yarn add redux-thunk

 2. configStore.js에서 미들웨어 주입 및 생성

 

import {createStore, combineReducer, applyMiddleware} from "redux";
// applyMiddleware 적용

import thunk from "redux-thunk"; //미들웨어 thunk import


const middlewares = [thunk];
//미들웨어 가져오기

const enhancer = applyMiddleware(...middlewares);
//미들웨어 적용하기

const store = createStore(rootReducer, enhancer);
//store에 미들웨어 추가하기(enhancer부분)

 

 

8) 리덕스에서 firestore 액션함수 만들기

 

리덕스에서 함수 만들기

//리덕스에서 함수 만들기

export const loadBucketFB = () => {
	return function (dispatch, getState) { //미들웨어 연결하는 부분, 파라미터값으로 디스패치/스테이트값
	
      bucket_db.get().then((docs)=>{
          let bucket_data = [];
          docs.forEach((doc) => {
            if(doc.exists){
                bucket_data = [...bucket_data, {id: doc.id} ...doc.data()}]
            }
          })
          console.log(bucket_data); //잘 찍히는지 확인할 것!! 
          dispatch(loadBucket(bucket_data)); 
          //원래 액션 디스패치먼저 해줌(액션크리에이터명 넣어준다)! 데이터 전달해주자
   		});
     }
}

//리듀서 고치기
export default function reducer(state = initialState, action = {})
	switch(action.type)
    	case "bucket/LOAD" {
        	if(action.bucket.length > 0){ //데이터가 없을 수 있으니깐, 1 이상일때만 보여주자
            	return {list: action.bucket};
            }
            return state; //없다면 그냥 state 불러줘
        }

 

컴포넌트에서 함수 적용하기 feat. UseEffect

import {loadBucketFB} from "./redux/modules/모듈js명"
or 
import {actionCreators as postAction} from "동일경로"; //as는 별칭

React.useEffect(()=>{
	dispatch(postAction.loadBucketFB());
},[]); 
//한번만 실행될 거라서 빈배열

 

728x90