inutes에서 Firebase를 React Native Expo 앱과 통합하는 방법

강력한 서비스형 백엔드 플랫폼인 Firebase는 사용자 인증, 실시간 데이터베이스, 분석 등을 위한 포괄적인 도구 세트를 제공합니다. Expo로 구축된 React Native 앱에 Firebase를 통합하면 보안 인증 및 실시간 데이터 동기화와 같은 기능을 통해 애플리케이션을 빠르고 효율적으로 향상할 수 있습니다.

이 가이드에서는 5분 이내에 Firebase를 Expo React Native 프로젝트에 통합하는 방법을 보여줍니다. Firebase 설정, 사용자 로그인 및 등록을 위한 Firebase 인증 구현, 데이터 관리를 위한 실시간 데이터베이스 사용에 대해 다룹니다.

전제조건

시작하기 전에 다음 사항을 확인하세요.

1. Node.js가 설치되었습니다.
2. 기존 Expo 프로젝트(필요한 경우 expo init를 사용하여 프로젝트 생성).
3. Firebase 계정 및 프로젝트(필요한 경우 Firebase 콘솔에서 생성)
4. Expo Firebase SDK가 설치되었습니다(expo install firebase).

1단계: Firebase SDK 설치

Expo의 간소화된 설치 프로세스를 사용하세요. 터미널에서 Expo 프로젝트 디렉터리로 이동하여 다음을 실행하세요.

<code class="language-bash">expo install firebase</code>

필수 Firebase SDK가 설치됩니다.

2단계: Firebase 콘솔 구성

1. Firebase 콘솔에 액세스: Firebase 콘솔로 이동합니다.
2. 프로젝트 만들기(필요한 경우): 아직 만들지 않았다면 새 Firebase 프로젝트를 만듭니다.
3. 앱에 Firebase 추가: Expo는 웹 기반 접근 방식을 사용하므로 Firebase 콘솔 내에서 프로젝트를 웹 앱으로 구성하세요. 생성된 Firebase 구성 객체를 복사합니다. 다음과 유사하게 보입니다.

<code class="language-javascript">const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};</code>

3단계: Firebase를 React 네이티브 앱에 통합

Firebase 구성을 App.js(또는 기본 앱 진입점)에 붙여넣고 Firebase를 초기화합니다.

<code class="language-javascript">import React, { useState } from 'react';
import { TextInput, Button, View, Text } from 'react-native';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

// Your Firebase config object (from Step 2)
const firebaseConfig = { /* ... */ };

// Initialize Firebase
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app(); 
}

// ... rest of your app code (see below for authentication and database examples)</code>

이렇게 하면 구성을 사용하여 Firebase가 초기화됩니다. 다음 섹션에서는 인증 및 데이터베이스 기능을 추가합니다.

4단계: Firebase 실시간 데이터베이스 활용(선택사항)

Firebase의 실시간 데이터베이스는 클라이언트 간 실시간 데이터 동기화를 제공합니다. 기본 읽기/쓰기 기능을 추가하는 방법은 다음과 같습니다.

먼저 데이터베이스 모듈을 가져옵니다.

<code class="language-javascript">import 'firebase/database';</code>

그런 다음 데이터를 쓰고 읽는 함수를 추가하세요.

<code class="language-javascript">const writeData = () => {
  firebase.database().ref('/users/1').set({
    name: 'John Doe',
    email: email,
  }).then(() => {
    alert('Data saved!');
  }).catch(error => alert(error.message));
};

const readData = () => {
  firebase.database().ref('/users/1').once('value')
    .then(snapshot => {
      const data = snapshot.val();
      alert('User data: ' + JSON.stringify(data));
    })
    .catch(error => alert(error.message));
};</code>

5단계: 애플리케이션 실행

Firebase가 통합된 경우 다음을 사용하여 Expo 앱을 실행하세요.

<code class="language-bash">expo start</code>

Expo Go로 QR 코드를 스캔하여 사용자 가입, 로그인 및 데이터 지속성을 테스트하세요.

결론

Firebase를 Expo React Native 앱에 성공적으로 통합했습니다! 이는 Firebase의 인증 및 실시간 데이터베이스 기능을 활용하여 기능이 풍부한 애플리케이션을 구축하기 위한 견고한 기반을 제공합니다. 앱을 더욱 향상하려면 Firebase의 다른 서비스(푸시 알림, 클라우드 저장소 등)를 살펴보세요.

위 내용은 inutes에서 Firebase를 React Native Expo 앱과 통합하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!