8. Get() 데이터 (+ source 분석)

 

Firebase Codelab : 8. Get() 데이터

Firebase github    :  View Source 

 

(getRestaurants) 특정 레스토랑을 누르면 해당 레스토랑 평점이 뜨게 하는 함수

 

 

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

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

 

 function getRestaurants

FriendlyEats.prototype.getRestaurant = function(id) {
  return firebase.firestore().collection('restaurants').doc(id).get();
};

 

 

 

Terminal - hosting

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

 

chrome browser -  localhost:5002

아무거나 레스토랑이나 누르면

 

 

 

---

 

음 이제 슬슬 소스 한번 분석하고 가야겠다...

ㄴ> 라고 쓰고 하다보니 '시작해야할 지점'이 완전 틀렸음을 깨닫고

아예 '소스 분석' 게시글을 하나 더 팠다; 역시 멍청하면 몸이 고생!

아래는 완전 의식의 흐름, 중구난방이라 빠르게 훑기만 하고

다음 게시글에서 최대한...  정리했다.

 

 

---

 

<friendlyeats-web 프로젝트 하위 파일들>

ㄴnextjs-end

ㄴnextjs-start       //   음.. nextjs 안배워서 모른다.

ㄴreactfire-end

ㄴreactfire-start    //  음.. react 배웠는데... 컴포넌트 가져오는구나... 그렇구나...firebase 연동 설정이 매우 많은 듯... 흠...

 

ㄴvanilla-js \ scripts

   ㄴFriendlyEats.Data.js    // Firebase 연동해서 사용하는 6개의 함수...

   ㄴFriendlyEats.js

   ㄴFriendlyEats.Mock.js

   ㄴFriendlyEats.View.js

 

ㄴindex.html

   ㄴ최하단에 (vanilla-js \ scripts \ 4개 js) import

   ㄴ데이터는 어떻게 뿌리는지 찾기

 

---

 

 

(1) hosting하고 크롬에서 [개발자도구\Elements 선택 도구]

선택한 element 요소의 id, class

<  div   id="cards"  class="mdc-layout-grid__inner"  >

선택한 element 요소의 2단계 상위 태그의 id, class

<  div    class="template"  id="main-adjusted" >

그럼  vs code 의 index.html 에서 찾는다.

(class는 동일하게 쓰이는 곳이 많을테니 검색만 id로)

 

 

보통 class 이름만 보고 대충 파악이 되는데 '독창성'이 느껴지는 단어(like mdc)면

(1) (해당 기능, 소스를 지닌) 파일을 가져오고 있거나

(2) script CDN을 썼거나

하지 않을까 추측한다. 구글링하면 된다. 

 

 

구글링 mdc-layout-grid__inner

머터리얼 디자인...  대충 보고 온다.

 

참고 문헌

 - [web] material icon 사용방법

 

quick start(CDN)이 있었구나..

오키오키...

 

css는 대충 보았다 치고,

이제 firebase의 데이터는? 어디서 어떻게? 가져오는지 소스 분석.

 

1개의 레스토랑 데이터는 어떻게 지정해서 가져오나?

id="restaurant-card"

이것이 1개의 레스토랑을 뿌리는 id 같다.

정적인 화면 html에 -> 동적으로 데이터를 뿌려주는 js.

그 js에서 id="restaurant-card"인 요소를 찾을 것 같다.

 

script\4개의 js에서 검색해보니

 

script\FirendlyEats.View.js에서

('restaurant-card'에 data를 담아서) 템플릿 렌더하는 소스 발견.

 

 

 

(사진 참고)

전체 함수를 길게 보면... viewList는

FirendlyEats.prototype.viewList = function() {   // ~  라는 함수에
   ...
   var renderer = { // 란 변수가 있고
      remove : function(doc) { // key remove로 들어오면 수행할 함수가 value로 있고
      ...
      },
      display : functioin(doc) { //  key display로 들어오면 수행할 함수가 value로 있다.
      ...
         var el = that. renderTemplate('restaurant-card', data);  // template을 render하란게 있다.
      },
      
   ...
   }

 

아하. 그러면 어디선가 viewList를 쓰는데

그 때 renderer는 key로 remove, display, empty를 쓰고

해당 key에 따른 함수 안의 소스를 수행하나 보다.

 

개발할 땐(언어 상관없이), 

어느 위치 depth 에서 

어떤 형태의  key:value, key=value 구조인지를 파악하고

그 key에 담긴 value가 어떤 구조인지(단순 property인지, function인지) 파악하는게 중요하다.

 

 

renderer 변수 종료 블록을 지나면

var renderer = {
	... // (key remove, display, empty 세팅 지나가요..)
   }
};      // renderer 블록이 닫히는 곳에서 내려가면

