<파이어베이스> 파이어베이스와 리액트 준비

 

1. 파이어 베이스 준비

* 가입

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

 

 

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

 

* 프로젝트 만들기

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

 

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

 

 - 프로젝트가 생성되면 앱에 파이어베이스를 추가할 수 있게 된다. 필자는 리액트 웹앱에 추가할 것이므로 웹을 클릭한다.

 

 - 그러면 앱 등록이 뜨게되며 Firebase SDK를 추가할 수 있는 창이 뜬다. 이 때 예시로 CDN방식을 사용하고 있지만 우리는 아래에서 npm 방식으로 SDK를 추가할 것이다.

 

2. 리액트 준비

* CRA

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

 

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

 

* SDK 추가

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

 

 

 - npm init은 cra환경에서 기본적으로 되어있으므로 npm install --save firebase 를 입력하여 firebase 패키지를 설치한다.

 

 - 다음으로 루트 디렉토리에 설정파일을 만들어 주었다.

 

// fbase.js

import firebase from 'firebase/app';
import "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGIN_ID,
  appId: process.env.REACT_APP_APP_ID
};

firebase.initializeApp(firebaseConfig);

export const firebaseInstance = firebase;
export const authService = firebase.auth()

 

 - firebase와 이름이 혼동되지 않도록 fbase.js라는 파일로 설정을 하였다. 키값은 .env 파일을 통해 관리하도록 하였다.

 

 - 가장 먼저 fireabase/app은 필수적으로 import 되어야 한다. 이를 통해 firebase가 설정을 초기화하도록 한다.

 

 - 특정 파이어베이스 제품 (ex. 인증)만 사용할 수 있도록 각 모듈을 import 할 수 있다. 위 예시는 인증서비스를 사용하기 위해서 authService라는 변수에 할당시켰다. 파이어베이스 인스턴스를 활용할 일이 많기 때문에 이 또한 firebase를 firebaseInstance라는 변수로 사용할 수 있도록 export하였다.

 

 

---

 

참고

 

자바스크립트 프로젝트에 Firebase 추가

 

Watch Now - 노마드 코더 Nomad Coders