Firebase 설정하기

 

1. Firebase 프로젝트 만들기

파이어베이스 홈페이지 firebase.google.com에 접속합니다.

그다음 <시작하기>를 누르고, 이어서 <프로젝트 만들기>를 누릅니다.

 

그러면 프로젝트 이름을 지정할 수 있는 화면이 나옵니다.

프로젝트이름은 리액트 프로젝트 이름과 동일하게 지어줍니다.

'약관에 동의합니다'에 체크한 후 <계속>을 눌러줍니다.

 

다음으로 나온 화면에서 Google애널리틱스 사용설정을 정할 수 있습니다.

사용할 경우 사용국가와 인증절차 후 프로젝트를 만들 수 있습니다.

 

'새 프로젝트가 준비되었습니다' 문구가 나오면 프로젝트가 잘 만들어진 것입니다.

<계속>버튼을 눌러 다음으로 진행합니다.

 

2. Firebase에 웹 애플리케이션 등록하기

이미지에 보이는 </>모양의 버튼을 눌러 웹어플리케이션을 등록합니다.

(버튼 종류에서 보득 ios, 안드로이드, 유니티에서도 사용할 수 있습니다.)

 

앱닉네임을 입력하고, '또한 이 앱의 Firebase 호스팅을 설정하세요' 체크해제가 되어있는지 확인 후 <앱 등록> 버튼을 누릅니다.

 

그러면 Firebase SDK추가내용이 열리는데, 여기서 firebaseConfig값을 미리 복사합니다.

 

이제 터미널에 다음 명령어를 입력해 파이어베이스 SDK 리액트 버전을 프로젝트에 설치합니다.

명령어 실행은 반드시 루트폴더에서 실행합니다.

npm install firebase

src폴더에 새파일 firebase.js을 만듭니다. 내용은,

import firebase from "firebase/app";

const firebaseConfig = {
  apiKey: "AIzaSyB3AAjlM8is1Zvr_9DD6FNbRh1m24APumQ",
  authDomain: "proname-d68cf.firebaseapp.com",
  projectId: "proname-d68cf",
  storageBucket: "proname-d68cf.appspot.com",
  messagingSenderId: "785823219727",
  appId: "1:785823219727:web:d40f54884862ed2e17637a"
};

 

export default firebase.initializeApp(firebaseConfig);

 

initializeApp함수를 firebase객체에서 꺼내 사용하는것입니다.

 

파일 저장 후 루트폴더에서 다음 명령어를 입력합니다. 그러면 리액트 서버가 실행됩니다.

npm run start