Flutter 12주차 - 플러터 앱과 파이어베이스 연동하기 (MacOS)

Flutter 12주차 - 플러터 앱과 파이어베이스 연동하기 (MacOS)

 

이번 주차에서는 파이어베이스를 사용하여 실습을 진행하기 위해 플러터 앱과 파이어베이스를 연동하는 방법에 대해 알아볼 예정이다.

 

목차

 

 

파이어베이스 프로젝트 만들기

 

Flutter 앱에 Firebase를 추가하는 방법은 아래 공식문서에서 자세히 안내하고 있다.

https://firebase.google.com/docs/flutter/setup?hl=ko&platform=android

 

위 공식문서를 참고하여 차근차근 연동해보자.

 

먼저 Firebase Console에 들어가보면 아래와 같이 기본 페이지가 나온다.

필자는 이전에 프로젝트를 만들어 놓은 적이 있어 다른 프로젝트가 보이는데 만약 이번이 처음이라면 프로젝트 만들기만 보일 것이다.

 

추후에 프로젝트를 생성하고 나면 여기에 생성될 것이다.

 

 

 

먼저 프로젝트를 만들기 위해선 먼저 Firebase CLI를 설치해야 한다.

Firebase CLI를 설치하는 방법은 여기서 확인할 수 있는데, 필자는 npm을 사용하여 설치를 진행할 것이기 때문에 node.js를 설치해줘야한다.

 

node.js는 node.js 공식 홈페이지에서 다운받을 수 있다.

홈페이지에서 현재 컴퓨터의 운영체제에 맞게 다운로드 파일을 추천해주므로 홈페이지에 들어가서 바로 Download Node.js 버튼을 눌러 설치하면 된다.

 

참고로 필자는 MacOS 환경에서 실습하고 있다.

 

 

설치가 완료되고 나서 터미널에서 아래 명령어를 쳐보자.

node --version

 

설치가 잘 되었으면 아래와 같이 노드 버전이 출력된다.

그리고 아래 명령어를 통해서 Firebase CLI를 설치하자.

약 1분 내외로 설치가 완료된다.

npm install -g firebase-tools

이제 아래 명령어를 입력하여 파이어베이스에 로그인해보자.

firebase login

 

필자는 이미 로그인했기 때문에 저렇게 뜨는데 만약 처음 로그인을 진행한다면 브라우저에 구글 로그인 창이 하나 뜰 것이다.

거기서 구글 로그인을 한 후 권한 허용을 눌러주면 로그인이 완료된다.

 

로그인이 정상적으로 완료되었는지 확인하고 싶다면 firebase login 명령어를 다시 입력해서 이미 로그인되었다고 뜨면 성공이다.

 

다음으로 아래 명령어를 입력해서 프로젝트를 하나 만들자.

firebase projects:create {프로젝트ID}

 

 

필자는 프로젝트 ID 'flutter-pjh1' 으로 지어줬다.

프로젝트 명을 어떻게 설정하겠냐고 하면서 입력을 기다릴텐데 엔터를 누르면 위 명령어에서 입력한 ID가 그대로 들어간다. 그냥 엔터를 누르고 넘어가도 되고, 본인이 원하는 이름이 있다면 입력해줘도 된다.

위와 같이 파이어베이스 프로젝트가 준비되었다고 뜨면 성공이다.

 

Firebase Console에 들어가서 아래로 스크롤해서 모든 프로젝트 쪽을 보면 방금 만든 프로젝트가 추가된 것을 확인할 수 있다.

 

 

 

이제 pub.dev 로 이동하여 firebase_core를 검색하자.

 

 

 

pubspec.yaml 파일에 dependencies 에 추가하고 Pub get 버튼을 눌러 패키지 설치를 완료하자.

 

Firebase Console에 들어가서 아까 만든 프로젝트를 클릭해서 들어가자.

 

 

프로젝트 개요에서 플러터 아이콘을 클릭하자.

 

 

그러면 아래와 같이 플러터 앱에 파이어베이스를 추가하는 가이드 화면이 나타난다.

우리는 1번째 작업공간 준비는 이미 완료했으므로 다음 버튼을 누르자.

 

 

FlutterFire CLI 설치 및 실행에 대해서 설명하고 있다.

 

 

가이드 대로 터미널에서 아래 명령어를 실행하여 flitterfire cli를 활성화하자.

dart pub global activate flutterfire_cli

처음 flitterfire cli를 활성화하면 PATH 설정을 하라는 안내문구가 나오는데 환경변수를 선언해줘야 다음 명령어를 사용할 수 있다.

 

아래 명령어를 입력하여 환경변수 편집기에 들어가자.

vi ~/.zshrc

 

혹시나 이런 창이 뜬다면 E 키를 눌러 수정하면 된다.

 

