Cloud Firestore 사용해 보기: Firebase와 Google Cloud Platform의 유연하며 확장 가능한 데이터베이스를 살펴보세요. Cloud Firestore 자세히 알아보기

웹에서 데이터 읽기 및 쓰기

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

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

// Get a reference to the database service
var database = firebase.database();

데이터 읽기 및 쓰기

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

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

기본 쓰기 작업

기본 쓰기 작업의 경우 set()를 사용하여 지정된 참조에 데이터를 저장하고 기존 경로의 모든 데이터를 대체할 수 있습니다. 예를 들어 소셜 블로깅 앱은 다음과 같이 set()로 사용자를 추가할 수 있습니다.

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

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

값 이벤트 수신 대기

경로에서 데이터를 읽고 변경사항을 수신 대기하려면 on() 또는 once() 메소드(firebase.database.Reference)를 사용하여 이벤트를 관찰합니다.

이벤트 일반적인 용도
value 경로의 전체 내용을 읽고 변경을 수신 대기합니다.

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

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

var starCountRef = firebase.database().ref('posts/' + postId + '/starCount');
starCountRef.on('value', function(snapshot) {
  updateStarCount(postElement, snapshot.val());
});

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

데이터 한 번 읽기

변경을 수신 대기하지 않고 단순히 데이터의 스냅샷만 필요한 경우가 있습니다. 이후에 변경되지 않는 UI 요소를 초기화할 때가 그 예입니다. 이러한 경우 once() 메소드를 사용하면 시나리오가 단순해집니다. 이 메소드는 한 번 호출된 후 다시 호출되지 않습니다.

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

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

데이터 업데이트 또는 삭제

특정 필드 업데이트

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

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

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

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);
}

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

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

완료 콜백 추가

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

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

데이터 삭제

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

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

Promise 수신

Promise를 사용하여 Firebase 실시간 데이터베이스 서버에 데이터가 커밋되는 시점을 확인할 수 있습니다. set()update()는 쓰기 작업이 데이터베이스에 커밋되는 시점을 알려주는 Promise를 반환할 수 있습니다.

리스너 분리

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

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

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

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

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

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

function toggleStar(postRef, uid) {
  postRef.transaction(function(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;
  });
}

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

오프라인으로 데이터 쓰기

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

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

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

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

다음 단계

다음에 대한 의견 보내기...

Firebase 실시간 데이터베이스
도움이 필요하시나요? 지원 페이지를 방문하세요.