웹에서 데이터 읽기 및 쓰기

(선택사항) Firebase Local Emulator Suite으로 프로토타입 제작 및 테스트

앱이 Realtime Database의 데이터를 읽고 쓰는 방법에 대해 설명하기 전에 Realtime Database 기능을 프로토타입으로 제작하고 테스트하는 데 사용할 수 있는 도구 모음인 Firebase Local Emulator Suite을 소개합니다. 다양한 데이터 모델을 사용해 보거나, 보안 규칙을 최적화하거나, 백엔드와 상호작용할 수 있는 가장 비용 효율적인 방법을 찾는 경우 라이브 서비스를 배포하지 않고 로컬에서 작업할 수 있다면 큰 도움이 될 것입니다.

Realtime Database 에뮬레이터는 Local Emulator Suite의 일부이며 앱에서 에뮬레이션된 데이터베이스 콘텐츠와 구성은 물론 필요에 따라 에뮬레이션된 프로젝트 리소스(함수, 기타 데이터베이스, 보안 규칙)와 상호작용할 수 있게 해줍니다.

Realtime Database 에뮬레이터를 사용하려면 다음 몇 단계만 거치면 됩니다.

1. 에뮬레이터에 연결하려면 앱의 테스트 구성에 코드 줄을 추가합니다.
2. 로컬 프로젝트 디렉터리의 루트에서 firebase emulators:start를 실행합니다.
3. 평소와 같이 Realtime Database 플랫폼 SDK를 사용하거나 Realtime Database REST API를 사용하여 앱의 프로토타입 코드에서 호출합니다.

자세한 내용은 Realtime Database 및 Cloud Functions 관련 둘러보기를 참조하세요. Local Emulator Suite 소개도 살펴보세요.

데이터베이스 참조 가져오기

데이터베이스에서 데이터를 읽거나 쓰려면 firebase.database.Reference의 인스턴스가 필요합니다.

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

var database = firebase.database();
index.js

데이터 쓰기

이 문서에서는 데이터 검색의 기초와 함께 Firebase 데이터를 정렬 및 필터링하는 방법을 설명합니다.

Firebase 데이터를 검색하려면 firebase.database.Reference에 비동기 리스너를 연결합니다. 리스너는 데이터의 초기 상태가 확인될 때 한 번 트리거된 후 데이터가 변경될 때마다 다시 트리거됩니다.

기본 쓰기 작업

기본 쓰기 작업의 경우 set()을 사용하여 지정된 참조에 데이터를 저장하고 해당 경로의 기존 데이터를 모두 바꿉니다. 예를 들어 소셜 블로깅 애플리케이션에서는 다음과 같이 set()을 사용하여 사용자를 추가할 수 있습니다.

import { getDatabase, ref, set } from "firebase/database";

