7. Cloud Firestore의 데이터 표시

 
Firebase Codelab : 7. Cloud Firestore의 데이터 표시
Firebase github    :  View Source 
 

아무것도 안 뜨던 화면에서 레스토랑 목록을 조회 (getAllRestaurants, getDocumentsInQuery)

 
 
로컬에 클론해서 받았던 'friendlyeats-web' 경로에서 vs code 실행.
vanilla-js \ scripts \ FriendlyEats.Data.js 열기
 

function getAllRestaurants

FriendlyEats.prototype.getAllRestaurants = function(renderer) {
  var query = firebase.firestore()
      .collection('restaurants')
      .orderBy('avgRating', 'desc')
      .limit(50);

  this.getDocumentsInQuery(query, renderer);
};

인자로 받아온 renderer.
firebase의 컬렉션을 가져오고
정렬하고
갯수 리미트한 query.
2개를 하단 함수에 인자로 넘긴다.
 
 

function getDocumentsInQuery

FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
  query.onSnapshot(function(snapshot) {
    if (!snapshot.size) return renderer.empty(); // Display "There are no restaurants".

    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        renderer.remove(change.doc);
      } else {
        renderer.display(change.doc);
      }
    });
  });
};

snapshot이 어디서 튀어나왔징? 콜백함수의 결과값인가...?
 
snapshot이 없으면 renderer.empty() 함수를 돌려줘라.

이 때 renderer.empty() 함수, 그리고

하단에 change.type에 따라서

renderer.remove() 함수

renderer.display() 함수가 나오는데

 

FriendlyEats.View.js \ viewList 함수에서

var renderer =

key : val(function) 형태로 저장된 함수 호출이다.

 

렌더링할게 없거나

doc을 렌더링에서 제거하거나

doc을 렌더링해서 보여주거나 그런거로만 이해했다.

 
 
 
 
 
 
Terminal - hosting

friendlyeats-web/vanilla-js> $ firebase emulators:start --only hosting

 

chrome browser -  localhost:5002

[6. Cloud Firestore에 데이터 쓰기]에서 firebase에 넣은 컬렉션의 문서를

가져와서 렌더링 display한 화면이다.