시작

지난 글에서 Firebase의 간단 소개 및 가입을 소개했다. 이번 글은 Flutter 앱을 Firebase와 연동하는 방법을 소개할 것이다. 둘 다 구글에서 출시한 프레임워크이기 때문에, 궁합은 찰떡이다. 하지만, 과정이 조금 험난하여 상당히 힘들었다. 서론은 줄이고, 연동하는 방법과 내가 경험한 오류, 그에 대한 해결법를 설명하겠다.

* 주의
여기엔 Firebase 설치 및 연동에 관한 내용만 있고, Flutter 설치에 관한 내용은 나와 있지 않습니다.

참조

이것 저것 다 알아봤지만, 결국 공식 문서에 나와있는 대로 하는 것이 베스트였다. 아래 방법도 공식 문서를 따라한 것이다. 이걸 읽는 여러분은 공식 문서 읽으며 낑낑거리지 말고, 아래 방법으로 편하게 하길 바란다.

Flutter 앱에 Firebase 추가 - Firebase 공식 문서
Firebase CLI - Firebase 공식 문서

Firebase CLI 설정

1. 설치

[Flutter 앱에 Firebase를 추가]문서를 보면 Firebase CIL를 설치하라고 한다.

* CLICommand-Line Interface)이 뭔지 모르겠다면, cmd창 같은 키보드로만 조작하는 도구라고 생각하도록 하자

이때, 설치하기 귀찮다고 다른 방법을 찾지 마라... 정말 고생할 수 있다...

어째뜬, 저 파란색 링크를 클릭하면 CIL 관련 문서가 나타날 것이다.

그 바로 밑에 있는 [CLI 설정 또는 업데이트]를 참고해 설치를 진행할 거다.
참고로 나는 윈도우 유저이기 때문에, 윈도우 기준으로만 설명할 거다. 하지만 핵심은 같기 때문에 맥OS, 리눅스는 이 글과 공식 문서를 참고하며 설치해보자

윈도우에서 선택 가능한 선지는 위처럼 2개이다. Node.js의 사용 여부에 따라 갈리는데, 여기서 주의해야 할 게, Node.js를 쓰지 않더라도 Node.js는 설치해줘야 한다. 안 그럼 아래처럼 오류가 뜰 것이다.

################################################################################

     Welcome to...
   ######## #### ########  ######## ########     ###     ######  ########  ##
   ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##        ##
   ######    ##  ########  ######   ########  #########  ######  ######    ##
   ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
   ##       #### ##     ## ######## ########  ##     ##  ######  ########  ##

################################################################################


~ Let's make sure your Firebase CLI is ready...
undefined:1



SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at ChildProcess.<anonymous> (C:\snapshot\firepit\welcome.js:115:27)
    at ChildProcess.emit (events.js:315:20)
    at maybeClose (internal/child_process.js:1021:16)
    at Socket.<anonymous> (internal/child_process.js:443:11)
    at Socket.emit (events.js:315:20)
    at Pipe.<anonymous> (net.js:674:12)

>

이제 Node.js를 설치해보자. 위의 링크를 타고 2개의 버전 중 추천 버전을 설치하도록 하자

이제 설치파일을 실행하면 다음과 같은 창이 생길 것이다. 이후론 next를 눌러주다가 체크박스가 나타나는 경우가 있다. 이 내용은 자동 업데이트같은 거니, 체크해주도록 하자.

이제 Firebase CLI를 설치해주자. CLI 문서로 돌아가서 [Windows용 Firebase CLI 바이너리]를 다운 받는다. 이걸 실행하면 Firebase CLI를 구동할 수 있다.

다운 받았으면 실행파일을 자기가 원하는 위치로 이동시킨다.
(잘 모르겠으면, C 드라이브에 firebase 폴더 만들고 거기에 넣자)

그런 다음 CLI의 경로를 복사해서, [시스템 환경 변수]에 추가해주자.

그러면 실행했을 때, 잘 작동할 것이다.
하지만 이렇게 해도 문제가 생겼다면 C:\User\{사용자}\.cache 를 삭제해주자.

잘 실행됐다면, CLI에 다음 명령어를 입력해서 로그인하자. 뒤에 ":ci"를 붙여주면 다시 로그인 할 일이 있을 때, 더 편하게 로그인 할 수 있다.

