1.Firebase Setup in React

Updated:


image

Firebase official page

1.Firebase 란?

  • firebase 는 웹사이트를 통해 공해주는 백엔드 서비스 이고, 많은 back-end 기능들을 포괄하고 있어서 그 기능들을 손쉽게 이용할 수 있는 구글의 서비스 입니다.

  • Cloud Firestore 를 사용해서 데이터 베이스 관련 코드 없이 데이터 베이스를 사용할 수 있게 하는 아주 유용한 서비스 입니다

  • Cloud functions 는 기본적으로 serverless function 의 기능을 제공해 주는데, AWS 의 lambda 와 비슷한 서비스 입니다.

  • Cloud storage 는 AWS 의 S3 와 비슷하게 기본적으로 업로드의 기능을 해주는데 파일 같은것을 업로드해서 데이터베이스와 연결해서 사용할 수 있는 cloud 저장소 입니다.

  • Hosting 기능도 지원하여 저장한 asset 들을 배포하거나 react App 을 배포하고자 하면 hosting 기능을 통해서 publish 할 수 있습니다.

  • Authentication 은 firebase 의 가장 큰 장점 중 하나로써 쉽게 인증 기능을 구현할 수 있는 firebase 의 강력한 사용자 인증 기능입니다

  • Analytics 를 사용해서 손쉽게 사용할 수 있는데 기능중에 Crashlytics 는 App 의 충돌 같은것을 볼 수 있게 해줌. Performance monitoring 은 사용자의 app 의 성능을 보여주는 기능이고, Test Lab 은 웹사이트를 각종 기기별로 테스트 할 수 있게 해줌. App Distribution ios 나 android 의 버전 배포를 도와주는데 테스터들의 모바일을 통해서 사용할 수 있습니다.

2.Firebase 언제 사용할까?

  • firebase 는 아주 빠르게 무언가를 시작할 수 있도록 도와줍니다. 별도의 시간을 투자할 필요 없이 데이터 베이스를 만들 수 있게 되고, back-end 에서 데이터를 생성할 수도 있고 파일 또한 아주 손쉽게 업로드 할 수 있습니다. 진입장벽이 쉽습니다.

  • firebase 는 사용하지만, 사용자는 데이터를 소유하지 않습니다. 서버도 없고 firebase 로부터 빌려서 쓰는 개념입니다. 그래서 작은 프로젝트나 프로토타입의 프로젝트를 테스트 할때 빠르게 app 을 구축하고 배포 할 수 있습니다. 서버를 만드는 데에 시간을 투자하지 않고, 데이터베이스를 만드는데 시간을 쓰지 않고 빠르게 app 을 만들 수 있는게 장점입니다.

3.Firebase Price

  • Firebase 는 무료 서비스가 아닙니다. 시작은 무료지만 사용하는 만큼 요금을 내기 때문에 사용할 경우 주의 해야 합니다.

image

4.SetUp in React

  • CRA 을 통해서 react project 를 생성하고 firebase 를 설치 합니다
yarn add firebase --save
  • firebase 에서 project 를 생성하고, web app 을 생성하면 SDK 를 받을 수 있습니다.

image

  • 생성된 SDK 에서 var firebaseConfig ={} 부분을 복사하여 react 프로젝트 안에 src 경로에 firebase.js 파일을 생성하여 내용을 붙여 넣기 합니다
// in firebase.js

// 아래와 같은 형태로 붙여넣기 합니다.

// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";

const firebaseConfig = {
  apiKey: "apiKey입니다",
  authDomain: "chat-app-.firebaseapp.com",
  projectId: "chat-app-8a114",
  storageBucket: "chat-app-8a114.appspot.com",
  messagingSenderId: "172399327092",
  appId: "1:172399327092:web:",
};

// Initialize Firebase
export default firebase.initializeApp(firebaseConfig);
// in App.js

import firebase from "./firebase";

5.Securing the Keys

  • 모든 보안이 필요한 apiKey, autDomain 등을 코드에 적어주면 보안장 문제가 있기 때문에 숨겨주어여 함

  • 그래서 root 경로에 .env 파일에 환경변수들을 담아 중요 key 들을 숨길 수 있습니다.

  • React App 에서는 .env 파일의 환경변수를 써야 된다면 REACTAPP 으로 시작해야 하고 그뒤로 이름을 붙여줘야 함 (예 REACTAPP‘SOMETHING’)

# .env 파일 안에 다음과 같은 형태로 넣어줌

REACT_APP_API_KEY=해당되는 api key
REACT_APP_AUTH_DOMAIN=
REACT_APP_DATABASE_URL=
REACT_APP_PROJECT_ID=
REACT_APP_STORAGE_BUCKET=
REACT_APP_MESSAGIN_ID=
REACT_APP_APP_APP_ID=1:
  • 사용은 다음과 같이 firebase.js 파일을 환경변수를 사용해서 바꿔 줌
// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGIN_ID,
  appId: process.env.REACT_APP_APP_APP_ID,
};

// Initialize Firebase
export default firebase.initializeApp(firebaseConfig);
  • root 경로에 .gitignore 에 .env 를 추가해서 github 에 환경변수 키 값이 업로드 되지 않게 하기

  • 위에 환경변수는 github 에서 단순히 key 값을 보이지 않는 것이고 나중에 build 하게 되면 결국 web 상에 key 값이 노출되게 됨 그래서 몇가지 더 보안사항을 추가 해야 합니다.

🔶 🔷 📌 🔑

Reference

Categories:

Updated:

Leave a comment