React+firebase설정

1. 파이어 베이스 준비

* 가입

 - 파이어베이스는 현재 구글의 서비스이므로 구글에 로그인하여 파이어 베이스에 접근할 수 있다.

 

 

 - 시작하기 버튼을 눌러서 프로젝트에 접근하자.

 

* 프로젝트 만들기

 - 프로젝트 만들기를 클릭하여 첫 프로젝트를 만들 수 있다.

 

 - 프로젝트 이름을 적고, 다음으로 넘어가도록 하자. 약관에 동의하고 계속하면 프로젝트가 생성된다.

 

 

 

2. 리액트 준비

* CRA

 - SDK를 추가하기 전에 리액트 앱을 먼저 준비해보자.

 

 - CRA(Create-React-App)을 통해 리액트 앱을 만들었으므로, 기본적으로 npm과 node 환경이라고 볼 수 있다.

 

* SDK 추가

 - 이 부분은 파이어 베이스 문서에서 npm 을 사용한 방식을 보고 따라하면 손쉽게 가능하다.

 

설치

-  npm install --save firebase@^7.24.0

 

 

설정

import firebase from "firebase/app";
import "firebase/auth"; //인증기능
import "firebase/database"; //데이터베이스기능
import "firebase/storage"; //스토리지기능
//
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
    apiKey: "AIzaSyBk7qzaczfXcTtfMgLxtgcclr1TWzAP5b4",
    authDomain: "chat-app-df8be.firebaseapp.com",
    projectId: "chat-app-df8be",
    storageBucket: "chat-app-df8be.appspot.com",
    messagingSenderId: "417787919150",
    appId: "1:417787919150:web:69077b93cc9bed18fd18bf",
    measurementId: "G-HVS8EW2SD8"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// firebase.analytics(); : 통계보여주는부분

export default firebase;