React Native에서 Firebase SDK 추가 및 파이어베이스 인증, 데이터베이스, 스토리지 설정하기

firebase project 화면에서 웹을 추가한다.

FireSDK 추가 화면에서 firebase.json을 생성 한 후 firebaseconfig 값을 가져오고

내용을 복사하고 외부에 해당 값이 노출되면 안 되는 중요한 값이기 때문에 .gitigonre파일에 firebase.json을 추가한다.

 

{
  "apiKey": "",
  "authDomain": ".firebaseapp.com",
  "projectId": "",
  "storageBucket": ".appspot.com",
  "messagingSenderId": "",
  "appId": "",
  "measurementId": ""
}

RN에서 파이어베이스를 사용하기 위해서는 firebase 라이브러리 설치가 필요합니다.

 

 

utils폴더 아래에 firebase.js 파일을 생성하고 파이어베이스를 사용할 준비를 합니다.

import * as firebase from 'firebase'
import config from '../../firebase.json'

const app = firebase.initializeApp(config);

 

파이어베이스에서 Authentication 설정하기

fire project 빌드에서 authentication을 클릭한다.

 

파이어베이스 로그인 제공업체

파이어베이스의 인증 기능에서는 아래의 표와 같이 다양한 인증 방법을 제공한다.

이메일/비밀번호

전화

Google

Play 게임

게임 센터

Facebook

Twitter

GitHub

Yahoo

Microsoft

Apple

익명

 

이 중 이메일/비밀번호에서 사용 설정을 활성화하면 상태가 사용 설정됨이 된다.

 

Firebase 데이터베이스

Firebase 데이터베이스의 경우 파이어스토어(Cloud Firestore)와 실시간 데이터베이스(Realtime Database) 두 가지 종류를 제공합니다. Colud Firestore는 실시간 업데이트, 강력한 쿼리, 자동 확장의 기능이 Realtime Database에서는 실시간으로 데이터 저장 및 동기화 기능을 제공해준다 . 

이번 공부에서는 Cloud Firebase로 진행합니다.

자세한 데이터베이스 선택은 데이터베이스 선택: Cloud Firestore 또는 실시간 데이터베이스 을 봅니다.

이제 파이어베이스 빌드 Firestore Database를 클릭한 후  데이터베이스 만들기를 클릭합니다.

Colud Firestore위치는 설정한 후 변경할 수 없습니다.

한국에서 진행한다면 서울인 asia-northeast3을 선택하고, 아닌 경우 본인의 위치와 가까운 지역을 선택하여 진행하는 것을 추천합니다.

사용 설정 버튼을 클릭하면 Colud Firestore이 생성됩니다.

 

 

Firebase Storage

스토리지는 서버 코드 없이 사용자의 사진, 동영상 등을 저장할 수 있는 기능을 쉽게 개발할 수 있도록 기능을 제공합니다.

여기서는 스토리지를 이용해서 사용자의 사진을 저장하고 가져오는 기능을 사용하기 위해 스토리지를 설정합니다.

 

 

[참고 자료]

처음 배우는 리액트 네이티브 9장 채팅 애플리케이션