function writeUserData(userId, name, email, imageUrl) {
  const db = getDatabase();
  set(ref(db, 'users/' + userId), {
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}
rtdb_write_new_user.js

function writeUserData(userId, name, email, imageUrl) {
  firebase.database().ref('users/' + userId).set({
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}
read-and-write.js

set()을 사용하면 하위 노드를 포함하여 지정된 위치의 데이터를 덮어씁니다.

데이터 읽기

값 이벤트 수신 대기

경로의 데이터를 읽고 변경사항을 수신 대기하려면 onValue()를 사용하여 이벤트를 관찰합니다. 이 이벤트는 이벤트 발생 시점에 특정 경로에 있던 콘텐츠의 정적 스냅샷을 읽는 데 사용할 수 있습니다. 이 메서드는 리스너가 연결될 때 한 번 트리거된 후 하위 요소를 포함하여 데이터가 변경될 때마다 다시 트리거됩니다. 하위 데이터를 포함하여 해당 위치의 모든 데이터를 포함하는 스냅샷이 이벤트 콜백에 전달됩니다. 데이터가 없는 경우 스냅샷은 exists() 호출 시 false를 반환하고 val() 호출 시 null을 반환합니다.

다음은 소셜 블로깅 애플리케이션이 데이터베이스에서 게시물의 별표 수를 검색하는 예시입니다.

import { getDatabase, ref, onValue } from "firebase/database";

const db = getDatabase();
const starCountRef = ref(db, 'posts/' + postId + '/starCount');
onValue(starCountRef, (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});
rtdb_social_listen_star_count.js

var starCountRef = firebase.database().ref('posts/' + postId + '/starCount');
starCountRef.on('value', (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});
read-and-write.js

리스너는 이벤트 발생 시점에 데이터베이스에서 지정된 위치에 있던 데이터를 포함하는 snapshot을 수신합니다. val() 메서드를 사용하여 snapshot의 데이터를 검색할 수 있습니다.

데이터 한 번 읽기

get()을 사용하여 데이터 한 번 읽기

SDK는 앱이 온라인이든 오프라인이든 상관없이 데이터베이스 서버와의 상호작용을 관리하도록 설계되었습니다.

일반적으로 위에서 설명한 value 이벤트 기법을 사용하여 데이터를 읽어 백엔드에서 데이터에 대한 업데이트 알림을 수신해야 합니다. 리스너 기법은 사용량과 청구 비용을 줄여주며 사용자가 온라인과 오프라인으로 전환할 때 최상의 환경을 제공하도록 최적화되어 있습니다.

데이터가 한 번만 필요한 경우 get()을 사용하여 데이터베이스에서 데이터의 스냅샷을 가져올 수 있습니다. 어떠한 이유로든 get()이 서버 값을 반환할 수 없는 경우 클라이언트는 로컬 스토리지 캐시를 프로브하고 값을 여전히 찾을 수 없으면 오류를 반환합니다.

불필요한 get() 사용은 대역폭 사용을 증가시키고 성능 저하를 유발할 수 있지만 위와 같이 실시간 리스너를 사용하면 이를 방지할 수 있습니다.

import { getDatabase, ref, child, get } from "firebase/database";

const dbRef = ref(getDatabase());
get(child(dbRef, `users/${userId}`)).then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});
rtdb_read_once_get.js

const dbRef = firebase.database().ref();
dbRef.child("users").child(userId).get().then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});
read-and-write.js

관찰자를 사용하여 데이터 한 번 읽기

경우에 따라 서버의 업데이트된 값을 확인하는 대신 로컬 캐시의 값을 즉시 반환하고 싶을 수 있습니다. 이 경우에는 once()를 사용하여 로컬 디스크 캐시에서 데이터를 즉시 가져올 수 있습니다.

이 방법은 한 번 로드된 후 자주 변경되지 않거나 능동적으로 수신 대기할 필요가 없는 데이터에 유용합니다. 예를 들어 위 예제의 블로깅 앱에서는 사용자가 새 게시물을 작성하기 시작할 때 이 메소드로 사용자의 프로필을 로드합니다.

import { getDatabase, ref, onValue } from "firebase/database";
import { getAuth } from "firebase/auth";

const db = getDatabase();
const auth = getAuth();

const userId = auth.currentUser.uid;
return onValue(ref(db, '/users/' + userId), (snapshot) => {
  const username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  // ...
}, {
  onlyOnce: true
});
rtdb_social_single_value_read.js

var userId = firebase.auth().currentUser.uid;
return firebase.database().ref('/users/' + userId).once('value').then((snapshot) => {
  var username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  // ...
});
read-and-write.js

데이터 업데이트 또는 삭제

특정 필드 업데이트

다른 하위 노드를 덮어쓰지 않고 특정 하위 노드에 동시에 쓰려면 update() 메서드를 사용합니다.

update()을 호출할 때 키 경로를 지정하여 더 낮은 수준의 하위 항목 값을 업데이트할 수 있습니다. 확장성 개선을 위해 데이터를 여러 위치에 저장한 경우 데이터 팬아웃을 사용하여 해당 데이터의 모든 인스턴스를 업데이트할 수 있습니다.

예를 들어 소셜 블로깅 애플리케이션에서 다음과 같은 코드를 사용하여 게시물을 만든 후 최근 활동 피드 및 게시자의 활동 피드에 동시에 업데이트할 수 있습니다.

import { getDatabase, ref, child, push, update } from "firebase/database";

function writeNewPost(uid, username, picture, title, body) {
  const db = getDatabase();

  // A post entry.
  const postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  const newPostKey = push(child(ref(db), 'posts')).key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  const updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return update(ref(db), updates);
}
rtdb_social_write_fan_out.js

