8. Get() 데이터 (+ source 분석)
Firebase Codelab : 8. Get() 데이터
Firebase github : View Source
로컬에 클론해서 받았던 '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을 썼거나
하지 않을까 추측한다. 구글링하면 된다.
머터리얼 디자인... 대충 보고 온다.
참고 문헌
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 하위 문서에 비슷하게 생긴 문자열이 있다.
우측 '쿼리 빌더'로 조회하면 오..
[경로 = /restaurants] 가 보인다.
[path = that.getCleanPath(document.location.pathname) = /restaurants] 이거겠구나.
'Document ID'도 컬럼명으로 보인다.
앗. 이제 보니
▶︎ script \ FirendlyEats.js \ FriendlyEats.prototype.data
words,
cities,
categories,
ratings,
데이터도 다 있었다. 거기서부터 화면 load 되는 부분부터 분석해야지.