참고: Firebase 라이브러리 v9가 출시되면서 이 게시물은 구식입니다.

저는 몇 년 동안 Firebase와 함께 React를 사용해 왔으며 그 과정에서 배운 몇 가지를 공유하기로 결정했습니다. 이것은 "React & Firebase"라는 제목의 시리즈의 첫 번째 게시물입니다. 이와 같은 더 많은 게시물에 관심이 있으시면 저를 팔로우하고 이 기사를 공유하십시오. 감사!

시작하기

무료 Firebase 계정만 있으면 됩니다. Firebase 프로젝트를 만들려면 Google/Gmail에서 제공하는 이메일 주소가 필요합니다.

Firebase 프로젝트 만들기

https://console.firebase.google.com로 이동

+ Add Project 를 클릭하십시오.

단계에 따라 Firebase 프로젝트를 생성합니다.

Firebase 프로젝트용 웹 앱 등록

Firebase 프로젝트 설정으로 이동합니다.

Your Apps 섹션에서 웹 플랫폼을 선택하십시오.

앱을 등록하려면 앱 이름을 입력하세요. 참고로 이 강의에서는 Firebase 호스팅을 다루지 않으므로 활성화할 필요가 없습니다.

단계를 완료하면 Firebase 앱의 구성이 표시됩니다. 구성 값을 복사합니다. React 앱에서 Firebase를 초기화할 때 필요합니다.

npm에서 Firebase 클라이언트 SDK를 설치하므로 전체 스니펫이 아닌 구성 객체만 복사하면 됩니다.

React 앱에 Firebase 추가

yarn 을 통해 Firebase SDK를 설치합니다.

yarn add firebase

Firebase 앱 초기화

이전 단계에서 복사한 구성 값을 사용하여 Firebase 애플리케이션을 초기화할 수 있습니다.
index.js 파일에서 Firebase를 초기화합니다.

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

// Use your config values here.
firebase.initializeApp({
  apiKey: "AIzaSyDHE9fVBUM_mto-p_SkWnyKtOiRu8M5F98",
  authDomain: "react-firebase-farazamiruddin.firebaseapp.com",
  databaseURL: "https://react-firebase-farazamiruddin.firebaseio.com",
  projectId: "react-firebase-farazamiruddin",
  storageBucket: "react-firebase-farazamiruddin.appspot.com",
  messagingSenderId: "338564911587",
  appId: "1:338564911587:web:c34e6fee0ff41bbe7fd0d6"
});

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

애플리케이션이 올바르게 초기화되었는지 확인

확인을 위해 브라우저에 Firebase 앱에 대한 일부 정보를 간단히 표시할 수 있습니다.
App.js 파일에 다음을 추가합니다.

import React from "react";
import firebase from "firebase";

export default function App() {
  const firebaseApp = firebase.apps[0];
  return (
    <div>
      <h1>React & Firebase</h1>
      <h2>By @farazamiruddin</h2>
      <code>
        <pre>{JSON.stringify(firebaseApp.options, null, 2)}</pre>
      </code>
    </div>
  );
}

Firebase 앱을 초기화하면 Firebase가 이 앱을 apps 배열에 추가합니다. 우리는 이 배열의 첫 번째 항목을 잡고(하나의 앱만 있기 때문에) 해당 옵션을 브라우저에 인쇄합니다. 이 옵션은 Firebase 프로젝트 설정 페이지에서 복사한 구성 값과 일치해야 합니다.

따라했다면 브라우저에서 이것을 볼 수 있을 것입니다.

마무리

이 강의에서는 Firebase를 React 앱에 추가하는 방법을 살펴보았습니다. 이 게시물이 마음에 드셨다면 저를 팔로우하고 온라인에서 공유해 주세요.

계속 연락하고 싶으시면 트위터로 연락주세요.

다음 시간까지.