본문 바로가기
카테고리 없음

FireBase 와 React

by 쿠리의일상 2023. 5. 10.

플랫폼을 프로젝트 구축 시 필요한 백엔드 기능을 클라우드 형태로 자동적으로 만들어주는 서비스

서버를 구축하기 위한 리눅스 명령어를 알 필요 없으며 도메인을 구입할 필요도 없어진다. (서버리스 애플리케이션)

 

  • 인증 시스템 지원 - 로그인
  • NoSQL 기반의 3세대 데이터베이스 - 특히나 Document 형식의 NoSQL 데이터베이스 도입
  • RTSP(Real Time Stream Protocol) 방식의 데이터베이스 지원 - 실시간으로 데이터들을 전송 가능
  • 원격으로 앱의 환경 상태를 구성 가능
  • 서버 관리자 페이지 제공
  • Analytics, 다수의 사용자가 앱을 어떻게 사용하는지 통계 정보를 가지고 있어 맞춤 마케팅이 가능

다만, firebase 는 서버가 해외에 있기에 종종 처리 속도가 지연이 생겨 서버 응답속도가 느리고

FireStore/RealTimeDatabase 의 파이어베이스의 데이터베이스의 쿼리가 빈약하다는 단점이 존재한다.

 

 

Firestore 구조

1. Collection

문서의 집합

관계형 데이터베이스의 테이블과 유사함

동일한 구조를 가지지 않는 문서들 저장이 가능

 

2. Document

필드와 값을 갖는 JSON 형태로 데이터를 저장할수 있는 방식

document 내부에 또 다른 Collection을 가질 수 있음

 

 

Firebase 시작하기

작업 중이던 리액트 CRA 에 설치

 

npm i firebase --save

 

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

 

로그인 - Google 계정

이메일 또는 휴대전화

accounts.google.com

해당 사이트에서 프로젝트 생성 후 나오는 SDK 부분을 처리

firestore(DB) 적용하기

// firebase.ts 파일을 src 폴더에 만들어주기 
import { initializeApp } from "firebase/app";

const firebaseConfig = {
  // ...
};

export default initializeApp(firebaseConfig);
import { initializeApp } from "firebase/app";
import "firebase/compat/firestore";
import firebase from "firebase/compat/app";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECTID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDERID,
  appId: process.env.REACT_APP_FIREBASE_APPID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENTID,
};

firebase.initializeApp(firebaseConfig);
const firestore = firebase.firestore();
export { firestore };

firebase 가 제대로 연결되면 콘솔에 찍었을 때 해당 내용을 확인할 수 있다.

 

 

 

프로젝트에 접속하면,

Cloud Firestore 버튼 클릭

그 다음 데이터베이스를 만들어줄 수 있다.

 

다만 로컬에서 데이터를 요청하려면 테스트 모드로 설정해줘야 함

그다음 위치 설정에선 asia-est2(hongkong) 으로 설정하면 끝!

 

 

데이터 > 컬렉션 시작 으로 컬렉션 ID 지정

 

firestore 의 데이터 추가

collection : 데이터베이스 테이블

document : 테이블에 저장되는 데이터 정보

파이어스토어는 스키마 개념이 따로 없어서 document 의 형태가 자유롭다.

 

import { firestore } from './firebase';

const users = firestore.collection("users");

users.doc('지정해줄id값').set( { document } );

1. set(document) 는 지정해줄 문서(id)의 명을 지정해주며 데이터를 추가할 수 있다.

2. add(document) 는 랜덤id명을 지정하여 데이터를 추가해준다.

import { firestore } from './firebase';

const users = firestore.collection("users");

users.add( { document } );

 

 

데이터 수정

update()

특정 필드의 값을 수정하거나 값이 없으면 필드값을 추가해준다.

const users = firestore.collection("users");

users.doc("admin").update({ document });

id명을 알고 있다면 doc( ) 에 넣어서 찾아 데이터를 수정해줄 수 있다.

 

필드의 값에 객체가 포함되어 있다면?

-> 점표기법을 사용하여 해당 객체의 요소를 참조하여 변경이 가능하다.

 

 

데이터 읽기

firestore.collection('users').get()
  .then((result) => result.forEach((doc) => {
  
  }));

get()을 사용하여 Promise 로 읽어오는 result 값으로 파이어스토어 안, 컬렉션의 모든 문서를 읽어올 수 있다.

 

 

데이터 삭제

문서나 필드를 삭제하고자 할 때 delete() 메서드 사용

 

1. 문서를 삭제하고 싶다면 doc('id명') 으로 찾아서 사용하면 된다.

const users = firestore.collection("users");

users.doc("admin").delete();

 

2. 특정 필드만 삭제하고 싶다면 firebase 모듈을 import 하고 update() 메서드 안에

삭제하고자 하는 필드의 값에 firebase.firestore.FieldValue.delete() 를 넣어준다.

const users = firestore.collection("users");

users.doc("admin").update( { 삭제하고자하는필드명 : firebase.firestore.FieldValue.delete() } );

 

 

현재 진행 중인 사이드 플젝에서 회원 가입 시 이메일 인증을 구현하고 있다..

파이어베이스에서 해당 기능도 지원해준다고 해서 알아봤는데... 인증코드를 보내주는 것 같지 않았다. (만약 인증코드를 보내주는 걸 구현하고 싶고, 서버가 있다면 nodemailer? 라이브러리를 쓰면 된다고 한다.)

 

요거를 클릭해서 시작하기

이메일 / 비밀번호를 누르고 사용 설정을 해주면 된다.

 

 

import { getAuth } from "firebase/auth";
export const auth = getAuth(app);

를 firebase.ts 파일에 추가해주고,,

 

import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "./firebase";

해당 모듈을 사용하여 회원가입 함수를 async 로 작성해준다.

그럼 회원가입을 이메일로 가능하다고 한다.

 

일단 여기까지!

 

티스토리툴바