[새싹 프론트엔드] 221212 TIL-2 - React(13) Firebase

뒹귤·2022년 12월 18일

React 새싹 프론트엔드

새싹 프론트엔드

목록 보기

34/41

Firebase란?

구글의 모바일 및 웹 어플리케이션 개발 플랫폼
백엔드 서버 기능을 클라우드 서비스 형태로 제공
인증(Authentication), 데이터베이스(Firestore), 분석(Analytics) 등의 기능 제공
Firebase(https://firebase.google.com)

프로젝트 생성

Cloud Firestore

Firebase가 지원하는 데이터베이스 종류

Realtime Database
Cloud Firestore
- Firebase에서 지원하는 NoSQL 데이터베이스 서비스
- 사용자와 기기간 데이터의 실시간 동기화 가능

데이터 추가하기

왼쪽메뉴→ 빌드→ Firestore Database 클릭

데이터베이스 만들기

컬렉션 생성

데이터 추가
- 컬렉션 → document → 필드

어플리케이션 등록하기

프로젝트 개요 클릭

앱 등록

터미널에서 Firebase 설치 → Firebase SDK 추가

KEY 저장하기

.env.local 파일 생성 후(최상단 폴더에 생성), 개인 key 저장
- .env.local 파일은 .gitignore에 추가되어 깃헙에 업로드할때 알아서 걸러준다!
src폴더→ firebase.js
- process.env. 로 .env.local에 저장한 개인 key 불러옴

// 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: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

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

// Firebase 객체 저장
export const db = getFirestore(app);

데이터베이스 연결 확인하기

App.js

import { useEffect } from "react";
import "./App.css";
import { db } from "./Firebase";

function App() {
  useEffect(() => {
    console.log(db);
  });

  return <></>;
}

export default App;

👉 개인 projectId 확인

전체 데이터 가져오기 - getDocs()

App.js

import { async } from "@firebase/util";
import { collection, getDocs } from "firebase/firestore";
import { useEffect } from "react";
import "./App.css";
import { db } from "./firebase";

function App() {
  const fruitCollection = collection(db, "fruits");

  useEffect(() => {
    async function getFruits() {
      const data = await getDocs(fruitCollection);
      console.log(data);
    }
    getFruits();
  }, []);

  return <></>;
}

export default App;

👉 docs:Array() 클릭

👉 Fields 확인

일부 데이터 가져오기 - doc(), getDoc()

App.js

import { async } from "@firebase/util";
import { collection, getDocs, getDoc, doc } from "firebase/firestore";
import { useEffect } from "react";
import "./App.css";
import { db } from "./firebase";

function App() {
  const fruitCollection = collection(db, "fruits");

  useEffect(() => {
    async function getFruits() {
      const docRef = doc(fruitCollection, "딸기");
      const data = await getDoc(docRef);

      if (data.exists()) {
        console.log("결과 : ", data.data());
      } else {
        console.log("결과 없음");
      }
    };
    getFruits();
  }, []);

  return <></>;
}

export default App;

👉 document가 “딸기”인 경우만 검색

조건 검색하기(1) - query(), where()

App.js

import { async } from "@firebase/util";
import {
  collection,
  getDocs,
  getDoc,
  doc,
  query,
  where,
} from "firebase/firestore";
import { useEffect } from "react";
import "./App.css";
import { db } from "./firebase";

function App() {
  const fruitCollection = collection(db, "fruits");

  useEffect(() => {
    async function getFruits() {
      // where 함수 => 검색
      const data = query(fruitCollection, where("season", "==", "가을"));
      const querySnapshot = await getDocs(data);

      querySnapshot.forEach((doc) => {
        console.log(doc.id, " : ", doc.data());
      });
    }
    getFruits();
  }, []);

  return <></>;
}

export default App;

👉 season이 “가을”에 해당하는 과일만 검색

조건 검색하기(

App.js

import { async } from "@firebase/util";
import {
  collection,
  getDocs,
  getDoc,
  doc,
  query,
  where,
} from "firebase/firestore";
import { useEffect } from "react";
import "./App.css";
import { db } from "./firebase";

function App() {
  const fruitCollection = collection(db, "fruits");

  useEffect(() => {
    async function getFruits() {
      // where 함수 => 검색
      const data = query(fruitCollection, where("price", ">", 5000));
      const querySnapshot = await getDocs(data);

      querySnapshot.forEach((doc) => {
        console.log(doc.id, " : ", doc.data());
      });
    }
    getFruits();
  }, []);

  return <></>;
}

export default App;

👉 price가 5000이상인 과일만 검색

데이터 추가하기 - setDoc()

App.js

import { async } from "@firebase/util";
import {
  collection,
  getDocs,
  getDoc,
  doc,
  query,
  where,
	setDoc
} from "firebase/firestore";
import { useEffect } from "react";
import "./App.css";
import { db } from "./firebase";

function App() {
  const fruitCollection = collection(db, "fruits");

  async function setFruit() {
    await setDoc(doc(fruitCollection, "바나나"), {
      season: "봄",
      color: "노랑",
      taste: "달콤",
      price: 3000,
    });
  }

  return <><button onClick={setFruit}>과일 추가</button></>;
}

export default App;

👉 바나나 추가 완료

데이터 수정하기 - updateDoc()

기존 필드가 없으면 새로운 필드를 만들고, 기존 필드가 있으면 갱신해줌

import { db } from "./firebase";
import { 생략, setDoc } from "firebase/firestore";

const App = () => {
	const fruitCollection= collection(db, "fruits");

	async function **updateFruit**() {
		await **updateDoc**(doc(fruitCollection, "바나나"), {
			season: "봄",
			color: "노랑",
			taste: "달콤",
			price: 5000,
		});
	}
	return <div><button onClick={**updateFruit**}>과일수정</button></div>;
};
export default App;

👉 바나나 price 수정 완료

import { db } from "./firebase";
import { 생략, setDoc } from "firebase/firestore";

const App = () => {
	const fruitCollection= collection(db, "fruits");

	async function **updateFruit**() {
		await **updateDoc**(doc(fruitCollection, "바나나"), {
			season: "봄",
			color: "노랑",
			taste: "달콤",
			price: 5000,
			count: 10,
		});
	}
	return <div><button onClick={**updateFruit**}>과일수정</button></div>;
};
export default App;

👉 바나나에 새로운 field “count : 10” 추가 완료

데이터 삭제하기 - deleteDoc()

import { db } from "./firebase";
import { 생략, deleteDoc } from "firebase/firestore";

const App = () => {
	const fruitCollection= collection(db, "fruits");

	async function **deleteFruit**() {
		await **deleteDoc**(doc(fruitCollection, "메론"));
	}

	return <div><button onClick={**deleteFruit**}>과일삭제</button></div>;
};
export default App;

👉 메론 삭제 완료

updateDoc(), deleteField()

import { db } from "./firebase";
import { 생략, deleteField } from "firebase/firestore";

const App = () => {
	const fruitCollection= collection(db, "fruits");

	async function **deleteFieldFruit**() {
		await **updateDoc**(doc(fruitCollection, "바나나"), {
			**count**: **deleteField()**,
		});
	}

return 
	<div>
		<button onClick={**deleteFieldFruit**}>특정필드삭제</button>
	</div>;
};
export default App;

👉 바나나의 “count” field 삭제 완료

💡 input 태그의 value 속성 → 리액트에서는 value의 값 수정이 불가능하다
→ 변수명을 넣고 변수를 수정해야 함

💡 리액트의 confirm 버튼 : window.confirm
confirm 버튼의 확인 클릭 시 → true
confirm 버튼의 취소 클릭 시 → false

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 9주차 블로그 포스팅