Firebase를 API backend로 사용해보기 (React에서)

Firebase는 앱과 게임을 빌드하는 앱 개발 플랫폼이다. 따라서 프론트랑은 거리가 좀 있어 보이지만, Firebase에는 프론트도 유용하게 사용할 수 있는 여러 기능들이 탑재되어있다.

주로 Firebase의 SaaS 서비스들을 사용하는데, 아래와 같은 서비스를 살펴보자.

Firebase의 모든 서비스를 사용하기 전에 Firebase Project를 생성해야한다.

Firebase 시작하기

Firebase의 모든 서비스를 이용하기 위해선 먼저 Firebase app을 실행시켜줘야 한다.

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID,
};

export const fireBaseApp = initializeApp(firebaseConfig);

initializeApp 함수의 실행 위치는 상관없으나, 한번만 실행하면 되기 때문에 컴포넌트 밖에서 따로 실행한 후 export 해주는 것이 좋다.

Firestore

Firestore는 NoSQL 클라우드 데이터베이스이다. NoSQL 자체도 SQL에 비해 시작 난도가 낮기 때문에, 여러모로 사용하기 편한 서비스다.

Firestore 시작하기

Firestore 역시 Firebase 처럼 먼저 실행시켜줘야 한다.

import { getFirestore } from "firebase/firestore";

export const db = getFirestore(fireBaseApp);

initializeApp 과 동일하게 getFirestore 역시 컴포넌트 밖에서 한번만 실행해주면 된다.

그럼 아래와 같이 Firebase 서비스들을 다루는 코드가 완성된다.

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID,
};

export const fireBaseApp = initializeApp(firebaseConfig);
export const db = getFirestore(fireBaseApp);

Firestore 데이터 추가하기

Firestore의 데이터를 추가하는 방법은 크게 두가지이다.

Firebase console에서 손수 데이터 추가해주기
코드로 데이터 추가하기

1. Firebase console에서 손수 데이터 추가해주기

Firebase console에 접속한다.
자신의 프로젝트를 선택한다.
왼쪽 메뉴에서 Firestore Database를 선택한다.
+ 버튼을 눌러 컬렉션 > 문서를 마음대로 추가해준다.
필드를 추가하여 문서에 데이터를 넣어준다.

아래는 예시 완성본이다. 데이터를 가져올 때 역시 해당 데이터를 사용할 것이다. Add data by firebase console

2. 코드로 데이터 추가하기

Firestore는 setDoc, addDoc 두 가지 함수로 데이터를 추가할 수 있다.

이제 원하는 데이터를 추가해보자.

1. `addDoc`

addDoc은 아래와 같이 사용하여 원하는 데이터를 추가할 수 있다.

import { addDoc, collection } from "firebase/firestore";

const writtenDoc = await addDoc(collection(db, "wiki"), {
  title: "LGH",
  description: "허먼밀러...사고싶다...",
});

console.log("Document written with ID: ", writtenDoc.id);
// 새로 생성된 Document의 ID를 반환한다.

원하는 데이터를 추가하기 위해선 먼저 원하는 collection을 선택해야 한다. 위 예제의 addDoc 안에서 사용한 collection 함수는 db상에 있는 collection을 선택하거나 없을 경우 새로운 collection을 생성하여 반환한다.

Firebase의 Doc는 기본적으로 ID를 가져야 하는데, addDoc을 사용하면 ID를 자동으로 만든다. 또한, 이미 존재하는 Doc에 addDoc을 사용하면 에러가 발생한다.

2. `setDoc`

setDoc은 아래와 같이 사용하여 원하는 데이터를 추가할 수 있다.

import { setDoc, doc } from "firebase/firestore";

await setDoc(doc(db, "wiki", "new-id"), {
  title: "LGH",
  description: "허먼밀러...사고싶다...",
});

addDoc과의 차이점은

id 를 지정해줘야함
collection 대신 doc을 사용함
이미 존재하는 Doc에 사용가능

3가지 이다.

setDoc은 addDoc과 달리 collection이 아니라 doc를 선택해야 한다. 이는 setDoc이 데이터의 추가 뿐 아니라 데이터 덮어쓰기 기능도 가지고 있기 때문이다. 러프하게 생각해보면 setDoc은 데이터를 추가할 때

doc을 선택하거나 새로운 doc을 생성
doc의 내용을 덮어씀

의 방식으로 동작하는 것이다.

Doc을 선택하는 방법은 doc 함수를 사용하는 것이다. doc() 함수는 DocumentReference instance를 반환한다. 절대 경로를 사용하여 원하는 Document를 선택할 수 있다. 위에서 만들어둔 wiki > completed 문서는 아래처럼 불러올 수 있다.

import { doc } from "firebase/firestore";

const docRef = doc(db, "wiki", "completed");

doc 함수의 3번째 인자가 바로 id 이다. id는 이미 존재하는 Doc의 id를 사용할 수도 있고, 새로운 id를 사용할 수도 있다. 존재하는 id를 사용하는 경우에는 해당 Doc의 데이터를 덮어쓰게 된다. 그렇지 않은 경우엔 새로운 Doc를 생성한다.

어쨌거나 데이터를 새로 추가할 수 있는 것이다.

Firestore 데이터 수정하기

Firestore의 데이터를 수정하는 방법은 크게 두가지이다.

Firebase console에서 손수 데이터 수정해주기
코드로 데이터 수정하기

1번은 데이터 생성과 비슷하게 진행하면 된다.

2. 코드로 데이터 수정하기

Firestore는 setDoc, update 두 가지 함수로 데이터를 추가할 수 있다.

setDoc을 사용하는 방법은 위에 적혀있다.

`update`

setDoc은 데이터를 덮어쓴다. 따라서 기존의 문서를 유지한 채 일부분의 데이터만 변경하고 싶어도 이전의 데이터를 모두 새로 입력해야 한다.

그러나 update는 기존의 데이터를 유지한 채 일부분의 데이터만 변경할 수 있다.

import { updateDoc, doc } from "firebase/firestore";

await updateDoc(doc(db, "wiki", "new-id"), {
  description: "허먼밀러...200만원...",
});

위와 같이 코드를 작성하면 new-id라는 id를 가진 문서의 description만 변경된다.

참조

Firebase