[React.js + Firebase] Firestore 데이터 React로 연동하기 - 초간단 사진 게시판 만들기(1)

이 전 포스트에서 React와 Firebase를 활용하여 서버리스한 게시판을 만들기 위해 기본적인 세팅을 완료했다

이번 포스트에서는 연결 해 놓은 Firebase에서 Firestore이라는 빌드를 활용하여 아주아주 간단한 Back-end 환경을 구축 해 보도록 하겠다.

2023.05.25 - [Web] - [React.js + Firebase] 초간단 사진 게시판 만들기(0) - create-react-app, firebase 연동

[React.js + Firebase] 초간단 사진 게시판 만들기(0) - create-react-app, firebase 연동

💡Firestore이란?
기본적으로 NoSQL 형식의 서비스를 제공하며, 데이터 저장, 읽기, 쓰기, 삭제, 갱신 까지 CRUD한 통신이 아주 쉬운 방법으로 가능하다.

---

Firebase에 로그인 한 후, 좌측 빌드 메뉴에서 Firestore Database를 선택, 데이터 베이스 만들기를 클릭한다. 

데이터베이스 만들기 클릭

그러면 이런 화면이 나오는데, 이는 Firebase의 읽기 및 쓰기에 관련된 권한으로 프로덕션 모드에서 시작으로 체크를 눌러 주도록 한다. 이 규칙은 추후에 수정 할 수 있으므로 참고.

프로덕션 모드에서 시작 선택

마지막으로 파이어스토어 서버의 위치 설정을 물어보는데. Google Firebase의 분산 서버가 전 세계에 있어서 사용자가 원하는 트래픽이 많이 발생 될 것 같은 지역쪽으로 선택 해 주면 된다. 우리는 한국인이므로 Seoul 선택해도 좋고, United States도 큰 문제 없다.

사용설정 클릭

이제 컬랙션 시작을 누르고, 게시판에 표시될 아이템들에 대한 컬렉션을 만들어 준다.

💡 NoSQL에서의 문서(Document)는 객체지향에서의 객체와 유사하게 하나의 단위를 나타내는데, 자유롭고 빠른 쿼리가 가능하다는 것이 장점이다. 이 프로젝트에서는 하나의 문서가 게시판에 표시될 하나의 아이템이라고 생각하면 된다. 각 아이템은 여러가지 key-value 형식의 자유롭게 설정할 수 있는 속성을 가지며, 이 속성들의 key값으로 문서들을 쉽고 빠르게 쿼리할 수 있다.

 

문서 아이디는 1로 할당 해 주고, 그 아래에 name이라는 이름을 가지고 test라는 벨류를 갖고 있는 필드를 추가 해 준다.

여기까지 Firebase 표시 세팅이 끝났다.

---

이제 우리가 올려놓은 데이터를 클라이언트로 가져와야 한다.

초기화해준 firebase app으로 firestore를 불러오고 db로 export 해 준다.

 

firebase.js

import { initializeApp } from "firebase/app";
// firestore를 불러오는 모듈을 임포트
import { getFirestore } from "firebase/firestore"

const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId
};

const app = initializeApp(firebaseConfig);
// firestore 객체 생성
const db = getFirestore(app);
// firestore export
export {db}

create-react-app으로 자동 생성된 App.js를 수정해서 테스트 데이터를 출력할 수 있도록 해본다.

 

🔦 주요 메서드 설명

doc: doc(db, 컬렉션이름, 문서id)로 원하는 document의 참조를 생성한다.

getDoc: getDoc(참조)로 하나의 원하는 document의 Snapshot(firestore에서 쓰는 그 당시 document의 데이터를 의미한다.)를 가져온다. axios get과 유사하므로 Data Fetching시에 비동기로 처리 해 준다.

 

App.js

// firebase.js에서 db를 import
import { db } from './firebase';
import { useEffect, useState } from 'react';
// firestore의 메서드 import
import { doc, getDoc } from 'firebase/firestore';

function App() {
  const [test, setTest] = useState()
  // async - await로 데이터 fetch 대기
  async function getTest() {
    // document에 대한 참조 생성
    const docRef = doc(db, "items", "1");
    // 참조에 대한 Snapshot 쿼리
    const docSnap = await getDoc(docRef);

    if (docSnap.exists()) {
      setTest(docSnap.data())
    }
  };
  // 최초 마운트 시에 getTest import
  useEffect(() => {
    getTest()
  }, [])
  return (
    <div>
        {test !== undefined &&
        <div>{test.name}</div>}
    </div>
  );
}

export default App;

 

이제 다시 애플리케이션을 실행 시켜보면, 3000번 포트에서 아주 잘 test document의 데이터를 받아오는 것을 확인 할 수 있다.

3000번 포트

다음 포스트에서는 react-router-dom을 이용해서 동적 라우팅을 하여 이미지 게시판이 효율적으로 관리될 수 있도록 해 보겠다.

---

지금까지 활용한 모든 코드들은 firebase 공식 docs에서 인용 했다. firebase는 공식 docs가 굉장히 잘 되어있는 서비스 중에 하나이므로, 참고하면서 개발을 진행하길 권장한다.

https://firebase.google.com/docs/firestore?hl=ko&authuser=0

Firestore  |  Firebase