JavaScript로 설치 및 설정

Firebase 실시간 데이터베이스는 클라우드에 호스팅되는 데이터베이스입니다. 데이터는 JSON으로 저장되며 연결된 모든 클라이언트에 실시간으로 동기화됩니다. Android, Apple 플랫폼, JavaScript SDK로 크로스 플랫폼 앱을 개발하는 경우 모든 클라이언트가 하나의 실시간 데이터베이스 인스턴스를 공유하고 자동 업데이트로 최신 데이터를 수신합니다.

기본 요건

아직 진행하지 않았다면 Firebase JS SDK를 설치하고 Firebase를 초기화합니다.

데이터베이스 만들기

  1. Firebase Console의 Realtime Database 섹션으로 이동합니다. 기존 Firebase 프로젝트를 선택하라는 메시지가 표시됩니다. 데이터베이스 만들기 워크플로를 따릅니다.

  2. Firebase Security Rules의 시작 모드를 선택합니다.

    테스트 모드

    모바일과 웹 클라이언트 라이브러리를 시작할 때 유용하지만 모든 사람이 데이터를 읽고 덮어쓸 수 있습니다. 테스트 완료 후 Firebase 실시간 데이터베이스 규칙 이해 섹션을 검토해야 합니다.

    웹, Apple 또는 Android SDK를 시작하려면 테스트 모드를 선택하세요.

    잠금 모드

    모바일과 웹 클라이언트의 모든 읽기와 쓰기를 거부합니다. 인증된 애플리케이션 서버에서는 사용자의 데이터베이스에 계속 액세스할 수 있습니다.

  3. 데이터베이스의 위치를 선택합니다.

    데이터베이스 위치에 따라 새 데이터베이스의 URL이 다음 형식 중 하나로 지정됩니다.

    • DATABASE_NAME.firebaseio.com(us-central1의 데이터베이스)

    • DATABASE_NAME.REGION.firebasedatabase.app(다른 모든 위치의 데이터베이스)

  4. 완료를 클릭합니다.

Realtime Database를 사용 설정하면 Cloud API Manager의 API도 사용 설정됩니다.

Realtime Database Security Rules 구성

Realtime Database가 제공하는 선언적 규칙 언어로 데이터의 구조, 색인 생성 방법, 데이터를 읽고 쓸 수 있는 조건을 정의할 수 있습니다.

Realtime Database JS SDK 추가 및 Realtime Database 초기화

JavaScript SDK를 초기화할 때 Realtime Database URL을 지정해야 합니다.

Firebase Console의 Realtime Database 섹션에서 Realtime Database URL을 확인할 수 있습니다. 데이터베이스 위치에 따라 데이터베이스 URL이 다음 형식 중 하나로 지정됩니다.

  • https://DATABASE_NAME.firebaseio.com(us-central1의 데이터베이스)
  • https://DATABASE_NAME.REGION.firebasedatabase.app(다른 모든 위치의 데이터베이스)

다음 코드 스니펫을 사용하여 SDK를 초기화합니다.

Web 

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
};

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


// Initialize Realtime Database and get a reference to the service
const database = getDatabase(app);

Web 

import firebase from "firebase/app";
import "firebase/compat/database";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Realtime Database and get a reference to the service
const database = firebase.database();

이제 Firebase Realtime Database 사용 준비가 완료되었습니다.

다음 단계