[TIL] 23.07.15 Today I Learned

요약: 미니프로젝트(파이어베이스를 이용한 WhoHowMuch) ver.1

일시: 23.07.15

장소: 집

배운 점:

firebase 프로젝트 만들기

https://firebase.google.com/?hl=ko 

Firebase | Google’s Mobile and Web App Development Platform

firebase 데이터베이스 만들기

1. Cloud Firestore 데이터베이스 만들기
2. localhost에서 수정할 수 있게 테스트 모드로 시작
3. 나라를 지정
4. 컬렉션 추가

 

firebase 설치하기

• 터미널에서 firebase 설치

npm install firebase

src 폴더에 firebase_config.js 파일을 만들고 복사 붙여넣기

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

 

firebase 기초문법

getDocs: 데이터 가져오기

addDoc: 데이터 추가하기

updateDoc: 데이터 수정하기

deleteDoc: 데이터 삭제하기

 

firebase 배포

firebase 배포 하기 전에 react 배포를 하는 것이 좋다.

firebase tool 설치

// CLI 설치
npm install -g firebase-tools
yarn add firebase-tools

// firebase 로그인
firebase login

Allow Firebase to collect CLI usage and error reporting information? Y

 

firebase 설정

What do you want to use as your public directory? build

공용 디렉토리로 사용할 항목을 선택하십시오?

 

Configure as a single-page app (rewrite all urls to /index.html)? N

단일 페이지 앱으로 구성하시겠습니까?(모든 URL을 /index.html로 다시 작성)

 

Set up automatic builds and deploys with Github? N

자동 빌드를 설정하고 Github과 함께 배포하시겠습니까?

 

File build/index.html already exists. Overwrite? N

파일 build/index.html이 이미 있습니다. 덮어쓰시겠습니까?

 

firebase 배포

firebase deploy

• 큰 문제가 없다면 정상적으로 배포가 될 것이고, url이 출력된다.

 

부족한 점:

아직 firebase와 연동되는 과정에 대한 이해가 부족하기 때문에 스스로 주석을 쓰면서 이해하는 시간이 필요하다고 생각한다.