Steps to set up Firbase in React

---

Foundation

1. CRA로 리액트 프로젝트를 만든다.
2. 프로젝트 디렉토리에서 터미널에서 firebase를 설치한다.

yarn add firebase 

or

npm install firebase

packge.json에 firebase가 입력되어 있으면 성공적으로 설치가 된 것이다!👏

---

Firebase

1. 가장 먼저 https://firebase.google.com/ 로그인을 한다.
2. 로그인 후 콘솔 클릭 후 새 프로젝트를 ios, android, web 프로젝트에 따라 만든다. (필자는 web을 선택)
3. 다음으로 Firebase SDK 추가한다. src폴더 아래 firebase.js파일을 생성한 후 아래 코드를 입력한다.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

(API key 와 id 등 정보는 개인정보로 인해서 지웠다🔒 값들은 firebase에서 프로젝트를 만들면 자동으로 생성된다.)

---

여기까지 작성하면 기본적인 초기 셋팅은 완성이다.

하지만, v8과 v9에 따라 작성하는 방법이 다르기 때문에 공식문서를 꼭 확인해야한다.
firebase 공식문서
버전 9 호환 코드는 버전 8 코드와 동일하지만 가져오기가 변경되었다.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => { 
  // Check for user status
});

이후: 버전 9 모듈식

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

Auth함수 사용 참고:

https://firebase.google.com/docs/reference/js/v8/firebase.auth?hl=ko&authuser=0

출처: https://firebase.google.com/docs/web/modular-upgrade?hl=ko&authuser=0