React/Firebase

[React] 최신 Firebase Real-Time DB 사용하기

Firestore와 Real-Time DB의 차이점은 아래 글에 간략하게 정리되어있다. [React] 최신 Firebase Firestore 사용하기 Firebase의 기본 설정이 필요하다면 아래 글을 참고하길 바란다. [React] 최신 Firebase에서 로그인 구현하기 React의 Firebase 라이브러리가 업데이트 되면서 함수를 호출하는 방식이 바뀌었다. 거의 필수 muhly.tistory.com Real-Time DB는 doc, collection 두 가지가 존재하는 Firestore와는 다르게 ref라는 하나의 함수만 사용한다. 경로 선언 import { push, ref, limitToLast, onValue, orderByChild, query, remove, } from "@fireba..

[React] 최신 Firebase Firestore 사용하기

Firebase의 기본 설정이 필요하다면 아래 글을 참고하길 바란다. [React] 최신 Firebase에서 로그인 구현하기 React의 Firebase 라이브러리가 업데이트 되면서 함수를 호출하는 방식이 바뀌었다. 거의 필수적으로 사용하는 Auth, Firestore, RealTimeDatabase의 최신 구문을 알아보자. 간단히 바뀐점에 대해 설명하자면 muhly.tistory.com 앞서 Firestore와 Real time database의 차이점을 간단하게 짚고 넘어가자. 먼저, 요금제에 차이가 있다. Firestore는 입출력 횟수당 요금이 부과되지만 Real time database는 입출력 대역폭으로 요금이 부과된다. 또한 후자는 연결할 수 있는 유저의 제한이 있다. 아마도 동시접속자 인듯..

[React] 최신 Firebase에서 로그인 구현하기

React의 Firebase 라이브러리가 업데이트 되면서 함수를 호출하는 방식이 바뀌었다. 거의 필수적으로 사용하는 Auth, Firestore, RealTimeDatabase의 최신 구문을 알아보자. 간단히 바뀐점에 대해 설명하자면 Class내에 선언되어있던 함수들을 모두 전역으로 전언해서 사용할 수 있게 바뀌었다. 예를들어 Email login 함수가 FirebaseAuth 내부에 선언되어 있어 이를 FirebaseAuth.emailLogin()과 같은 형태로 사용했어야 했다면, 최신 버전에서는 emailLogin(FirebaseAuth, email, password)의 형태로 사용하게끔 변경되었다. 설치 yarn add firebase Firebase_config.js import { initial..