1. 리액트 프로젝트 만들기

---

• Firebase 프로젝트에 등록할 프로젝트를 생성한다.

npx create-react-app [프로젝트 이름] --template typescript

2. 새 Firebase 프로젝트 만들기

---

• Firebase 사이트에서 로그인 후 우측 상단의 콘솔로 이동한다.

• 프로젝트 만들기를 클릭한다. (새 Firebase 프로젝트를 만들면 내부적으로 Google Cloud 프로젝트가 생성된다.)

• 프로젝트 이름을 입력한 후 '계속'을 클릭한다.

프로젝트 ID

• Firebase 프로젝트는 지정된 이름을 토대로 사용자 정의 고유 식별자인 프로젝트 ID를 생성한다. 프로젝트 ID는 프로젝트의 전역 고유 식별자로서 실시간 데이터베이스 URL, Firebase 호스팅 하위 도메인 등에 사용된다.

• 필요한 경우 편집 버튼을 클릭해 프로젝트 ID를 수정할 수 있지만 프로젝트를 만든 후에는 프로젝트 ID를 변경할 수 없다.
  

• 애널리틱스를 사용할 경우 아래에 나와있는 기능을 수행할 수 있다. 나중에 프로젝트 설정 > 통합 탭에서 Google 애널리틱스를 설정할 수 있으므로 지금은 체크를 해제하고 '프로젝트 만들기'를 클릭하려 프로젝트를 생성한다.

3. 앱 등록

---

• 좌측 메뉴의 상단의 톱니바퀴 버튼을 클릭하여 '프로젝트 설정' 페이지로 들어간다.

• 하단의 내 앱 부분에서 프로젝트 앱 종류를 선택한다. (웹일 경우 </>를 선택)

• 앱 이름을 입력하고 '앱 등록'을 클릭하면 아래와 같이 npm과 script 태그를 사용해서 firebase SDK를 추가할 수 있다.

• 만들어둔 프로젝트의 src 디렉토리에 fireBase.tsx 파일을 만들어서 설정들을 import 한다.

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

const app = initializeApp(firebaseConfig);
export default app;

• index.tsx 파일에 fireBase.tsx를 import 하고 관련 객체를 잘 받아오고 있는지 확인해본다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import app from "./firebase";

console.log(app);

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);