[클라우딩 어플리케이션 엔지니어링 TIL] 240420, 240421 - React Native 캠핑앱 만들기 프로젝트 마무리

Intro

---

프로젝트가 월요일까지라 주말에도 열심히 작업을 했다.

firebase authentication으로 로그인 연동을 하고 firebase firestore도 연결해 DB 설정하려 했으나 firestore는 연동에 실패했다 ㅠ

 

 

 

 

프로젝트 진행상황

---

React Native Firebase

https://rnfirebase.io/

React Native Firebase | React Native Firebase

 

react native 프로젝트에 firebase를 설치하는 방법에 대해선 위의 사이트에 자세하게 나와있다.

 

우선 프로젝트에 firebase를 사용하기 위해선 기본적으로 @react-native-firebase/app을 설치해야 한다.

그 외에 Authentication이나 firestore을 사용하는 경우 다른 패키지들을 추가로 설치해주면 된다.

npm install --save @react-native-firebase/app

 

그 후, firebase에서 받은 GoogleService-Info.plist 파일을 /ios/{projectName}.xcodeproj 에 저장한다.

pod install을 하면 엄청난 오류가 나오는데 위 링크에서 하나씩 해결해주면 된다.

 

 

 

 

Firebase Authentication

Firebase Authentication 기능을 사용하면 간단하게 로그인/회원가입을 구현할 수 있다.

SNS 로그인 기능도 제공하고 있다.

 

• firebase-auth 설치

npm install @react-native-firebase/auth
cd ios/ && pod install

 

 

firebase-auth에서 onAuthStateChanged 모듈을 통해 현재 인증 상태를 구독하고 상태가 변경될 때마다 이벤트를 수신할 수 있는 메서드를 제공한다.

앱을 나갔다 들어와도 인증 상태가 앱 캐시에 저장된다.

import React, { useState, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { MainStack, LoginStack } from './src/router';
import auth from '@react-native-firebase/auth';

function App(): React.JSX.Element {
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState();

  function onAuthStateChanged(user) {
    setUser(user);
    if (initializing) setInitializing(false);
  }

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber;
  }, []);

  if (initializing) return null;

  return (
    <NavigationContainer>{user ? <MainStack /> : <LoginStack />}</NavigationContainer>
  );
}

export default App;

 

 

로그인/회원가입 화면 구현

 

사용자가 로그인되어 있을 경우, Home 페이지로 이동하며 로그인되지 않았을 경우 로그인 페이지으로 이동하도록 구현하였다.

 

로그인/회원가입의 경우, 간단한 validation을 추가하였다.

모든 필드에 값이 입력이 되었는지 체크 -> 이메일 형식이 맞는지 -> 비밀번호 자리수 체크 -> 약관 동의 체크가 되어있을 경우 만 회원가입 가능 등...

 

시간상 Google, Facebook 로그인은 구현하지 못했다.

 

 

Firebase Firestore

Firebase Authentication은 정상적으로 설치하고 동작하였는데 Firestore를 설치하는 과정에서 많은 오류를 만났고 결국 기간 내에 해결하지 못했다.

 

⚠️ [!] The following Swift pods cannot yet be integrated as static libraries: The Swift pod FirebaseCoreInternal depends upon GoogleUtilities , which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set use_modular_headers! globally in your Podfile, or specify :modular_headers => true for particular dependencies.

 

• Podfile

pod 'GoogleUtilities', :modular_headers => true

 

:modular_headers => true로 설정하라는 오류가 나오고 이를 Podfile에 적으면

 

Module ‘FirebaseCore’ not found

 

이런 오류가 나왔다.

pod 'FirebaseCore', :modular_headers => true

 

계속 Podfile을 수정하고 Pod 초기화/설치를 반복하느라 많은 시간이 소요됐다 ㅠㅠ

 

⚠️ [!] The following Swift pods cannot yet be integrated as static libraries: The Swift pod FirebaseFirestore depends upon FirebaseCoreExtension and FirebaseFirestoreInternal, which do not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set use_modular_headers! globally in your Podfile, or specify :modular_headers => true for particular dependencies.

 

use_modular_headers! # 모든 Pods에 대해 모듈 헤더 사용 설정

pod 'FirebaseFirestore', :modular_headers => true

 

계속 반복...하다가 결국 해결하지 못했다.

 

본 프로젝트를 할 때 Flipper를 사용하고 있었고 Firebase는 Flipper와 함께 사용할 수 없었다.

그래서 이러한 문제들도 원인이 있었을 지도 모른다.

 

 

 

 

 

---

+ 추후에 팀 프로젝트에서 다시 Firestore를 연동하는 작업을 도전해 보았는데 그때 드디어 성공하였다!

이러한 실패들이 겪고 수월하게 성공할 수 있었던 것 같다.

그리고 팀 프로젝트에서 React-native가 버전이 올라가면서 내 맥북도 소프트웨어 업데이트가 필요했는데 맥북 소프트웨어 버전 문제였을수도..?

 

 

마무리

---

이번 프로젝트는 firestore를 사용해보자는 욕심에 firebase를 연동하는 과정에서 너무 많은 시간이 소모되어 구현해야 할 사항들을 모두 구현하지 못했다.  그래도 오류를 해결하는 과정에서 많이 배웠던 시간이었다. 공식 문서와 오류 내용을 꼼꼼히 읽어야겠다고 느꼈고 인내심도 기를 수 있었다. 흑..