Firebase를 활용한 실시간 데이터베이스 구축법

Firebase를 활용한 실시간 데이터베이스 구축 방법

최근 많은 웹 애플리케이션에서 실시간 데이터 관리가 필요해지면서, Firebase의 실시간 데이터베이스 기능이 각광받고 있습니다. Firebase를 통해 데이터를 클라우드에 저장하고, 모든 클라이언트에게 실시간으로 동기화할 수 있습니다. 본 글에서는 Firebase를 활용하여 실시간 데이터베이스를 구축하는 방법을 상세히 설명드리겠습니다.

1. Firebase 프로젝트 생성

Firebase를 사용하기 위해서는 먼저 프로젝트를 생성해야 합니다. Firebase Console에 접속하여 새 프로젝트를 만들어주세요. 프로젝트 이름을 입력한 후 필요한 설정을 완료하시면 됩니다. 이 과정 후, 웹 애플리케이션을 추가하여 Firebase SDK 구성을 진행할 수 있습니다.

2. Firebase SDK 설치 및 초기화

프로젝트를 설정한 후, Firebase JavaScript SDK를 설치해야 합니다. 터미널에서 아래 명령어 중 하나를 입력하여 Firebase를 설치할 수 있습니다:

• $ npm install firebase
• $ yarn add firebase

설치가 완료되면, Firebase를 초기화하고 실시간 데이터베이스를 가져오는 코드가 필요합니다. 다음은 그 예시입니다:

import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';
const firebaseConfig = {
 databaseURL: "https://DATABASE_NAME.asia-southeast1.firebasedatabase.app",
};
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

3. 데이터베이스 설계 및 초기 데이터 설정

데이터베이스 설계에 들어가면, Firebase Console에서 초기 데이터를 수동으로 입력할 수 있습니다. 데이터베이스에 접속하면 주소만 있는 빈 상태를 확인할 수 있습니다. 여기에 직접 초기 데이터를 입력하여 저장할 수 있습니다.

1. 주소에 마우스를 올리면 + 버튼이 나타납니다. 클릭하여 새로운 데이터를 추가합니다.

2. key에 데이터의 이름을 입력한 후, 옆의 + 버튼을 눌러 경로를 지정합니다.

3. key와 value를 모두 입력하면 새로운 객체가 생성되고, key만 입력하면 배열 형태로 데이터가 저장됩니다. 모든 입력 후, 엔터키를 눌러야 저장됩니다. 화면을 이동하면 입력한 데이터가 사라지므로 주의해야 합니다.

4. 데이터 읽기 및 업데이트

데이터를 읽어오기 위해서는 get() 메서드를 사용합니다. 이 메서드는 특정 경로에서 데이터를 가져오고, 데이터가 있는 경우 이를 스냅샷 형태로 반환합니다. 다음은 데이터를 읽어오는 방법입니다:

import { ref, get } from "firebase/database";
import { database } from "../config/firebase_config";
export async function fetchProducts() {
 const snapshot = await get(ref(database, 'products'));
 if (snapshot.exists()) {
  const data = snapshot.val();
  return Object.values(data);
 }
}

데이터를 업데이트하기 위해서는 set() 메서드를 사용합니다. 이때, 데이터 경로가 겹치지 않도록 주의해야 하며, 가급적 UUID를 사용하여 고유한 경로로 데이터를 추가하는 것이 좋습니다.

import { ref, set } from "firebase/database";
import { database } from "../config/firebase_config";
import { v4 as uuid } from "uuid";
export async function addProduct(productData) {
 await set(ref(database, products/${uuid()}), productData);
}

5. 데이터 삭제

데이터를 삭제할 필요가 있을 경우, remove() 메서드를 사용할 수 있습니다. 삭제할 데이터의 경로를 정확하게 지정해주면 해당 데이터가 삭제됩니다. 다음은 삭제하는 방법입니다:

import { ref, remove } from "firebase/database";
import { database } from "../config/firebase_config";
export async function deleteProduct(productId) {
 await remove(ref(database, products/${productId}));
}

6. 데이터베이스 보안 규칙 설정

Firebase 실시간 데이터베이스를 사용할 때 주의해야 하는 점은 데이터 보안입니다. Firebase Console의 보안 규칙에서 초기 설정을 테스트 모드로 설정할 수 있습니다. 이는 모든 사용자가 데이터를 읽고 쓸 수 있도록 해줍니다. 하지만 이 상태로 서비스를 운영하면 안 됩니다. 적절한 인증과 권한 설정을 통해 데이터 접근을 제한해야 합니다.

테스트 완료 후, Firebase의 보안 규칙을 검토하고 필요에 따라 적절한 권한을 설정하시는 것을 권장합니다.

결론

Firebase를 활용한 실시간 데이터베이스 구축은 매우 유용한 경험이 될 수 있습니다. 데이터가 클라우드에 저장되고, 모든 클라이언트와 실시간으로 동기화되어 사용자에게 항상 최신 정보를 제공할 수 있습니다. 본 포스트에서 설명한 단계를 따라 Firebase를 연동해 보시고, 귀하의 웹 애플리케이션에 실시간 데이터 기능을 추가해보시기 바랍니다.

자주 묻는 질문 FAQ