React - Firebase

 

Firebase?

1. 2011년 만들어져 구글이 인수하면서 적극적으로 밀어주는 파워풀한 툴
2. 어플리케이션을 만들때 빠르게 만들어 주는 기능
   • 로그인 기능을 백엔드 서버부터 구현해서 security까지 보안에 굉장히 신경을 써야 하지만 그런것을 전혀 신경쓰지 않아도 기존의 이메일과 패스워드로 로그인을 안전하게 하는 것
   • OAuth라고 해서 다른 구글이나 페이스북이나 다양한 매체들을 이용해서 로그인 하는 것도 지원
   • 사용자의 데이터를 서버에 저장 - Cloud Firestore, Cloud Storage 같은 것을 이용하면 사용자의 정보를 저장할 수 있음
   • Realtime Database - 실시간으로 사용자가 업데이트 하면 다른 사용자가 바로 볼수 있는 쉽게 만들 수 있음
   • Hosting

Crashlytics

• 사용자가 제품을 쓰다가 crash가 되서 에러가 발생하여 프로그램이 죽었다면 발생한 경로나 에러 메시지를 개발자들에게 보여주는 crash reporting 시스템도 이용 → 제품의 에러 발생율을 낮추고 안정성잇게 계속 개발해 나갈 수 있도록 도와준다.
• 모니터링, 다양한 디바이스 테스팅

 

설치

• 구글 접속 → 시작 → 프로젝트 만들기

 

SDK

• 어떻게 통신을 해야 되는지 파이어베이스에는 어떤 api가 있는지 어떤 걸로 호출하고 어떤 순서로 설정해서 써야 되는지를 걱정하지 않아도 파이어 베이스에서 자체적으로 제공하는 sdk를 어플리케이션에 라이브러리처럼 포함만 해 놓으면 통신하는 것, 파이어베이스 서버에 업데이트 하는 것을 걱정하지 않고 단순히 SDK에서 제공하는 api함수들만 이용하게 되면 sdk가 알아서 자동으로 파이어베이스와 통신을 하게 된다.
• 필요한 sdk 전체를 어플리케이션에 추가해야 되니까 원하는 dependency가 하나 더 추가되서 SDK를 추가할지 말지 를 생각해야!

 

폴더에 설치

1. 터미널을 열고 yarn add firebase를 친다. (package.json에 firebase가 뜬다)
2. service 폴더를 만들고 이안에 firebase.js에 var firebaseConfig를 그대로 복사해서 넣어준다. (var를 const로 변경)
   • 위에 꼭 import를 적어주어야 하고 아래에는 export를 적어주어야 한다.
   • ! 만약 databaseURL이 없다면 Cloud Firestore를 클릭하여 생성해준다. (지역설정을 자료를 잘 찾아보고 선택), analytics()를 삭제
3. service 폴더에 auth_service.js파일을 만들 후 class AuthService를 만들어 준다 (firebase의 auth안에는 이제 구글 auth provider나 깃 provider등 을 이용하기 위해 providerName을 받아옴)
   • gitIgnore의 #API Keys에 .env를 적어준다
   • firebase에서 Authentication에서 set up sign in method를 누르고 어떤 것을 쓸것인지 설정
     • 구글과의 아이디와 비번 github의 토글을 누른다
       • github의 경우 토글을 누르고 밑의 긴 코드를 복사
       • 나의 github에 가서 설정에서 Developer settings를 클릭하고 OAuth에서 new를 누르고 Hompage URL은 존재하지 않는것을 써도 무방하니 https://아무거나.com 입력
       • Client Id와 Client secret을 복사해서 firebase에 다시와서 입력