Firebase

Firebase?

• 서버측 코드 작성 없이 클라우드와 연동하여 모바일 응용 프로그램을 효율적으로 개발할 수 있는 환경을 제공 해준다.

• 실시간 데이터베이스와 사용자 인증, 클라우드, 호스팅, error, 에드워즈, 애널리스틱스 등 수많은 서비스를 제공한다.

• 호스팅은 정적 및 동적 컨텐츠는 물론 마이크로 서비스를 위한 관리형 서비스로 SSD 저장소 및 글로벌 콘텐츠 전송 네트워크(CDN)를 기반으로 별도 구성 없이 SSL을 기본적으로 제공하여 콘텐츠를 안전하게 전송한다.

Firebase 설치

• yarn add firebase
  :우선 node.js를 설치한 후 입력하여 firebase를 설치한다.

• npm install firebase-tools
  :

• firebase init
  : 초기화를 해준다.

• npm run build / npm run deploy
  : 프로젝트 배포 및 확인해준다.
  : Hosting URL이 발행된 곳으로 배포가 완료된다.

: api key의 경우에는 private하므로 .env에 따로 저장해준다.

Firebase 구조

• Firebase Analytics는 페이지와 화면 뷰 그리고 세션에 중점을 두는 대신 사용자들이 무엇을 하는지 파악할수있게 도와주며 충돌 발생 시 이에 대한 정보를 개발자에게 전달하여 안정성을 높혀준다.

• Realtime Database는 실시간 데이터베이스와 백엔드 서비스를 제공하며 어플리케이션 데이터를 고객과 저장된 클라우드와 자동 동기화할 수 있다.

• Storage는 이미지와 동영상 및 기타 대용량 파일을 저장하는 기능으로 대규모의 확장성을 제공하며 google 클라우드 프로젝트에서 저장된 파일에 손쉽게 액세스할 수 있다.

• Firebase Cloud Messaging(FCM)은 클라우드에서 기기로 푸시하는 메시징 서비스로 제한없이 무료로 이용할 수 있는 FCM은 iOS, Android 및 웹 플렛폼을 지원하며 높은 신뢰성을 가지고 베터리를 최소한으로 사용하도록 최적화 되어있다.

• Auth는 오직 클라이언트 사이드의 코드로 유저 인증과 로그인 서버를 제공한다. 회원가입과 로그인과 같은 사용자 계정 관련 기능을 쉽고 빠르게 활용할 수 있도록 도와준다.

• Hosting은 기본적인 프론트 엔드 기반의 웹 소스를 올릴수있으며 앱 소개나 랜딩 페이지등을 운영하도록 도와준다.

• Cloud Function은 서버 단에서 처리해야 하는 작업들이 있을 경우에 사용하는데 딜레이가 있어서 빠른 속도의 서비스를 개발하는 경우에는 적합하지 않다.

Firebase 사용 목적 및 장점

• 실시간 서비스를 손쉽게 구축할수 있으며, 클라이언트 개발을 진행하면 즉시 구조를 생성하고 변경할수있다.

• Hosting은 정적 및 동적 콘텐츠는 물론 마이크로 서비스를 위한 관리형 호스팅 서비스이므로 빠르고 안전하게 웹 앱 에셋 전달한다.

• Cloud Functions은 서버를 관리하지 않고 모바일 백엔드 코드 실행 사용시 장점이다.

• 서버를 직접 구축해야 하는 번거로움이 적으며 http 인증을 위한 절차가 생략된다.

: 속도적인 측면에서 일반적인 서버 구축보다 느리며 database의 최대 용량이 제한되어있어서 대규모 프로젝트나 빅데이터를 다루는 서비스를 구축하기에 적합하지않다.

Firebase 프로젝트 진행

• 로그인 페이지
  : firebase를 이용하여 소셜로그인과 유효성을 사용하고 백서버로 유저 정보를 보낸다

• react-router-dom
  : HashRouter / Router / Route / Switch / Redirect / Link
  useHistory = history.push("/")

• Auth
  : authService / firebaseInstance
  파이어베이스 계정 만들고 authService에 있는 함수들 사용한다.
  firebaseInstance의 Provider로 google과 github 소셜로그인 사용한다.

• hooks(useState / useEffect)

• index>app>router>auth
  1) app
  보여지는 부분은 router 컴포넌트가 로그인 됐을떄 안됐을때를 기준
  그리고 useState를 라우터의 유무 init과 loggedin 유무로 나눈다.
  2)router
  로그인이 됐는지 안됐는지 유무로 컴포넌트를 보여주며 로그아웃 하였을때 리다이렉트로 홈으로 가도록 해준다.
  3)auth
  일단, index에서 app을 render해주고, app에서 로그인 유무로 router를 통하여 페이지를 보여준다.
  로그인 경우

: 로그인 안된경우)
로그인 폼에서 아이디, 패스워드, 제출 버튼에서 onchange함수를 사용하여 이름과 값을 event에 넣고 name이 email이 맞으면 set하여 타겟 값을 바꿔준다.
그리고 form에 있는 submit함수를 눌러 제출했을경우 사이트 자체를 새로고침 하지 않으려고 event함수의 preventDefault()를 사용하였고,
newAccount가 ture인 경우 authService의 이메일과 패스워드를 저장시킨다.
state를 이용하여 account가 false면 login한다.