[리액트 React] 뉴스피드 팀 프로젝트_파이어베이스 환경 설정

Firebase 환경 설정

npm 설치 명령어
npm install firebase

공식 문서
https://firebase.google.com/docs/web/setup?hl=ko

 

 1. 회원가입, 로그인 후 시작하기 클릭

 

 2. 프로젝트 추가 클릭

 

 3. 프로젝트에 맞는 이름 설정

 

4. 구글 애널리틱스 사용여부 확인 (뉴스피드 프로젝트의 경우, 체크 해제함)

 

 

 5. [웹 앱에 Firebase 추가] → [앱 등록] 클릭

 

6. 아래 </> 를 클릭하면 웹 앱을 만들 수 있다 (Firebase 호스팅은 체크하지 않음 )

 

7. 이후 api인증키를 받아서 사용하면된다 (인증키 확인하는 방법)

 

 

8. Firebase 연결 확인 방법

8 - 1. 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: "MY_API_KEY",
  authDomain: "my-nbc-project-d5117.firebaseapp.com",
  projectId: "my-nbc-project-d5117",
  storageBucket: "my-nbc-project-d5117.appspot.com",
  messagingSenderId: "243139549178",
  appId: "MY_APP_ID",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
// React에서 정상적으로 동작하는 지 확인하기 위해서 임시로 export 시켜줍니다. app이 정상적으로 출력되는 것을 확인하고 나면, 지워줍니다.
export default app

 

8 - 2. index.js 파일에서 firebase.js를 import하고 제대로 동작하는 지 확인

//index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

import app from "./firebase";

console.log("app", app);

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

 

8 - 3. 콘솔 확인