6. Cloud Firestore에 데이터 쓰기

 

6. Cloud Firestore에 데이터 쓰기

처음 보면 뭔 말인지 이해가 안됐음...

 

이런 말이다...

 

'Firebase Console을 통해 수동으로 수행할 수 있지만'

ㄴ 데이터를 'Firebase Console'에서 우리가 강제로 수동으로 넣을 수도 있지만,

(= 개발자가 sql 편집기에서 INSERT 쿼리 스크립트 수행해서 넣거나)

 

'앱 자체에서 이 작업을 수행하겠습니다.'

ㄴ 브라우저에서 열린 '앱' = 자체에서도 수행할 수 있단 뜻이었다.

(= 웹사이트에서 '추가' 버튼 누르면 이벤트 리스너로 db에 insert 동작되는)

 

[데이터 모델] 섹션은 Codelab이 Firestore 데이터에 대해 설명해주는 부분.

 

그냥 sql문으로 insert 때려넣기도 되고,

웹에서 기능 수행하면 저장된다는 그런 얘기인 듯?

 

 

참고 문헌

Cloud Firestore에서 단순 쿼리 및 복합 쿼리 실행

 

 

일단 Firebase Console \ Firestore Database  로 가본다.

수동으로 수행할 수 있다니까 어찌됐든 되겠지. 일단 대충 따라해보고 나중에 이해.

 

컬렉션 시작 \ 컬렉션 ID : restaurants

 

첫 번째 문서만 추가

문서 ID	restuarant-1
필드	avgRating
유형	number
값	2.75

-> 저장

 

 

하위 문서 ID에 'ratings' 컬렉션 시작.

 

restaurant-1 에 문서 추가

문서 ID	rating-1
필드	rating
유형	number
값	2

-> 저장

 

이런건가 보군. 그렇군... 일단 이렇군요.

인지만 하고 전부 삭제했다. 다음으로 넘어감...

---

 

● Firestore에 레스토랑 추가

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

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

 

Codelab에 적힌대로 소스 입력 후 저장.

 

 

---

10일차 - 소스 분석하다 [6. Cloud Firestore에 데이터 쓰기] addRestaurant 함수가 어떻게 뭘하고 있는건지

대충 파악됐다.

 

(1) Cloud Firebase Database에 넣을 데이터가 어딨는지 먼저 찾는다.

friendlyeats-web/vanilla-js/scripts/FriendlyEats.js 파일에

FriendlyEats.prototype.data = {
  words: [
    'Bar', 'Fire', 'Grill', 'Drive Thru', 
    'Place', 'Best', 'Spot', 'Prime', 'Eatin'
  ],
  cities: [
    'Albuquerque', 'Arlington', 'Atlanta', 'Austin', 
    'Baltimore', 'Boston', 'Charlotte', 'Chicago', 'Cleveland', 'Colorado Springs', 
    'Columbus', 'Dallas', 'Denver', 'Detroit', 'El Paso', 
    'Fort Worth', 'Fresno', 'Houston', 'Indianapolis', 'Jacksonville', 
    'Kansas City', 'Las Vegas', 'Long Island', 'Los Angeles', 'Louisville', 
    'Memphis', 'Mesa', 'Miami', 'Milwaukee', 'Nashville', 'New York', 
    'Oakland', 'Oklahoma', 'Omaha', 'Philadelphia', 'Phoenix', 'Portland', 'Raleigh', 
    'Sacramento', 'San Antonio', 'San Diego', 'San Francisco', 'San Jose', 
    'Tucson', 'Tulsa', 'Virginia Beach', 'Washington'
  ],
  categories: [
    'Brunch', 'Burgers', 'Coffee', 'Deli', 'Dim Sum', 'Indian', 
    'Italian', 'Mediterranean', 'Mexican', 'Pizza', 'Ramen', 'Sushi'
  ],
  ratings: [
    { rating: 1, text: 'Would never eat here again!' },
    { rating: 2, text: 'Not my cup of tea.' },
    { rating: 3, text: 'Exactly okay' },
    { rating: 4, text: 'Actually pretty good, would recommend!' },
    { rating: 5, text: 'This is my favorite place. Literally.' }
  ]
};

이미 입력된 data가 있다.

words : 단어

cities : 도시, 지역

categories : 음식 종류

ratings : 별점 넘버링에 따른 설명.

이 data들이 Cloud Firebase Database에 들어간다.

 

 

 

(2) addRestaurant 함수가 가장 먼저 호출되는 곳을 찾는다.

View.js \ button.addEventListener('click', function(event)  - addMockRestaurants() 호출
     ㄴ Mock.js \  addMockRestaurants - addRestaurant() 호출
          ㄴ Data.js \ addRestaurant 발동

 

click event는 style만 주고 있고

addMockRestaurant에서 (1)의 data로 변수에 setting한다.

var name = this.getRandomItem(this.data.words) +
    	   ' ' +
    	   this.getRandomItem(this.data.words);
var category = this.getRandomItem(this.data.categories);
var city = this.getRandomItem(this.data.cities);
var price = Math.floor(Math.random() * 4) + 1;
var photoID = Math.floor(Math.random() * 22) + 1;
var photo = 'https://storage.googleapis.com/firestorequickstarts.appspot.com/food_' + photoID + '.png';
var numRatings = 0;
var avgRating = 0;

 

이름 = words(단어) 중 랜덤 1개 + '띄어쓰기'  + words(단어) 중 랜덤 1개

카테고리 = categories(음식 종류) 중 랜덤 1개

도시 = cities(도시) 중 랜덤 1개

가격 = 숫자 랜덤 + 1

사진ID = 숫자 랜덤 + 1

사진 = 주소 + 사진ID + 확장자

평점 = 0

평균평점 = 0

 

그렇게 1개의 data 객체 생성해서

addRestaurant 함수에 보낸다.

FriendlyEats.prototype.addRestaurant = function(data) {
  /*
    TODO: Implement adding a document
  */
  var collection = firebase.firestore().collection('restaurants');
  return collection.add(data);
};

 

firebase의 firestore 객체 만들고 그 중 컬렉션을 가져오는데 컬렉션 이름은 'restaurants'.

그 컬렉션에 .추가(1개의 data 객체)

 

addMockRestaurants 에서 이런식으로

for문을 20번 도니까

addRestaurant도 20번 호출되면서 Firebase Database에 insert된거다.

 

 

 

---

 

 

vs code - Terminal 

# node 버전이 자꾸 최상위 v22.9.0로 자동 변경돼서 다운그레이드
friendlyeats-web/vanilla-js> $ node --version
v22.9.0
friendlyeats-web/vanilla-js> $ nvm use v20.16.0
friendlyeats-web/vanilla-js> $ firebase emulators:start --only hosting

 

chrome browser - localhost:5002

 

 

● 식당을 추가해 보세요.

브라우저 '앱'의 검색창?을 누르면

 

Any Category	Coffee
Any Location	New York
Any Price	$
Rating	Rating

-> Accept

 

 

Firebase Console로 가보면...

 

 

[패널 뷰 | '쿼리 빌더'] 로 보면

Radom으로 세팅된 데이터들이 들어가있는 걸 확인.