function writeNewPost(uid, username, picture, title, body) {
  // A post entry.
  var postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  var newPostKey = firebase.database().ref().child('posts').push().key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  var updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return firebase.database().ref().update(updates);
}
read-and-write.js

이 예시에서는 push()를 사용하여 모든 사용자의 게시물을 포함하는 노드(/posts/$postid)에서 게시물을 작성하는 동시에 키를 검색합니다. 그런 다음 이 키를 사용하여 /user-posts/$userid/$postid에서 사용자의 게시물에 두 번째 항목을 작성합니다.

이 경로를 사용하면 이 예시에서 두 위치에 새 게시물을 생성한 것처럼 update()를 한 번만 호출하여 JSON 트리의 여러 위치에서 동시에 업데이트를 수행할 수 있습니다. 이러한 동시 업데이트는 원자적인 성격을 갖습니다. 즉, 모든 업데이트가 한 번에 성공하거나 실패합니다.

완료 콜백 추가

데이터가 커밋되는 시점을 파악하려면 완료 콜백을 추가합니다. set() 및 update()는 모두 쓰기가 데이터베이스에 커밋되었을 때 호출되는 선택적 완료 콜백을 사용합니다. 호출이 실패하면 콜백에 실패 이유를 나타내는 오류 객체가 전달됩니다.

import { getDatabase, ref, set } from "firebase/database";

const db = getDatabase();
set(ref(db, 'users/' + userId), {
  username: name,
  email: email,
  profile_picture : imageUrl
})
.then(() => {
  // Data saved successfully!
})
.catch((error) => {
  // The write failed...
});
rtdb_social_completion_callback.js

firebase.database().ref('users/' + userId).set({
  username: name,
  email: email,
  profile_picture : imageUrl
}, (error) => {
  if (error) {
    // The write failed...
  } else {
    // Data saved successfully!
  }
});
read-and-write.js

데이터 삭제

데이터를 삭제하는 가장 간단한 방법은 해당 데이터 위치의 참조에 remove()를 호출하는 것입니다.

set() 또는 update() 등의 다른 쓰기 작업 값으로 null을 지정하여 삭제할 수도 있습니다. update()에 이 방법을 사용하면 API 호출 한 번으로 여러 하위 항목을 삭제할 수 있습니다.

Promise 수신

데이터가 Firebase Realtime Database 서버에 커밋되는 시점을 확인하려면 Promise를 사용하면 됩니다. set()와 update()는 쓰기가 데이터베이스에 커밋되는 시점을 확인하는 데 사용할 수 있는 Promise를 반환합니다.

리스너 분리

Firebase 데이터베이스 참조에 대해 off() 메서드를 호출하면 콜백이 삭제됩니다.

리스너 하나를 삭제하려면 off()에 매개변수로 전달합니다. 한 위치에서 인수 없이 off()를 호출하면 해당 위치의 모든 리스너가 삭제됩니다.

상위 리스너에 off()를 호출해도 하위 노드에 등록된 리스너가 자동으로 삭제되지 않습니다. 하위 리스너에도 off()를 호출하여 콜백을 삭제해야 합니다.

데이터를 트랜잭션으로 저장

증가 카운터와 같이 동시 수정으로 인해 손상될 수 있는 데이터를 다루는 경우 트랜잭션 작업을 사용할 수 있습니다. 이 작업에 업데이트 함수 및 선택적 완료 콜백을 지정할 수 있습니다. 업데이트 함수는 데이터의 현재 상태를 인수로 취하고 이 데이터에 새로 쓰려는 상태를 반환합니다. 새 값을 쓰기 전에 다른 클라이언트에서 해당 위치에 쓰기 작업을 수행하면 업데이트 함수가 새로운 현재 값으로 다시 호출되고 쓰기 작업이 재시도됩니다.

예를 들어 소셜 블로깅 앱에서는 다음과 같이 사용자가 게시물에 별표를 주거나 삭제할 수 있고 게시물이 별표를 몇 개 받았는지 집계할 수 있습니다.

import { getDatabase, ref, runTransaction } from "firebase/database";

function toggleStar(uid) {
  const db = getDatabase();
  const postRef = ref(db, '/posts/foo-bar-123');

  runTransaction(postRef, (post) => {
    if (post) {
      if (post.stars && post.stars[uid]) {
        post.starCount--;
        post.stars[uid] = null;
      } else {
        post.starCount++;
        if (!post.stars) {
          post.stars = {};
        }
        post.stars[uid] = true;
      }
    }
    return post;
  });
}
rtdb_social_star_transaction.js

