Firebase 사용하기 (1. 설정)

회사에서 앱 개발 프로젝트를 참여할 당시, API를 별도로 만들 계획이었지만, Firebase Authentication과 FCM을 사용하기 때문에 팀장님께서 API를 별도로 만들지 않고 react-native에서 직접 Firestore에 접근하는 것을 제안해주셨습니다.

 

여기에서 저는 Nosql 사용과 새로운 Database 학습, react-native 경험이 흥미를 느껴 팀장님의 제안을 수락해 Firebase를 사용해보았습니다.

 

이 경험을 바탕으로 오늘부터 두 번에 걸쳐서 Firebase 사용방법에 대해서 정리해보려고 합니다.

 

저희 프로젝트에서는 Firebase v8을 사용했기에 참고하실 때 유의해주실 바랍니다.

 

먼저 Firebase 홈페이지에 들어가 시작하기 버튼으로 프로젝트 생성화면에 접근합니다.

https://firebase.google.com/

Firebase

프로젝트 추가로 접근하면 다음과 같이 프로젝트 이름과 Analytics 설정을 할 수 있습니다. Analytics로 사용자 분석이 가능하니 사용 설정 후 잠깐이라도 살펴보시는 걸 추천드립니다.

 

저는 회사에서 취향 분석하는 웹 서비스에 Analytics를 사용했을 때, 취향 별 사용자 수, 접근 국가 등 다양한 사용자 분석을 할 수 있었습니다! 

이렇게 테스트용 프로젝트를 완성했습니다.

왼쪽 탭을 보면 Firebase에서 제공되는 기능들을 확인할 수 있습니다. 먼저, Firestore를 추가해보겠습니다.

탭에서 Firesotre Database로 들어오면 데이터베이스 만들기로 접근할 수 있습니다.

데이터베이스 만들기의 첫번째 스텝은 보안 규칙 설정입니다. 저희는 프로덕션 모드로 데이터베이스를 시작했지만, 개발 단계이기 때문에 모든 접근을 허용해주었습니다. 

이후 위치까지 설정한다면 Firestore Database 생성됩니다. 이제 앱에서 Firebase에 접근할 수 있도록 설정해보겠습니다.

 

프로젝트 설정 하단에서 프로젝트에 앱을 추가해줍니다. 저희는 react-native로 개발을 진행했기에 세번째의 웹 앱으로 추가해주었습니다.

아래의 페이지처럼 Firebase SDK를 추가할 수 있는 코드가 나온다면 firebaseConfig를 복사하고 다음으로 넘어가겠습니다.

앞 서 말씀드렸던 보안 규칙을 모든 접근을 허용하도록 수정합니다. 규칙 탭에서 5번째 줄의 false를 true로 수정해서 저장합니다.

이렇게 하면 Firebase 홈페이지에서 진행할 작업은 다 끝났습니다. 마지막으로 Firebase Authentication을 사용자를 관리할 수 있도록 설정해보겠습니다.

 

먼저, Authentication 탭으로 이동해서 시작하기로 이동합니다.

해당 프로젝트의 Authentication을 이용하기 위한 로그인 방법을 설정합니다. 저희는 이메일/비밀번호로 Authentication을 이용했습니다. 다른 로그인 방법은 이후 글에서 알아보는 로그인 등 방법에서 차이가 있을 수 있으니 참고 부탁드립니다.

 

이렇게 모든 설정이 끝났습니다. 이제 프로젝트로 이동해서 Firebase를 install하고 적용해보도록 하겠습니다.

npm install firebase@8.6.5, @react-native-firebase/app@14.12.0, 
@react-native-firebase/auth@14.9.1, @react-native-firebase/firestore@14.9.1

저희 프로젝트에서 사용했던 버전은 위와 같습니다.

install이 성공적으로 끝나면 프로젝트의 root 폴더에 firebase.js 파일을 생성한 후 다음의 코드를 복붙합니다.

/{yourApp}/src/firebase.js

import "firebase/firestore";
import "firebase/auth"
import firebase from 'firebase/app'

const firebaseConfig = {
여러분 프로젝트의 config를 붙여넣습니다.
  };

  let app;
  if(firebase.apps.length === 0)
  {
    app = firebase.initializeApp(firebaseConfig);
    firebase.firestore().settings({ experimentalForceLongPolling: true, merge: true})
  }
  else {
    app = firebase.app();
  }

  const db = app.firestore();
  const auth = firebase.auth();

  export  { db, auth };

 

해당 페이지에서 export하는 db와 auth를 import해서 각 각 firestore와 authentication을 이용할 수 있습니다.

 

다음 글에서 제가 앱에서 db와 auth를 사용했던 방법을 공유해드리겠습니다.