1.Firebase Setup in React
Updated:
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 는 무료 서비스가 아닙니다. 시작은 무료지만 사용하는 만큼 요금을 내기 때문에 사용할 경우 주의 해야 합니다.
4.SetUp in React
- CRA 을 통해서 react project 를 생성하고 firebase 를 설치 합니다
yarn add firebase --save
- firebase 에서 project 를 생성하고, web app 을 생성하면 SDK 를 받을 수 있습니다.
- 생성된 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
- normad corder firebase - https://nomadcoders.co/nwitter/lobby
Leave a comment