function toggleStar(postRef, uid) {
  postRef.transaction((post) => {
    if (post) {
      if (post.stars && post.stars[uid]) {
        post.starCount--;
        post.stars[uid] = null;
      } else {
        post.starCount++;
        if (!post.stars) {
          post.stars = {};
        }
        post.stars[uid] = true;
      }
    }
    return post;
  });
}
read-and-write.js

트랜잭션을 사용하면 여러 사용자가 같은 게시물에 동시에 별표를 주거나 클라이언트 데이터의 동기화가 어긋나도 별표가 잘못 집계되지 않습니다. 트랜잭션이 거부되면 서버에서 현재 값을 클라이언트에 반환하며, 클라이언트는 업데이트된 값으로 트랜잭션을 다시 실행합니다. 트랜잭션이 성공하거나 취소될 때까지 이 과정이 반복됩니다.

서버 측 원자적 증분

위의 사용 사례에서는 두 가지 값, 즉 게시물에 별표표시를 하거나 별표를 삭제한 사용자의 ID와 증가된 별표 수를 데이터베이스에 씁니다. 사용자가 게시물에 별표표시를 하고 있다는 것을 이미 안다면 트랜잭션 대신 원자적 증분 작업을 사용할 수 있습니다.

function addStar(uid, key) {
  import { getDatabase, increment, ref, update } from "firebase/database";
  const dbRef = ref(getDatabase());

  const updates = {};
  updates[`posts/${key}/stars/${uid}`] = true;
  updates[`posts/${key}/starCount`] = increment(1);
  updates[`user-posts/${key}/stars/${uid}`] = true;
  updates[`user-posts/${key}/starCount`] = increment(1);
  update(dbRef, updates);
}
rtdb_social_star_increment.js

function addStar(uid, key) {
  const updates = {};
  updates[`posts/${key}/stars/${uid}`] = true;
  updates[`posts/${key}/starCount`] = firebase.database.ServerValue.increment(1);
  updates[`user-posts/${key}/stars/${uid}`] = true;
  updates[`user-posts/${key}/starCount`] = firebase.database.ServerValue.increment(1);
  firebase.database().ref().update(updates);
}
read-and-write.js

이 코드는 트랜잭션 작업을 사용하지 않으므로 충돌하는 업데이트가 있는 경우 코드가 자동으로 다시 실행되지 않습니다. 하지만 증분 작업은 데이터베이스 서버에서 직접 이루어지므로 충돌이 발생할 가능성은 없습니다.

사용자가 이전에 이미 별표표시한 게시물에 별표를 표시하는 상황처럼 애플리케이션별 충돌을 감지하고 거부하려면 해당 사용 사례에 대한 커스텀 보안 규칙을 작성해야 합니다.

오프라인으로 데이터 작업하기

클라이언트의 네트워크 연결이 끊겨도 앱은 계속 정상적으로 작동합니다.

Firebase 데이터베이스에 연결된 모든 클라이언트는 자체적으로 활성 데이터의 내부 버전을 유지합니다. 데이터를 쓰면 우선 로컬 버전에 기록됩니다. 그런 다음 Firebase 클라이언트가 해당 데이터를 원격 데이터베이스 서버 및 다른 클라이언트와 '최선을 다해' 동기화합니다.

이와 같이 데이터베이스에 대한 모든 쓰기 작업은 로컬 이벤트를 즉시 트리거하며, 그 이후에 서버에 데이터가 기록됩니다. 따라서 앱은 네트워크 지연 또는 연결 여부에 관계없이 응답성을 유지합니다.

네트워크에 다시 연결되면 앱에서 적절한 이벤트 세트를 수신하여 클라이언트와 현재 서버 상태를 동기화하므로 맞춤 코드를 별도로 작성할 필요가 없습니다.

오프라인 동작에 대한 자세한 내용은 온라인 및 오프라인 기능에 대해 자세히 알아보기에서 살펴보겠습니다.

다음 단계

• 데이터 목록 다루기
• 데이터 구조화 방법 알아보기
• 온라인 및 오프라인 기능에 대해 자세히 알아보기