갓난애기도 배울 수 있는 React Native 가이드 ⏺️ 보너스편3 – Firebase 연동으로 클라우드 저장소와 인증 붙이기 (초간단 실습)

갓난애기도 배울 수 있는 React Native 가이드 ⏺️ 보너스편3 – Firebase 연동으로 클라우드 저장소와 인증 붙이기 (초간단 실습)

이제 앱 안에서만 데이터 저장하는 걸 넘어,
"클라우드에 데이터를 저장"하고,
"사용자 계정을 만들어 로그인"까지 하는 방법을 알아봅시다! ☁️🔐

Firebase를 이용하면 복잡한 서버 없이도
회원가입, 로그인, 데이터 저장을 빠르게 구현할 수 있습니다.

---

✅ 1. Firebase란?

• 구글에서 만든 앱 백엔드 서비스 플랫폼
• Authentication(로그인), Firestore(DB), Storage(파일저장) 등 제공
• 초보자도 쉽게 사용 가능
• 무료 티어로 충분히 학습 가능

---

✅ 2. Firebase 프로젝트 만들기

1. Firebase Console 접속
2. "프로젝트 만들기" 클릭
3. 프로젝트 이름 입력 → Google Analytics "사용 안함" 선택
4. 생성 완료

---

✅ 3. React Native 프로젝트에 Firebase 연결하기

🔧 설치

npm install @react-native-firebase/app @react-native-firebase/auth @react-native-firebase/firestore

(설치 후 npx pod-install 필수)

---

✅ 4. Android 세팅 요약

1. Firebase Console → Android 앱 등록
2. 앱 ID(package name) 입력
3. google-services.json 파일 다운로드 → android/app/에 저장
4. android/build.gradle 수정

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

1. android/app/build.gradle 수정

apply plugin: 'com.google.gms.google-services'

---

✅ 5. Firebase Authentication – 이메일/비밀번호 로그인 구현하기

📄 AuthService.js

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

// 회원가입
export const signUp = (email, password) => {
  return auth().createUserWithEmailAndPassword(email, password);
};

// 로그인
export const signIn = (email, password) => {
  return auth().signInWithEmailAndPassword(email, password);
};

// 로그아웃
export const signOut = () => {
  return auth().signOut();
};

---

📄 LoginScreen.js

반응형

import React, { useState } from 'react';
import { View, TextInput, Button, Alert, StyleSheet } from 'react-native';
import { signIn, signUp } from '../services/AuthService';

export default function LoginScreen({ navigation }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      await signIn(email, password);
      navigation.replace('Home'); // 로그인 성공 → Home 이동
    } catch (error) {
      Alert.alert('로그인 실패', error.message);
    }
  };

  const handleSignUp = async () => {
    try {
      await signUp(email, password);
      Alert.alert('회원가입 완료', '다시 로그인 해주세요.');
    } catch (error) {
      Alert.alert('회원가입 실패', error.message);
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="이메일"
        value={email}
        onChangeText={setEmail}
        style={styles.input}
      />
      <TextInput
        placeholder="비밀번호"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={styles.input}
      />
      <Button title="로그인" onPress={handleLogin} />
      <Button title="회원가입" onPress={handleSignUp} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 20 },
  input: { borderWidth: 1, padding: 10, marginBottom: 10, borderRadius: 6 },
});

---

✅ 6. Firestore 연동 – 클라우드에 할 일 저장하기 (선택)

📄 TodoService.js

import firestore from '@react-native-firebase/firestore';

export const addTodoToCloud = (todo) => {
  return firestore().collection('todos').add(todo);
};

export const fetchTodosFromCloud = () => {
  return firestore().collection('todos').get();
};

저장/불러오기 로직을 기존 ToDo 앱에 쉽게 통합할 수 있습니다.

---

✅ 7. 흐름 요약

기능 적용 방법

회원가입	createUserWithEmailAndPassword 사용
로그인	signInWithEmailAndPassword 사용
로그아웃	signOut() 호출
클라우드 저장	Firestore collection('todos') 사용

---

✅ 8. 이번 글에서 배운 것

• Firebase 프로젝트 만들기
• React Native 앱에 Firebase 연결하기
• 이메일/비밀번호 로그인 구현
• 클라우드 DB 연동 흐름

---

📘 다음 확장 주제 예고

Firebase Firestore를 활용한 실시간 동기화 앱 만들기
소셜 로그인 (Google, Apple) 붙이기
Push 알림(Firebase Cloud Messaging) 연동

---

 

React Native Firebase 연동,React Native Firebase Auth,React Native 회원가입 로그인,React Native Firestore 연동,React Native 앱 인증,React Native 클라우드 저장,React Native Firebase 설정,React Native 로그인 구현,React Native 인증 플로우,React Native 클라우드 앱 만들기

---