2023. 12. 21. 21:42ㆍ모바일어플개발/Flutter 실전어플 개발
안녕하세요~ totally 개발자입니다.
오늘은 파이어베이스 연동을 진행해보도록 하겠습니다. 추후 올릴 유튜브 강좌에서는 아래 연동 부분은 생략할 것이기 때문에 블로그 포스팅을 통해 참고하여 진행해주시기 바랍니다.
Step 1: 파이어베이스 콘솔에 접속합니다. https://console.firebase.google.com/u/1/?hl=ko
Step 2: 프로젝트를 추가합니다. 저는 test-project로 명명하겠습니다.
Step 3: 애널리틱스 사용 설정으로 해주시고 '계속'을 선택합니다.
Step 4: 기존에 생성하신 애널리틱스 계정이 있다면 선택해주시고 없으시면 새로 생성하시면 됩니다.
Step 5: 애널리틱스 계정을 아래처럼 입력하시고, 위치 선택 후 저장해주시면 됩니다.
Step 6: 새 프로젝트가 준비되었다고 나옵니다. 계속을 눌러줍니다.
Step 7: 그 후 아래 화면이 나오면 Flutter 아이콘을 눌러서 진행합니다.
Step 8: 이렇게 화면이 나오실텐데, Firebase CLI 설치를 해야 합니다. 아래 링크에서 해당되는 OS 선택하셔서 진행하시면 됩니다.
https://firebase.google.com/docs/cli?authuser=0&hl=ko#install_the_firebase_cli
Step 9: 저는 맥OS를 사용 중이어서, 아래와 같이 진행합니다.
터미널을 열어서 curl -sL https://firebase.tools | bash 입력하고 맥OS 루트 비밀번호를 입력하시면 됩니다.
Step 10: 그 다음 VSCode를 열어서 루트 디렉토리로 이동하신 다음에 firebase login을 입력합니다. 기존에 다른 사용자로 이미 로그인 되어 있는 경우에는 firebase logout를 입력하고 다시 진행하면 됩니다. firebase login을 입력하면 Allow Firebase to collect CLI 문구가 나오는데 Y를 입력합니다. 그러면
그 후 Google 계정으로 로그인 창이 나옵니다. 계정을 선택해주시면 됩니다.
계정을 선택하면 아래 Firebase CLI 화면이 나오는데 Allow(허용)해주시면 됩니다.
아래 화면처럼 나오면 성공입니다.
Step 11: 그 후 파이어베이스 쪽에서 1단계 다음을 누르시고 아래 명령어를 실행합니다.
dart pub global activate flutterfire_cli
그 후 flutterfire configure 부분을 복사하셔서 커맨드로 입력하고 platform 물어보면 android와 ios를 체크해주시면 됩니다. 스페이스 키로 선택하고 위아래 방향키로 움직입니다. 4개가 처음부터 다 선택되어 있으므로 바로 엔터키 누르고 넘어가시면 됩니다.
아래처럼 오류가 나올 수 있는데 이 부분은 아직 pubspec.yaml에 firebase core 패키지를 설치하지 않았기 때문입니다.
pubspec.yaml에 들어가셔서 다음처럼 패키지를 추가합니다. 그리고 flutter pub get하시면 firebase_options.dart의 모든 오류는 사라질 것입니다.
Step 12: 파이어베이스로 돌아가서 다음을 눌러줍니다.
Step 13: main.dart에 다음처럼 추가해줍니다.
Step 14: 실행해봅니다. 실행해서 아래 2가지 문제가 나오는 경우는 각각 아래 방법으로 해결하면 됩니다.
Problem 1: 만약 아래처럼 firebase_core 이슈가 나온 경우 pod install --repo-update를 진행해봅니다.
Problem 2: 아래처럼 cached_network_image 문제가 출력된 경우, pubspec.yaml에 아래처럼 3.3.0 버전으로 올려서 다시 flutter pub get한 후 실행합니다.
잘 빌드되어 실행되면 성공입니다.
파이어베이스 연동은 모두 마쳤으니 추후 강좌에서는 파이어베이스를 활용하여 DB를 활용해서 제품을 넣고 결제완료하였을 때 주문 데이터 DB에 데이터를 넣어보도록 하겠습니다. 감사합니다.
[유튜브 강좌 영상]