9. 데이터 정렬 및 필터링

 

 

 

Firebase Codelab : 9. 데이터 정렬 및 필터링

Firebase github    :  View Source 

 

 

현재 앱은 레스토랑 목록을 표시하지만 사용자가 필요에 따라 필터링할 수 있는 방법은 없습니다.

이 섹션에서는 Cloud Firestore의 고급 쿼리를 사용하여 필터링을 사용 설정합니다.

 

 

로컬에 클론해서 받았던 'friendlyeats-web' 경로에서 vs code 실행.

vanilla-js \ scripts \ FriendlyEats.Data.js 열기

 function getFilteredRestaurants

FriendlyEats.prototype.getRestaurant = function(id) {
    var query = firebase.firestore().collection('restaurants');
      if (filters.category !== 'Any') {
        query = query.where('category', '==', filters.category);
      }
      if (filters.price !== 'Any') {
        query = query.where('price', '==', filters.price.length);
      }
      if (filters.sort !== 'Rating') {
        query = query.orderBy('avgRating', 'desc');
      } else if (filters.sort === 'Reviews') {
        query = query.orderBy('numRatings', 'desc');
      }

      this.getDocumentsInQuery(query, renderer);
};

 

 

Terminal - hosting

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

 

chrome browser -  localhost:5002

미리 개발자 도구를 연다.

Filter bar를 눌러서 Filter 조건을 선택 후, 'ACCEPT'를 누른다. 

그럼 필터링이 되긴 되는데...

 

Codelab 문서의 

'테스트하는 동안 브라우저의 JavaScript 콘솔에 다음과 비슷한 오류가 표시... The query requires an index. ...

 Cloud Firestore에 대부분의 복합 쿼리에 대한 색인(index)가 없어서... 쿼리에 index가 있으면 규모에 상관없이 Cloud Firestore의 속도가 빨라짐...

 오류 메시지에서 링크를 열면 Firebase Console에서 올바른 매개변수가 채워진 색인 생성 UI가 자동으로...'

 

나는 링크를 안 눌렀는데도 새로고침이나 그런게 자동으로 되는건지 저 문구가 10번 시도 중 1번 보인다. 

 

예시를 위해 safari에서 뜨는 걸 확인.

뜬다고 해결 안되는 오류라기보다, 문서대로 저 뒤의 링크를 누르면 자동 색인이 생성되서 더이상 저런 오류 로그가 안 뜬다고 함.

▶︎ 를 누르면 링크가 보인다.

저 링크를 누르면 자동 색인 생성된다. (본인은 안 누름...)