[Firebase] firebase의 Cloud Firestore 사용법

1. cloud firestore로 데이터베이스 만들기

먼저 Cloud Firestore 탭에 들어가 데이터베이스 만들기를 선택한다.
그럼 아래 사진과 같은 창을 확인할 수 있다.

첫 번째 모달창에서는 이름과 위치를 선택할 수 있다.

각자 본인의 위치와 가까운 곳을 선택하여 진행하자. 위치에 따라 서비스의 속도가 달라질 수 있으니 신중히 선택.
(필자의 경우 한국에 거주하고 있기 때문에 asia-notheast3 (Seoul)을 선택했다.)

다음으론 보안 규칙에 대해 선택할 수 있다.
현재는 개발 단계이니 편리하게 테스트 모드로 진행하자.

2. 개발 환경 세팅하기

(필수) 기존에 firebase를 프로젝트 상에 설치하지 않은 경우 설치해두자.
만약 잘 모르겠다면 이 포스트를 참고
기존의 firebaseConfig.js 피일에 다음 내용을 추가한다.

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore"; // Firestore 데이터베이스를 사용하기 위한 함수

const firebaseConfig = {
// 앱 정보
};

// Initialize Firebase
const app = initializeApp(firebaseConfig); // 앱을 초기화
const db = getFirestore(app); // Firestore 초기화

export { app, db };

import { getFirestore } from "firebase/firestore";

• firestore를 사용하기 위해 import 한다.

const db = getFirestore(app);

• firestore 초기화 객체. export하여 다른 컴포넌트에서 사용할 수 있도록 한다.

3. 컬렉션 생성 및 불러오기

firebase의 Database 탭에 들어가면 다음과 같은 내용을 확인할 수 있다.
컬렉션 시작을 눌러 데이터베이스를 생성해보자.

먼저 컬렉션 ID를 생성하자.
분류할 카테고리를 기준으로 생각하면 좋다.
필자는 여러 개의 문장을 저장할 예정이므로 sentences 라는 컬렉션을 만들었다.

다음으로 문서 ID와 필드이다.
문서 ID는 세부 항목 정도로 생각하면 좋다.
본인은 한국어만 있는 문장/ 영어가 포함된 문장을 저장할 예정이므로, 다음과 같이 설정했다.
이렇게 설정했다면 필드에 원하는 내용을 작성하여 저장하자.

저장이 완료되었다면 다음과 같이 확인할 수 있다.
이제 잘 저장되었는지 확인하기 위해, 프로젝트 상에서 해당 내용을 불러와보자.

4. 데이터베이스 사용하기

이제 데이터 베이스에 저장한 내용을 서버에 불러오는 과정이다.

먼저, 내용을 불러오고 싶은 컴포넌트에 다음을 import한다.

import { doc, getDoc } from "firebase/firestore";
import { db } from "../firebaseConfig";

• doc: firebase에서 특정 문서를 참조하는 객체 생성
• getDoc: 특정 문서를 가져오기 위한 메서드

⇒ 반환값: 가져온 문서의 상태와 데이터를 제공하는 객체

• db: db 사용을 위해 firebaseConfig에서 초기화 한 객체

이 import 한 함수 및 객체를 통해 저장한 값을 불러온다.

import { doc, getDoc } from "firebase/firestore";
import { db } from "../firebaseConfig";

// 특정 문서의 데이터를 가져오기
const fetchDocument = async () => {
  const docRef = doc(db, "컬렉션_ID", "문서_ID"); 
  const docSnap = await getDoc(docRef); 
  if (docSnap.exists()) {
    console.log("문서 데이터:", docSnap.data());
  } else {
    console.log("문서를 찾을 수 없습니다.");
  }
};

• exists()를 통해 데이터 존재 여부를 알 수 있다. 만약 존재할 경우(true) data()로 값을 가져오면 된다.
  • 가져오는 형태는 객체(object)이다.

콘솔을 통해 가져온 값을 확인해봤다.

이와 같이 값을 잘 가져온 것을 확인할 수 있었다.
다음에는 db에 값을 저장하는 내용에 대해 작성해볼까 한다.