Firebase

Firebase with React react에서 firebase를 활용하는 방법 firebase SDK를 설치하거나 웹상에서 설치없이 사용하는 방법은 firebase 기본을 참조 인증 (Auth) firebase 로 계정 생성 및 로그인 firebase API를 import하여 사용 <AppFirebase.js> import firebase from "firebase/compat/app"; import "firebase/compat/auth"; const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AUTHDOMAIN, projectId: process.env.REACT_APP_PROJECTID, storageBucket: process.env.REACT_APP_STORAGEBUCKET, messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID, appId: process.env.REACT_APP_APPID }; export default firebase.initializeApp(firebaseConfig); export const authService = firebase.auth(); AppFirebase.js 를 활용하여 business logic에 필요한 로그인 / 회원가입 기능을 구현 <Auth.js> import { authService } from "../components/AppFirebase"; const data = await authService.createUserWithEmailAndPassword(email, password) // email, passwd로 계정 생성 const data = await authService.signInWithEmailAndPassword(email, password) // email, passwd로 로그인 createUserWithEmailAndPassword / signInWithEmailAndPassword 실행 이후 authService.currentUser를 참조하면 user 정보를 받아올 수 있다. 하지만, authService.currentUser 정보를 갱신하는데는 시간이 걸린다. firebase API에서는 observer를 등록하여 currentUser의 변경 시점을 확인할 수 있다. currentUser 변경시점에 특정함수 동작 user 정보가 갱신된 시점에 특정 동작을 원한다면, 아래와 같이 onAuthStateChanged 함수를 사용하면 된다. authService.onAuthStateChanged((user) => { /* something to do */ }}); 로그아웃 authService.signOut() 함수를 호출하여 로그아웃이 가능하다. 참고로 크롬 웹 디버깅 화면에서 ‘Application’탭에 들어가서 IndexedDB -> firebaseLocalDb 안의 내용을 🚫버튼으로 삭제해 주면 로그인 정보가 사라진다. 에러 authService의 함수(createUserWithEmailAndPassword, signInWithEmailAndPassword, …) 사용시 에러가 발생할 수 있으므로, try, catch문으로 묶어서 사용한다. try { let data data = await authService.createUserWithEmailAndPassword(email, password) } catch(error) { console.log(error.code) // 에러의 원인이 코드 형태로 출력된다. console.log(error.message) // 에러의 원인이 메시지 형태로 출력된다. } ref) 오류발생 원인 ...

firebase firebase는 실시간 db로 유명하며, google에 인수되고 폭이 넓어졌다. Amazon의 Amplify가 firebase와 유사하다. 일정 사용량 까지는 무료로 사용 가능하며, 이후에는 요금이 부가된다. 설치 및 사용 온라인으로 콘솔에 접속하여 프로젝트를 생성 및 설정하고, firebase sdk를 로컬에 다운받아 코드에 적용한다. firebase는 다양한 운영체제에 설치 가능하며, 각각의 설치 방법을 따르면 된다. (웹에서는 설치하지 않고 url로 참조해 사용할 수도 있다.) 버전이 올라감에 따라 참조방법, 인터페이스 등 사용법이 바뀌는 경우가 많으니 항상 docs를 잘 살펴보자 ...