Firebase 연동하기!

hun2__2·2022년 3월 20일

Android-setting Firebase reactnative

이제 앱 개발을 시작하면서 추가하는 기능, 과정에대해서 일지를 작성할 것이다.

이전의 작업

CRNA를 이용해서 React-native app 생성
expo-cli연동
csss는 styled-component로 할 것이므로 type과 같이 install
reactNative navigation을 이용해서 botton Tabs, Native Stack 구조 만듬
main View는 FaltList를 이용해서 layout 잡을 것임
catogory는 grid구조로 지역별로 나눌 것임
data는 일단 더미데이터로 코드내에 만들어서 넣어두고 firebase 연결 이후 옮길것 (예정)

진행 작업

FireBase계정을 만들어서 app이랑 연결하기
reactNative FireBase Android setting
로그인 시 다른 화면으로 보이기

firebase 계정 만들기

https://console.firebase.google.com/u/1/
여기서 계정만들고 새로운 프로젝트 만듬
내 앱의 packgge name을 찾아서 넣어줘야 한다

package name 이 어디에 있냐면

android -> app -> build.gradle 내의 defaultConfig를 찾아 applicationID를 입력해주면된다.
현재는 필요없지만 debug signing certificate SHA-1
(구글인증, 핸드폰 번호, Dynamic Link로 인증이 필요할 때)이 필요하다면 console 창에서 cd android && ./gradlew signingReport 을 치고 이중 task :app:signingReport 를 찾아서 그 안에 SHA1을 복붙해주면 된다.
구성파일을 다운로드 받아서 앱내에 넣어줘야 한다.
FireBase SDK를 추가해주는데

andorid -> build.gradle 에서 아래 항목이 있는지 확인하고 없으면 넣어준다.
android -> app -> build.gradle 에서 아래 항목이 있는지 확인하고 없으면 넣어준다.

이렇게 안드로이드 앱과 firebase 프로젝트를 연동해주었다.

reactNative Friebase android setting

https://rnfirebase.io/
여기에서 하라는 대로 먼저
yarn add @react-native-firebase/app
install 해준다 나머지 밑의 과정은 FireBase 에서 해준 것이기 때문에 넘어가도된다.

적용됬는지 test용 authentication 사용해보기

fireBase 프로젝트에 들어가서 autentication 시작하기를 들어가 이메일을 활성화 시켜준다.

그리고 reactNative firebase 에서 필요한 모듈을 설치해준다.
(지금 같은 경우는 authentication을 설치.)
https://rnfirebase.io/auth/usage 여기서 하란대로
yarn add @react-native-firebase/app
yarn add @react-native-firebase/auth 을 install 한다.
( 다른 여러모듈이 있으니 필요한 모듈을 설치한다.)

그리고 다시 rebuilding 해주고 제대로 연동이 되었는지 확인해본다.

import auth from "@react-native-firebase/auth";

export default function App() {
  ...
    useEffect(() => {
    console.log(auth().currentUser);
  }, [])
}

콘솔창에 null이 뜨는 걸보니 정상적으로 연동이 되었다!

로그인 navigator 만들기

간단하게 이메일/비밀번호로 로그인을 구현해서 연동이 되는지 확인하자

먼저 로딩되고나서 로그인이 된 화면, 로그인이 안된 화면으로 나눠야 하기때문에 reactNative Navigation을 사용해서 navigater를 만들것이다. 그리고 firebase에 유저 정보가 있는지 확인 후 login view || main view를 띄워줄 것이다.

naviagator 를 이용해서 두가지 경우를 만들어주고
import auth from "@react-native-firebase/auth";를 이용해서 auth을 불러와
auth().onAuthStateChanged(() => {})를 통해서 회원정보가 있는지 판단한다.

그다음
login view -> join, login form
main view -> logout Btn, 콘텐츠들
을 만들어 준다.(예정)