Mac에서 Flutter와 Firebase 연동하기

언젠가 포스팅으로 정리할 플러터 사이드 프로젝트 <파인애플톡>이

어느덧 Firebase 연동 단계에 접어들었습니다.

 

간략히 소개드리자면 <파인애플톡>은 카카오톡 클론코딩이고, 플러터로 개발해보는 첫 프로젝트가 되겠습니다.

이전에 다른 언어나 프레임워크들을 공부할때 강의를 듣다가 지쳐서

무엇 하나 제대로된 결과물을 내보지 못하고 중간에 포기한적이 많아서 아쉬웠는데요,

이번에는 바로 실전(?)에서 그때그때 궁금한것을 검색해보며 개발하는 것을 취지로 하고 있습니다.

 

이때까지는 로그인 정보나 친구 목록, 채팅 목록 등을 모두 json 형식으로 된 dummy data에 넣어두고

로컬에서 불러오는 식으로 구현을 해둔 상태입니다.

겉으로는 그럴싸해 보이지만 채팅앱의 기능을 제대로 구현하기 위해서는

이러한 데이터들을 잘 관리해줄 무언가가 필요하겠지요.

 

 

파이어베이스는 구글이 소유하고 있는 모바일 어플리케이션 개발 플랫폼으로,

위에 열거된 Auth, Hosting, Realtime Database 등 일일이 개발하려면 머리가 지끈지끈해지는 많은 것들을

쉽게 구현할 수 있도록 도와줍니다.

또한 사용자들의 앱 사용 정보(실시간 접속자, 이탈률, 사용시간 등)를 제공하여, 개발자들이 앱을 발전시키고 확장해나갈 수 있겠습니다.

 

아무튼 좋은건 한번 해봅시다.

 

dummy data로 구현해둔 DB를 모두 파이어베이스에서 관리하도록 변경하여,

<파인애플톡>을 그럴싸한 채팅앱으로 만들어보겠습니다.

 

---

 

우선 기본적인 연동은 아래 블로그에 잘 정리되어 있어서 따라해보았습니다.

티스토리의 신흥 강자, 플러터 꿈나무, 파이어베이스 천재의 블로그입니다. 강추!

 

https://bo-no.tistory.com/1

Flutter와 Firebase 연동

 

순서 :

1. Firebase CLI 설치

2. Firebase 프로젝트 생성

3. Flutterfire CLI 설치

4. 내 Flutter 프로젝트에 Firebase 프로젝트 연동

5. 내 Flutter 프로젝트 내에서 Firebase 초기화

 

 

아무 문제 없이 쉽게 설정됩니다.

 

그런데 앱을 실행해보니...

Firebase 연동해놨는데 왜 실행이 안되니... 왜 빌드가 안되니...

괴상하게도 오늘은 운수가 좋더니만...

 

problem.

 

FFI가 대체 뭔데 절 괴롭게 하는걸까요?

 

FFI는 외부 함수 인터페이스(Foreign Function Interface)로,

한 프로그래밍 언어(A)에서 다른 프로그래밍 언어(B)의 코드를 호출하기 위한 인터페이스입니다.

 

A로는 불가한 일이 B로는 가능하거나, A로는 비효율적인 일이 B로는 효율적인 경우 등의 상황에서

A는 FFI를 통해 B의 코드를 이용할 수 있는 것이지요.

예를 들어 C에서 C++ 코드를 호출할때 사용하는 extern "C" 등도 일종의 FFI라고 볼 수 있겠습니다.

 

 

solution.

아무튼 FFI 때문에 빌드가 안되는 상황인것 같으니

로그가 시키는대로 sudo gem uninstall ffi && sudo gem install ffi -- --enable-libffi-alloc을 수행합니다.

gem을 지웠다가 까는 것이고, gem은 Ruby에서 쓰이는 라이브러리 패키지입니다.

참고로 제 개발 환경은 M1 Mac입니다.

 

problem.

 

이상한 곳에서 또 에러가 나는데요, 사실 이럴줄 알고 마음의 준비를 해두었습니다.

 

throw duplicateApp(defaultFirebaseAppName);

Exception has occurred.

FirebaseException ([core/duplicate-app] A Firebase App named "[DEFAULT]" already exists)

 

 

https://stackoverflow.com/questions/70812697/a-firebase-app-named-default-already-exists

A Firebase App named "[DEFAULT]" already exists

 

모니터에서 빛이 나서 봤더니 스택오버플로우였습니다.

혹시 방금 모니터에서는 원래 빛이 난다고 생각하셨나요?

 

너 T야~? 죄송합니다.

 

문제가 발생한 곳은 main.dart에서 앱이 실행될때 Firebase 추가를 위해 넣은 아래 코드 부분인데요,

 

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  return runApp(MyApp());
}

 

solution.

로그로 미루어보면 Firebase App Name이 default값으로 설정되어 있어서 문제라는 것 같아 보입니다.

아래와같이 단순히 name 파라미터를 추가해주는 것으로 해결 가능합니다.

 

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    name: "devProject",
    options: DefaultFirebaseOptions.currentPlatform,
  );
  return runApp(MyApp());
}

 

 

 

매뉴얼대로 따라했는데 왜 이런 문제가 생긴 걸까요?

flutterfire configure를 수행하여 프로젝트를 연동하는 과정에서 의도한 파이어베이스 프로젝트가 아닌 다른 프로젝트를 선택해서

다시 연동하는 절차를 거친적이 있는데 그것 때문일수도 있겠다고 짐작하고 있습니다.

 

다음편은 로그인 기능을 연동하는 것으로 돌아오겠습니다.