[Flutter] 플러터 Firebase 연동을 위한 초기 셋팅 방법

모바일 애플리케이션은 서버 연동없이 동작하는 앱도 많이 존재하지만 좀 더 유연한 애플리케이션을 제작하기 위해서는 대부분 서버가 필요합니다. 이번 포스팅에서는 플러터에서 Firebase 연동을 위한 초기 셋팅하는 방법에 대해서 배워보도록 하겠습니다.

Firebase 연동 초기 셋팅 따라하기

1. Node.js 설치 (바로가기)

다운로드 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

- Node.js 다운로드 하실 때 최신 버전보다는 대다수 사용자에게 추천하는 LTS 최신버전을 다운로드 받고 설치하세요.

( Firebase CLI 사용 시 노드 불필요하나 개발자라면 Node.js 에서 작업하시는 것을 추천합니다. )

2. Firebase Console 회원가입 / 플러터 프로젝트 만들기 (바로가기)

로그인 - Google 계정

이메일 또는 휴대전화

accounts.google.com

- 로그인 >> 프로젝트 만들기 >> 프로젝트이름 작성 >> 계속

- 애널리틱스 사용 않함 >> 계속 (애널리틱스 사용해도 무관하지만 현재 주제와 다르니 사용않함!)

- 플루터 로고 버튼 클릭( 중요 ) : 모바일 애플이케이션에 Firebase 를 추가하는 방법을 소개합니다.

작업공간 준비
- Firebase CLI 설치 및 로그인(Firebase login 실행)
  - Node.js 사용하여 명령어를 사용할 것이므로 Firebase CLI 설치 불필요
- Flutter SDK 설치
  - 이글을 보고 있으신 분들이라면 이미 설치 하셨을 거라 생각합니다. (다운로드)
- Flutter 프로젝트 만들기(Flutter create 실행)
  - Firebase 를 적용할 프로젝트를 오픈합니다.

3. Firebase Tools 설치

- Firebase를 Flutter 프로젝트에 연결하기 위해서는 Command 명령어를 사용하셔야 합니다. 명령어 사용을 위해서 Firebase Tools를 설치 합니다. ( 전역으로 설치하기 때문에 최초 한번만 설치하시면 됩니다 )

- VScode를 사용하여 프로젝트를 오픈 하셨다면 터미널 만들기

- 설치 명령어 ( 터미널에 입력 ) : 전역으로 설치되기 때문에 프로젝트 마다 하는게 아니고 첫컴퓨터에서 한번만 실행

npm install -g firebase-tools

4. Firebase Login (터미널 입력)

firebase login

터미널에 Firebase login 입력 후 질문은 그냥 엔터 누르면 왼쪽화면 처럼 로그인 계정 선택 페이지 나옴
로그인 할 계정 선택(클릭)

5. Flutter와 Firebase연결 - FlutterFire CLI 실행

- FlutterFire 실행을 하면 최종 에러가 발생합니다. 에러는 lib폴더 안에 firebase_options.dart 파일에서 발생을 합니다. firebase_options 은 사용자가 만든게 아니고 FlutterFire연결 시에 자동으로 만들어 지게 됩니다. 해당파일이 만들어 지고 에러가 난다면 정상적으로 진행한 것입니다.

6. Firebase 플러그인 추가

firebase 초기화 및 플러그인 추가 — Firebase 플러그인 추가 코드

- Firebase core 플러그인 추가 ( 터미널 입력 )

flutter pub add firebase_core

- Firebase core 확인 체크 ( pubspec.yaml 파일에서 확인 )

- 플러그인(firebase-core) 설치 후 firebase-options.dart 파일에 에러가 사라졌다면 정상!!

7. Firebase 초기화

- main.dart 파일에 Firebase-core 초기화 코드 추가 후 빌드 시 에러가 없다면 초기화 성공!! 전체 코드는 아래 포스팅을 복사해서 실행하시면 바로 샘플 결과를 확인하실 수 있습니다.

👇 👇 👇

[Flutter] 플러터 Firebase 연동을 위한 초기 셋팅 방법 - 소스 코드

플러터(Flutter)에서 Firebase 연동을 하는 초기 셋팅 전체 소스 코드입니다. 전체 코드이지만 실제로 Firebase 연동은 Firebase console과 함께 진행해야하므로 코드를 복사해서 붙혀넣는다고 해서 성공하

cokebi.com

Firebase Flutter 연동 마무리

위에 1번부터 7번까지 연동 초기 셋팅 하는 방법을 따라하고 나서 에러가 발생하지 않았다면 연동이 성공한 것입니다. 아래 이미지는 파이어베이스에서 제공하는 핵심 기능들이며, 자주사용되는 빨간색 칸의 내용들의 사용법을 포스팅 하도록 하겠습니다.

- Authentication : 회원가입 및 로그인 기능

- cloud Firestore : NoSQL 기반 데이터베이스

- Storage : 파일 읽고/쓰기 스토리지

- Functions : 서버 리스 기능의 이벤트 및 http 통신받는 기능

- cloud Messaging : FCM이라 불리며 모바일 기기에 메시지 전달 기능

- 플러터와 파이어베이스 초기 셋팅이 끝나셨다면 파이어베이스 인증을 통해 이메일/비밀번호 회원가입, 로그인, 구글 로그인을 아래 포스팅을 통해서 진행하실 수 있습니다.