원하는 곳에 아래 명령어를 입력하고 Esc 키를 누른 후 :wq 를 입력하여 저장 후 vi editer를 빠져나오자.

export PATH="$PATH":"$HOME/.pub-cache/bin"

마지막으로 아래 명령어를 입력하여 수정한 파일을 적용하면 된다.

source ~/.zshrc

 

 

 

그런 다음 Flutter 프로젝트 디렉터리의 루트 에서 다음 명령어를 실행하자.

여기서 주의할 점은 반드시 프로젝트 데렉터리의 "루트" 경로에서 실행해줘야 한다는 점이다.

 

MacOS 에서는 Finder에서 프로젝트의 루트 경로까지 이동한 후 해당 폴더를 우클릭하여 '터미널에서 열기'를 클릭하여 해당 경로에서 바로 터미널을 열 수 있다.

 

그런 다음 아래 명령어를 실행하자.

flutterfire configure --project=flutter-pjh1

 

명령어는 본인이 만든 프로젝트 명에 따라 달라지므로 가급적이면 가이드에서 제공한 명령어를 그대로 복사하여 사용하는 것을 추천한다.

 

명령어를 실행하고 나면 아래와 같이 플랫폼을 선택하는 창이 나오는데 여기서 본인이 사용할 플랫폼을 선택하면 된다. 화살표 위, 아래 키로 이동할 수 있으며 스페이스 키를 누르면 선택/해제 할 수 있다.

 

일단은 안드로이드만 선택하자.

선택이 완료되면 엔터키를 눌러 다음으로 넘어갈 수 있다.

 

 

FirebaseCommandException 에러 해결법

 

만약 아래와 같이 어떤 안드로이드 애플리케이션 ID를 사용할 것이냐고 나타난다면 아마 뭔짓을 해도 다음으로 넘어가면 에러가 뜰 것이다.

 

FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command.

ERROR: Package name for Android app cannot be empty

 

이런 에러가 떴다면 뻘짓하지말고 아래 명령어를 입력하자.

dart pub global activate flutterfire_cli 1.0.1-dev.2

 

 

출처: https://github.com/invertase/flutterfire_cli/issues/326

[bug]: flutterfire package name error · Issue #326 · invertase/flutterfire_cli

 

대충 에러가 나는 이유가 build.gradle 프로젝트 셋업이 이전 버전이라 이러한 에러가 뜨는거 같다.

 

다시 아래 명령어를 실행하면 플랫폼을 선택하자마자 바로 설정이 완료되었다고 뜬다.

flutterfire configure --project=flutter-pjh1

 

정상적으로 설정이 완료되고 나면 프로젝트의 lib 폴더에 firebase_options.dart 파일이 생겨난 것을 확인할 수 있다.

 

다시 Firebase Console로 돌아와서 2단계 작업이 완료되었으므로 다음 버튼을 누르자.

 

 

 

 

코드 작성하기

 

이제 Flutter 프로젝트와 Firebase를 연동하기 위한 마지막 작업이 남았다.

3단계에서 설명하듯 연동을 완료하기 위해선 Firebase.initalizeApp을 호출하여 Firebase를 초기화해줘야 한다.

 

 

필자는 간단하게 lib 폴더 밑에 ch24_1 폴더를 생성하고 그 안에 test.dart 파일에 코드를 작성하려고 한다.

 

 

아래처럼 코드를 작성하자.

 

// Firebase와 Flutter 관련 패키지 임포트
import 'package:firebase_core/firebase_core.dart'; // Firebase 초기화 기능
import 'package:flutter/cupertino.dart'; // Cupertino 스타일 위젯을 위한 패키지
import '/firebase_options.dart'; // Firebase 설정 파일 (firebase_options.dart)

// 앱의 진입점 main() 함수
void main() async {
  // Flutter 프레임워크 초기화 작업을 보장하는 코드
  WidgetsFlutterBinding.ensureInitialized();

  // Firebase 초기화
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform, // 플랫폼에 맞는 Firebase 설정을 사용
  );

  // Firebase 초기화가 완료된 후 앱 실행
  runApp(MyApp());
}

// Flutter 앱의 구조를 정의하는 MyApp 클래스
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'Firebase Flutter App', // 앱의 제목
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Firebase 예제 202316035 박준혁'), // 내비게이션 바의 제목
        ),
        child: Center(
          child: Text('Firebase Initialized!'), // 화면 중앙에 텍스트 표시
        ),
      ),
    );
  }
}

 

아래와 같이 앱이 정상적으로 실행된다면 성공이다.

 

 

모든 작업을 마쳤으니 '콘솔로 이동' 버튼을 눌러 가이드를 종료하자.

 

 

이제 프로젝트 개요를 보면 내가 만들었던 Flutter 프로젝트와 연동된 모습을 볼 수 있다.