if (filters.city || filters.category || filters.price || filters.sort !== 'Rating' ) {
    this.getFilteredRestaurants({
      city: filters.city || 'Any',
      category: filters.category || 'Any',
      price: filters.price || 'Any',
      sort: filters.sort
    }, renderer);
} else {
	this.getAllRestaurants(renderer);
}

 

만약 필터 조건이 있으면

    this.getFilteredRestaurants({ 

없으면

    this.getAllRestaurants(renderer);

하라는 소스가 있다.

이 어디서 많이 본 것 같은 명칭은?

 

[7. Cloud Firestore의 데이터 표시] 할 때 작성했던 Data.js 파일 속 그 함수.

그 getAllRestaurants 함수인 걸 알 수 있다.

 

결론! viewList가 getAllRestaurants 함수를 호출한다!

getAllRestaurants는 query를 생성하고

viewList에서 받아온 renderer(remove, display, empty 곁들인)를

getDocumentInQuery호출하고 인자로 보낸다.

 

 

그럼  [8. Get() 데이터] getRestaurant 함수는

FriendlyEats.prototype.getRestaurant = function(id) {
  return firebase.firestore().collection('restaurants').doc(id).get();
};

firebase의 최상위 컬렉션 restaurants의 문서 id (함수 인자값)으로 get 하란 건데

인자parameter id는 어디서?

getRestaurant를 호출하는 곳을 찾아본다.

 

▶︎ script \ FirendlyEats.View.js \ FriendlyEats.prototype.viewRestaurant

그러면 viewRestaurant을 또 찾는다

 

▶︎ script \ FirendlyEats.js \ FriendlyEats.prototype.initRouter

 

아까는 화면View.js에서  ➡️ 데이터Data.js 로 찾아갔지만

이번엔 데이터Data.js     ➡️  화면View.js로 찾아본 것이다. (스스로도 의식흐름이라 정신없음)

 

initRouter 소스 중간에

this.router

  .on({ ...

     document.location.pathname  가 뭔데 구분자 /로 split하는지 궁금.

console 출력 소스 입력 후,

FirendlyEats 앱에서 레스토랑을 다르게 클릭해본다.

FriendlyEats.prototype.initRouter = function() {
	// ...
    
    this.router
    //...
	.on({
      '/restaurants/*': function() {
        console.log(document.location.pathname);
        var path = that.getCleanPath(document.location.pathname);
        var id = path.split('/')[2];
        that.viewRestaurant(id);
      }
    })
    
	//...
}

 

 

document.location.pathname = /retaurants/z5Ederiz5ZOtp..

pathname를 구분자 /로 split해서 idx 2로 가져오면 그게 id가 되고

그 id는 

View.js - viewRestaurant(id);                // 여기 param으로 넘겨지고

Data.js - getRestaurant = function(id) // 여기 param으로 넘겨지고

...  doc(id) 문서에서 찾는 것!  

 

저 id 형식도 어디서 본 것 같다.

Cloud Firestore로 가본다.

최상위 collection restaurants 하위 문서에 비슷하게 생긴 문자열이 있다.

마구 분석하다 보니 이 db의 id를 화면에 뿌린건지, 화면에서 id를 생성하고 db에 넣은건지...;

 

 

우측 '쿼리 빌더'로 조회하면 오..

[경로 = /restaurants] 가 보인다.

[path = that.getCleanPath(document.location.pathname) = /restaurants] 이거겠구나.

'Document ID'도 컬럼명으로 보인다.

 

 

 

 

앗. 이제 보니

▶︎ script \ FirendlyEats.js \ FriendlyEats.prototype.data

words,
cities,
categories,
ratings,

데이터도 다 있었다. 거기서부터 화면 load 되는 부분부터 분석해야지.