1. Firebase 란
Firebase는 2011년 파이어베이스 사가 개발하고 2014년에 구글에 인수된 모바일 및 웹, 앱 애플리케이션 개발 플랫폼이다.
웹 서비스를 만들기 위해서는 개발자가 유저 인증, API, 데이터베이스 등 서버 개발의 모든 것을 해야만 했다. 이러한 서버 개발 과정은 대부분 비슷하게 이루어지기 때문에 개발자들은 비슷한 작업을 반복하게 됩니다. Firebase는 이러한 서버 개발의 반복적인 패턴을 미리 구현하여 제공하여 개발 기간을 단축시키고 난이도를 낮춰 효율성을 높이는 대표적인 클라우드 서비스 중 하나이다.
또한 운영체제에 상관없이 어떤 기기에나 웹, 앱 서비스를 개발할 수 있다는 장점이 있으며, 구글 드라이브나 에널리틱스를 적용하여 사용자들의 이용 횟수, 광고효과 등 부가적인 정보들도 쉽게 확인할 수 있고 이를 활용할 수 있다는 장점이 있다.
* 웹서버를 만드는 과정
1. Web Server는 웹 브라우저에서 요청하는 HTML, CSS, JS를 전송해주는 서비스 프로그램이다. 요청에 따른 정적인 콘텐츠를 전달하기 때문에 정적 서버라 부른다.
2. Web Server가 회원가입, DB 저장 등의 기능을 만들기 위하여 별도의 Database Server가 필요하다.
3. Web Server가 DB안에 접속할 수 있으려면 Backend 서버가 필요하다. Frontend가 Backend에 요청을 보내면 서버에서 Database에서 제공하는 라이브러리를 이용하여 필요한 데이터를 리턴해 준다.
- Firebase는 유저가 서버로 데이터를 전송하고 데이터를 DB에 저장하도록 도와준다.
2. Firebase가 제공하는 기능
1) Cloud FireStore
안드로이드, ios, 웹서비스에서 데이터베이스 관련 코드 없이 데이터베이스를 사용할 수 있다.
2) Firebase ML
텍스터 인식, 얼굴 인식과 같은 머신러닝 기능을 모바일 기기에서 사용 가능하도록 하는 SDK(Software Development Kit)
3) Cloud Functions
firebase로 구축한 서버에 비즈니스 로직을 실행할 수 있도록 사용자가 작성한 코드를 실행하는 기능을 제공한다.
4) Cloud Storage
이미지 파일과 같이 데이터를 저장하는 기능을 제공한다.
5) Hosting
웹서비스를 호스팅 한다.
6) Authentication
사용자가 로그인, 회원가입 등을 할 때 보다 쉽게 할 수 있도록 여러 인증 로직을 미리 구현하여 사용자에게 간단히 제공할 수 있는 기능이다.
Firebase의 인증 기능을 이용한 SSO(통합인증 기능)을 지원하는 서비스를 통해 사용자는 로그인 활동을 쉽게 할 수 있다.
* SSO(Single Sign On)
단 한 번의 인증 절차만으로도 여러 앱에 접속이 가능한 인증 방식이다. IOP를 통해 서비스 인증 정보를 관리함으로써 하나의 인증 정보를 관리함으로써 하나의 계정으로 다수의 서비스가 이용이 가능해진다.
7) RealTime Database
DB에 데이터가 실시간으로 반영되고 사용자에게 동기화된다. 다른 사람이 작성한 글 또는 수정한 글을 실시간을 바로 볼 수 있다.
3. Firebase 환경설정 (React)
1) Firebase 패키지 설치
npm install firebase
2) 파이어베이스 콘솔 로그인
Firebase
Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.
firebase.google.com
3) 프로젝트 추가 및 프로젝트 이름 입력
4) 에널리스틱 사용 여부 후 프로젝트 만들기
5) 만든 프로젝트에서 원하는 앱 추가하기 (IOS, Android, 웹 등등 )
6) Firebas를 사용하려는 프로젝트에 fBase.js 파일을 생성하고 그곳에 Firebase config가 작성되어있는 SDK를 복사한다. (api 키값 등 공개되면 안 되는 값들이기 때문에 주의)
예시)
import { initializeApp } from "firebase/app";
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: ""
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
7) firebaseConfig에 입력되어있는 키의 값들은 공개되면 안되는 값들이므로 github등에 업로드되지 않게 하기 위하여. env를 생성하 여환 경변수를 따로 만들고 gitignore에 추가하여 준다.
- env 예시
· 리엑트에서는 env가 react-script 모듈에서 지원해줌으로 별도의 패키지 설치 없이 진행할 수 있다.
· .env 파일을 생성할 때에 환경변수를 사용하고 싶은 변수 앞에 REACT_APP_을 꼭 작성해 줄 것. (만약 Next.js에서 사용한다면 NEXT_PUBLIC_ 입력)
REACT_APP_API_KEY = 콘솔에서전달받은키값
REACT_APP_AUTH_DOMAIN = 콘솔에서전달받은도메인값
REACT_APP_PROJECT_ID = 콘솔에서전달받은프로젝트아이디값
REACT_APP_STORAGE_BUCKET = 콘솔에서전달받은스토리지버킷값
REACT_APP_MESSAGING_SENDER_ID = 콘솔에서전달받은메시지아이디값
REACT_APP_APP_ID = 콘솔에서전달받은엡아이디값
- fBase 예시
· process.env.REACT_APP_의 형태로 작성한다.
import { initializeApp } from "firebase/app";
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_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
- gitignore에 추가
node_modules
dist/*
.env