본문 바로가기

플러터와 파이어베이스 1탄 - 플러터 3.0 업데이트 후 파이어베이스(firebase) 연동(1)

ironwhale 2022. 7. 3.

flutter 파이어베이스 데이터 가져오기 리부트

파이어베이스는 1인 개발자라면 반드시 익혀야 하는 하나의 스킬이라고 생각합니다. 누구나 쉽게 데이터를 가져오고 저장하는 기능을 구현할 수 있기 때문에 복잡한 백엔드 서버를 만들 필요가 없기 때문이죠. 그래서 1인 개발은 거의 파이어베이스로 앱을 만든다고 해도 과연이 아닐것입니다. 게다가 플러터 3.0 부터 파이어베이스가 정식 지원 하기 때문에 더 반가운데요. 이전에도 한번 파이어베이스로 데이터를 저장하고 가져오고 하는 것을 했는데 다시한번 정리하는 시간을 가져 보았습니다. 

Flutter 3.0은 파이어베이스가 정식 지원

플러터 3.0 업데이트 후 저에게 가장 크게 와닿는 변화는 firebase가 정식 지원을 한다는 점입니다. 이제 flutterfire사이트가 아닌 파이어베이스 공식문서에 플러터가 추가 되었는데요 자꾸 까먹는 파이어 베이스와 파이어 스토어 사용법을 티스토리에 정리하면서 복습하는 시간을 가져 보려고 합니다.

이 시리즈의 타겟층은 이미 한번 해본사람

이 시리즈의 주 타겟층은 이미 플러터로 파이어베이스 연결을 한번 해본사람입니다. 코딩셰프님, 코딩파파님, 오준석의 생존 코딩 등으로 이미 플러터로 파이어베이스를 사용해본 경험이 있는 사람이 동영상을 다시 보기 보다는 생각안나는 부분만 막히는 부분이 있을 때 그때 그때 보기 위해 한번 만들어 보았습니다.


플러터와 파이어베이스 사용법 시리즈 순서

1탄: 플러터 3.0 업데이트 후 파이어베이스(firebase) 설정법

여기서는 플러터 프로젝트와 파이어베이스를 연결하는 과정을 복습할 예정입니다.

2탄: 파이어 스토어에 자료 저장하기 (CREATE)
3탄: 파이어 스토어에 자료 읽어오기 (READ)
4탄: 파이어 스토어에 자료 수정하기 (UPDATE)
5탄: 파이어 스토어에 자료 삭제하기 (DELETE)

위 순서로 일단 진행해본 예정입니다만 중간 중간 수정될수 있습니다.


1. 파이어 베이스 프로젝트를 생성한다.

이 부분은 파이어베이스 홈피에 들어가셔서 새로운 프로젝트를 생성하시면 됩니다.

프로젝트 생성이 완료되어 해당 프로젝트로 들어가면 아래 화면이 나옵니다. 그리고 가운데 iOS+아이콘 맨 오른쪽에 플러터 아이콘이 생긴걸 보실수 있습니다. 그 아이콘을 클릭해보시면 두번째 캡쳐 화면 플러터 설정법이 나옵니다.

파이어베이스 프로젝트 화면

플러터 설정화면

파이어 베이스 플러터 설정 화면

이 화면에 나온 순서대로만 하면 쉽게 플러터와 파이어베이스를 연결할수 있습니다.

  • Install the Firebase CLI and log in (run firebase login)
  • Install the Flutter SDK
  • Create a Flutter project (run flutter create)

2. Firebase CLI 을 설치하고 파이어베이스에 로그인 합니다.

 

Firebase CLI 참조  |  Firebase Documentation

FirebaseVisionOnDeviceAutoMLImageLabelerOptions

firebase.google.com

3. 플러터 프로젝트를 생성합니다.

저는 flutter3_train이란 이름으로 생성했습니다.

4. 터미널에 명령어 입력으로 쉽게 연결하기 

다음 버튼을 누르면 터미널에 입력할 명령어가 있습니다. 그대로 복사해 입력해주시면 됩니다.

저는 보통 플러터 프로젝트 폴더에 들어가서 명령어를 입력합니다.

  • dart pub global activate flutterfire_cli
  • flutterfire configure --project=flutter3-train

 

flutterfire configure --project=flutter3-train 실행후 터미널

flutterfire configure --project=flutter3-train를 실행하면 위와 같은 화면이 나옵니다.
그리고 lib/firebase_options.dart 이 파일이 자동으로 생성되는것을 볼수 있습니다.

여기 까지만 하면 일단 아래그림과 같이 방금 만든 프로젝트 이름이 파이어 베이스에 표시 되는것을 볼수 있습니다.

 

이제 파이어 베이스에서 할 작업은 끝났습니다. 이제 플러터 프로젝트로 가서 작업할 차례입니다.

글이 길어지는거 같아 한번 끊고 다음 포스팅으로 넘어가겠습니다.


댓글