firbase login:ci

웹 브라우저에 구글 계정에 로그인하고 개인정보 수집(?) 동의를 해주면, 아래처럼 창이 뜨면서 계정 로그인까지 끝냈다.

로그인이 제대로 됐는지 확인하려면, 아래 명령어를 입력해보자. 자신이 만든 Firebase 프로젝트들이 뜰 것이다.

firbase projects:list

2. 프로젝트 만들기

이 다음은 내 컴퓨터에 Flutter와 연동할 Firebase 프로젝트를 만들어야 한다.

우선 다음과 같은 명령어를 입력한다.

firbase init

그럼 다음처럼 화면이 나타날 것이다.

y를 입력하고, 다음은 프로젝트에서 이용할 서비스를 선택한다. 여기서 선택하는 것은 <빌드>에 해당하는 요소들로 자세한 건 다음 링크에서 확인할 수 있다. (Firebase Build 제품)
우선 간단한 설정만 할 것이니 Spacebar를 눌러 "Realtime Database"를 선택하고 Enter를 눌러주자.

다음은 프로젝트 생성 옵션을 선택한다.

1. 새로 프로젝트를 만들기
이 옵션은 내 컴퓨터에서 프로젝트를 만들고, 이를 Firebase 서버에 등록하는 방법이다.

그럼 프로젝트 고유 ID와 평상시에 표시될 ID를 입력하라 할텐데, 고유 ID는 되도록 다른 사람과 겹치지 않게 복잡하게 만들고, 평상시에 표시될 ID는 알아보기 쉽게 만들어도 괜찮다.

* 주의할 점
ID는 6~30자로 만들고, 숫자, 영소문자, -, ', ", !, 공백만 쓰도록 하자

2. 기존의 프로젝트 사용하기
이 옵션은 Firebase 서버에 존재하는 프로젝트를 내 컴퓨터로 불러오는 방법이다.
옵션 선택하고, 이미 만들어진 프로젝트 선택하면 된다.

이제 선택한 서비스 설정을 해준다. 나는 아까 "Realtime Database" 만 추가했으니 하나만 해주면 된다.

사진에서 나온 질문들

• 새로 만든 프로젝트에 DB를 추가할 건가?
• 서버는 어느 걸 쓸 건가?
• DB의 보안 규칙을 저장할 파일의 이름은?

이럼 프로젝트 생성이 끝난다.

CLI에 다음 명령어를 치거나 콘솔에 들어가서 확인해보면 새로운 프로젝트가 생긴 걸 확인할 수 있다.

firbase projects:list

Flutter와 연동

이제 마지막으로 Flutter와 연동만 하면 된다. 콘솔의 프로젝트에 들어가면 다음과 같은 화면이 뜬다. 여기서 Flutter 아이콘 클릭

그럼 연동하는 방법이 순서대로 나온다.

위의 방법에 따라, 다음 명령어들을 순서대로 실행한다.

// 아직 Flutter 프로젝트가 없으면, 원하는 경로로 이동해서 프로젝트 생성
$ cd {Flutter 프로젝트를 저장할 경로}
$ flutter cretae {프로젝트명}

// 연동할 Flutter 프로젝트의 디렉토리로 이동
$ cd {Flutter 프로젝트 경로}

// Firebase CLI에서 flutter 명령어 실행 가능하게끔 설정
$ dart pub global activate flutterfire_cli

// Firebase 프로젝트를 연동
$ flutterfire configure --project=example-protaku-879423

마지막 명령어를 실행하면, Firebase를 이용할 플랫폼에 관한 선택지가 나타날 것이다.
여기선 원하는 걸 선택해주면 된다. 잘 마무리되면 다음과 같은 결과를 볼 수 있다.

마지막으로 Flutter 프로젝트에 들어가서, Firebae_core 패키지를 설치해주고 Firebase를 사용할 위치에 다음 코드를 추가해주면 된다. (그냥 main 함수에 포함하는 게 편함)

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

Future<void> main async {
    ~~~
	await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
    ~~~
}

마무리

이렇게 해서 Firebase를 Flutter에 연동하는 방법을 알아봤다. 필자도 모든 오류를 이해하고 있는 건 아니라, 여기 설명되지 않은 오류는 인터넷에 검색해보기 바란다.