Firebase란?
구글에서 만든 애플리케이션인데, 로그인(인증), 데이터베이스 등 다양한 기능들을 제공한다. 자세한건 아래의 이미지 참고쓰..!!
사이트 보니까 A/B Test 무료로 제공하는 것 같던데.. 한번 시도해보고 싶다. 언젠간 해보겠지..?ㅋㅋㅋㅋ
Cloud Firestore
요건 firebase에서 제공하는 NoSQL 문서 중심의 데이터베이스이다. 원래 백앤드에서 데이터 만들어줄땐 table이나 row 같은 값들이 있는데 그거와는 달리 field-value 쌍의 document가 있고 이 document들이 모여 collection이 되는 구조..?
일단 데이터구조를 만들어보자!
- Collection ID 생성
Collection ID는 일단 컴포넌트와 같다고 생각을 해서 가장 큰 범위로 생각을 했다. - document 생성
field의 type은 다양하게 설정할 수 있다. 일단 이렇게 해보았다!
Firebase 설치하기
- build
npm run buildfirebase 툴을 설치하기 전에 빌드를 먼저 해야한다고.. 근데 난 build를 나중에 했다 뚀륵 ㅠ - firebase 설치하기
npm install -g firebase-tools - firebase 로그인
firebase login명령어 입력하면 갑자기 아래의 링크로 이동해서 구글로그인이 뙇!
firebase에 등록된 계정을 선택한 후, 허용을 눌러주면.. Woohoo~~
우후~ 성공쓰
- firebase 프로젝트 초기화
firebase init
이 명령어를 치면..!
초기화 완료쓰!
아 근데..공식문서 보고 이렇게 설치는 다 해놨는데…
React Firebase에 대한 공식문서가 따로 있네?? 띠용??
tool을 깔고 firebase를 react에 설치하는 순서가 정확한진 모르겠다.
일단 했으니… 가본다!!!!
firebase setting
script 태그를 가져다 쓰거나 npm이나 yarn으로 설치하는 방법이 있다!
일단 script 태그를 가져다 쓰는 방법이다.
index.html에 요 아래의 태그를 넣어준다!
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.5.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.5.1/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "비밀쓰",
authDomain: "비밀쓰,
databaseURL: "비밀쓰",
projectId: "비밀쓰",
storageBucket: "비밀쓰",
messagingSenderId: "비밀쓰",
appId: "비밀쓰",
measurementId: "비밀쓰"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>아니면 걍 깔아준다!
yarn add firebase 명령어 궈궈!
그 담에 나는 src/firebase.js 파일을 만들어주었다.
// src/firebase.js 파일 내용물
import * as firebase from "firebase/app";
// firebase/app에서 받아오는 모든 메소드를 firebase라는 이름으로 쓸거라는 뜻
import "firebase/firestore";
const config = {
apiKey: "비밀쓰",
authDomain: "비밀쓰,
databaseURL: "비밀쓰",
projectId: "비밀쓰",
storageBucket: "비밀쓰",
messagingSenderId: "비밀쓰",
appId: "비밀쓰",
measurementId: "비밀쓰"
};
firebase.initializeApp(config);
export const db = firebase.firestore();
// db라는 이름으로 export 해서 사용할거임이제 내가 쓰던 파일에 firebase에 있는 데이터를 가져와볼거다.
import React, { useState, useEffect } from "react";
import { db } from "../../firebase";
// 생략쓰..
var docRef = db.collection("left_seat").doc("wecoder_6");
// 내가 만든 컬렉션과 도큐먼트 이름을 괄호 안에 넣는다.
docRef
.get()
.then(function(doc) {
if (doc.exists) {
console.log("Document data: ", doc.data());
} else {
console.log("No such document!");
}
})
.catch(function(err) {
console.log("Error getting document", err);
});
// 생략쓰자 콘솔창을 열어서 확인해보자
짠! 내가 임의로 넣어놓았던 데이터들이 뜬다!
이제 이 데이터들을 함수 적용해서 지지고 볶고 하는게 문젠데…
그것에 대해선 다음 이 시간에 이어서…!!!