본문 바로가기

Firebase4

firebase - expo와 연동 react-native를 expo로 시작을 하고 firebase와 연동을 하려고 하면, 기존에 firebase web과 연결과 하는 방식과 다르게 진행을 해야한다. 아래와 같이 firebase를 셋팅을 하면 웹에서 firebase를 잘 받아올 수 있었다. # firebase - web 연동 config import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); 하지만 expo를 활용하여 firebase와.. 2022. 4. 11.
firebase - O auth(version9) 기존에 글은 O auth 글은 javascript version8이었고, 지금 쓰고 있는 글은 version9 이다. version9이 되면서 import로 메소드들을 쉽게 받아오게 되면서 모듈들을 사용하기 편해졌다. 기존 셋팅 방법부터 조금 달라졌다. 이전에는 단지 import 'firebase/auth' 형태로 사용했지만, version 9 부터는 getAuth 라는 메소드를 호출해서 사용할 수 있다. import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; export const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain:.. 2022. 1. 1.
firebase - next.js getInitialProps login next.js 의 장점은 ssr(server side rendering)이다. page를 렌더하기전에 미리 필요한 데이터를 받아와서 page를 렌더링할 때, 데이터와 함께 렌더링을 해준다. 이러한 장점을 가지고 있어서 페이지를 렌더링 할 때, login이 정보를 빨리 받아와서 login 여부에 따라서 페이지 기능을 다양하게 이용할 수 있는 페이지들이 많다. firebase의 oAuth 기능을 활용해서 login 정보를 받아오고 싶지만, 매번 useEffect를 호출할 수 있다. 하지만, next js 장점을 활용하지 못하고 사용하는것 같다. useEffect(() => { auth.onAuthStateChanged((user: any) => { if (user) { dispatch(signin(user... 2021. 5. 8.
FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists firebase-typescript-next.js 같이 사용을 했을 때, 하기와 같이 initializeApp만 설정하면 error를 발생하게된다. const fbase = firebase.initializeApp(firebaseConfig); firebase를 한번 초기화를 하고 page에서 firebase가 호출이 되었을 떄, 초기화 한 값이 있기 때문에 중복되어서 중복 error가 발생했다. 이 중복을 피하기 위해서 stackoverflow에 나와 있는 방식을 활용해서 해결 할 수 있었다. 이미 firebase에 초기값이 있다면 firebase.app() 반환하는 방식을 사용 const fbase = !firebase.apps.length ? firebase.initializeApp(firebase.. 2021. 5. 5.
반응형