0%

[React Native] 리액트 네이티브에 카카오 로그인 구현하기 #3 : React Native Firebase SDK 사용하기

이전 글 "[React Native] 리액트 네이티브에 카카오 로그인 구현하기 #2"에서 이어지는 내용입니다.




이번에는 리액트 네이티브에 Firebase SDK를 설정합니다. Firebase에서는 리액트 네이티브를 공식 지원하지 않기 때문에 오픈소스인 React Native Firebase 모듈을 사용합니다.

React Native Firebase
https://rnfirebase.io/
https://github.com/invertase/react-native-firebase


React Native Firebase는 현재 v6.0까지 나와있습니다. 하지만 최신 안정 릴리스(v5.3.x)를 사용하기를 권장합니다. 그리고 처음 시작하는 사용자는 React Native Firebase 스타터 키트를 사용해서 프로젝트를 생성해도 됩니다. 스타터 키트에는 Firebase 연동에 필요한 모든 설정이 미리 되어 있습니다.




아래 설치 방법은 React Native Firebase 가이드 문서를 보고 진행합니다.


react-native-firebase 설치하기

1
yarn add react-native-firebase

그리고 Firebase 콘솔에 접속합니다. App Project를 생성하고 Firebase > 설정(Settings) > 일반 > 내앱 메뉴로 이동합니다. 그리고 안드로이드앱을 선택합니다.
firebase_admin.png



Android 패키지 이름을 입력합니다. 패키지 이름은 android/app/build.gradle 또는 android/app/src/main/AndroidManifest.xml 파일에서 확인 가능합니다.
1



그다음 화면에서 google-service.json 파일을 다운로드 합니다. 그리고 그 파일을 android/app/google-services.json 경로에 복사합니다. 안내 페이지의 설명을 따라서 진행하면 됩니다.

2



그다음 안내 페이지 설명에 따라 소스 코드에 Firebase SDK를 설정합니다.

3


다음 파일에 아래 내용을 추가합니다.

android/build.gradle

1
2
3
4
5
6
7
buildscript
dependencies
...
// Add this line
classpath 'com.google.gms:google-services:4.2.0'



`android/app/build.gradle`
1
2
3
4
5
6
7
dependencies {
// Add this line
implementation 'com.google.firebase:firebase-core:17.0.0'

...
// Add to the bottom of the file
apply plugin: 'com.google.gms.google-services'



이 화면이 보이면 앱을 빌드하고 실행합니다. 앱이 실행되면 다음 화면으로 자동 이동합니다. 하지만 이 단계 건너뛰기 를 선택해도됩니다.

4



설정이 완료하고 나면 콘솔에 Android 앱이 추가된 것을 확인할 수 있습니다. 그리고 google-service.json 파일은 언제든지 다시 다운로드 할 수 있습니다.

5



리액트 네이티브에서는 다음과 같이 사용합니다.

1
2
3
4
5
6
7
8
import firebase from 'react-native-firebase';

//...

const firebaseAuth = await firebase
.auth()
.createUserWithEmailAndPassword(email, secret);
console.log('firebaseAuth', firebaseAuth);



Firebase를 연동하여 모바일앱을 개발해보고 싶은 초보 개발자에게 매우 좋은 튜토리얼이 있습니다. 간단한 TO-DO List를 관리하는 앱입니다. 쉽게 따라서 만들 수 있을 것 같습니다.



댓글, 팔로우, 좋아요 해 주시는 모든 분께 감사합니다.

항상 행복한 하루 보내시길 바랍니다.


vote, reblog, follow @anpigon


Originally posted on http://steemit.com