Firebase

1. Firebase 란?

 흔히, BaaS 라고하며, (Backend as a Serive) 데이터베이스, 소셜 서비스 연동(로그인), 파일시스템 등을 API형태로 제공해준다. 

 

https://firebase.google.com/?hl=ko 

Firebase

항상 느끼는거지만, 공식문서는 정말 유용한 정보들이 많지만 아직은 좀 낯설은 것 같다.

이내용들을 활용할 수 있으려면 앞으로 기초적인 흐름에 대해 이해를 좀더 해야될 것 같다.

 

이중에서, FireStore를 사용해보자. Hosting(서버 없이 웹 서비스를 배포할 수 있도록 도와주는 서비스)

 

2. FireStore 란?

 - FireStore 는 일명 realtime-database 를 제공하는 서비스이다.

    (실시간으로 데이터가 추가되고, 삭제되는걸 우리 클라이언트에 알려준다.)

 - 테스트를 위해 스파크요금제(무료)로 사용해보자.

 

3. FireBase 설정하기

  - FireBase 사이트 통해 프로젝트를 만들자.

또한, 프로젝트 이름을 정하고 약관동의, 나라 선택 등으로 애널리틱스 구성에 대한 선택한 후 만들면된다!

 

 

4. FireStore 설정하기

 파이어스토어는 유연하고 확장가능한 NoSQL 클라우드 데이터베이스이다.

 

* 구조

  - Collection : 문서(다큐먼트)의 집합

  - Document : JSON 형식으로 데이터를 저장할 수 있음 

 

* 파이어스토어 설정하기

  - 생성된 프로젝트 클릭 

  - Cloud Firestore 추가

  - 데이터베이스 만들기 클릭

  - 보안규칙 설정 

     ※ 아직은 실제 배포하는건 아니고 로컬영역에서 진행을 하고있으니 테스트모드로 시작을 하자.

  - Cloud Firestore 위치 설정

     → asia-northeast2 로 설정하고 이정보는 수정이 불가하고 수정하려면 다시 만드는수밖에 없다.

 

  - 대시보드에 파이어스토어 데이터 넣기 (데이터가 어떻게 들어가는지 알아보자)

    → 파이어스토어에서 IOS, 안드로이드, 웹 을 선택하여 대시보드에 진입할 수 있다.

    → 대시보드에서 컬렉션 시작을 눌러서 만들어보자.

    → 문서ID는 지정해도되고 자동으로 만들어도된다. 

        그외에 필드값은 아래와같이 지정해줄 수 있다.

5. Firebase 리액트에 연동하기

  ① 파이어베이스 패키지 설치

    yarn add firebase

 

  ② config 가져오기

     - src 폴더 하위에 firebase.js 파일을 만든다. 

    - firebase 대시보드에 웹 버튼을 눌러 들어가자. 앱이름을 적고 잠시기다리면 sdk 추가영역에 텍스트가 나온다

      이때, firebaseConfig 내용만 firebase.js 파일에 복붙해주자.

 

③ App.js 에서 firebase.js 임포트

    import { firestore } from "./firebase";

 

④ componentDidMount 에서 데이터 불러오기