2022년 10월 18일에 오프라인과 온라인으로 진행될 Firebase Summit에 참여하세요. Firebase로 앱을 빠르게 개발하고 안심하고 앱을 출시하며 손쉽게 확장하는 방법을 알아보세요. 지금 등록하기

자바스크립트에서 설치 및 설정

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

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

기본 요건

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

데이터베이스 만들기

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

  2. Firebase 보안 규칙의 시작 모드를 선택합니다.

    테스트 모드

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

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

    잠금 모드

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

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

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

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

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

  4. 완료를 클릭합니다.

실시간 데이터베이스를 사용 설정하면 Cloud API Manager의 API도 사용 설정됩니다.

실시간 데이터베이스 규칙 구성

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

실시간 데이터베이스 JS SDK 추가 및 실시간 데이터베이스 초기화

자바스크립트 SDK를 초기화할 때 실시간 데이터베이스 URL을 지정해야 합니다.

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

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

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

Web version 9 

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 version 8 

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


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

이제 Firebase 실시간 데이터베이스를 사용할 준비가 끝났습니다.

다음 단계