SELF STUDY/Flutter

[Flutter] MAC에서 Firebase 연동 | Firebase CLI 설치 | VSCode에서 Firebase 연동

호이호이호잇 2024. 5. 9. 11:30
728x90
반응형

Flutter 에서  Firbase를 사용하기 위해 연동하는 방법을 알아보자!

 

출처 : https://developers-kr.googleblog.com/2016/08/have-you-met-realtime-database.html

오늘은 크게 두 가지로 나누어 정리를 해보겠다.

- 파이어베이스 설치

- 파이어베이스 프로젝트 생성 후 연동 

 

일단 큰 프로세스는 https://firebase.google.com/docs/flutter/setup?hl=ko&platform=ios#add_flutterfire_plugins 공식 홈페이지를 따라하면 된다.

 

1. 파이어베이스 설치 (Firebase CLI  참조)

공식 사이트 : https://firebase.google.com/docs/cli?hl=ko&_gl=1*lruw9z*_up*MQ..*_ga*MTkzMjk2NjgwMi4xNzE1MTI4MDQw*_ga_CW55HF8NVT*MTcxNTEzMDQzOC4yLjAuMTcxNTEzMDQzOC4wLjAuMA..

 

-1. 터미널 앱 실행

 

-2. 파이어베이스 설치

자동 설치 스크립트를 이용하여 설치

curl -sL https://firebase.tools | bash

 

위 명령어 입력 후, 비밀번호를 입력하면 자동으로 설치가 된다!

 

-3. 파이어베이스 로그인

설치가 잘 되었는지 확인해보기 위해 파이어베이스에 로그인을 해본다.

firebase login

명령어를 입력하면, 로그인을 할 수 있게 사파리가 자동으로 열린다.

 

로그인 완성~

 

-4. 프로젝트 리스트 확인

현재 가지고 있는 프로젝트 리스트를 확인하는 용도!

firebase projects:list

내가 가지고 있는 2개의 프로젝트를 확인 할 수 있다.

 


2. 파이어베이스 프로젝트 생성 후 Flutter와 연동 

-1. Firebase 홈페이지에서 프로젝트 생성

프로젝트 추가 버튼을 눌러서 프로젝트 추가를 진행한다.

나는 사실 테스트를 하느라고 미리 youngFlix-clone 으로 프로젝트를 생성해두었다.

생성 이후 단계에서 해당 프로젝트 이름으로 진행 예정

 

프로젝트 이름 지정

프로젝트 이름은 유일한 이름으로 지정해야해서, 기존 존재하는 다른 프로젝트와 겹칠 경우 아래에 추천 프로젝트 이름이 나온다.

참고해서 지정하면 될듯

 

구글 애널리틱스 여부 확인

구글 애널리틱스는 앱 사용 및 사용자 참여에 대한 통계를 제공하는 무료 앱 측정 솔루션이라고 함. (https://firebase.google.com/docs/analytics?hl=ko)

편한대로 지정하면 되는데, 나는 켜줌

 

이렇게 하면 프로젝트가 잘 생성된다!

 

-2. VSCode 실행

 

-3. FlutterFire CL 설치

VSCode 터미널에서 아래 명령어를 이용하여 설치해줌

dart pub global activate flutterfire_cli

 

이후 환경 변수 선언까지 해주기

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

 

-3. 파이어베이스 프로젝트 연동

프로젝트 선택

방향키와 엔터키를 이용해서 프로젝트를 선택 할 수 있다.

 

프로젝트를 선택하면, 지원 할 OS를 선택하는 화면이 나온다.

 

지원 할 OS 선택

스페이스 바를 이용해 OS를 지원 할 지 / 지원하지 않을지 표시

방향키를 이용해 OS 이동 가능

선택 완료는 엔터!

 

선택을 완료하면,

각 OS에 맞는 package name을 Firebase에 등록을 해주고,

각 OS에 해당하는 Id가 생성된다.

 

 

이렇게 하면 연동이 된 것!!!!!!

 

이제 파이어베이스를 이용해보즈아

728x90
반응형