안녕하세요
요즘 정신이없어서 오랜만에 글을 작성해요!!
플루터로 안드로이드랑 아이폰만 개발하다가 웹 개발을 처음해봤는데 파이어베이스 관련 오류가 발생했어요ㅠㅠ
아무생각없이 오류만 검색하다가 도큐먼트 참고하라는 글 보고 도큐먼트를 봤는데 너무 자세히 잘 나와있더라구요...
그래도 기본 셋팅 및 오류 정리를 하려고해요!
본 글은 아이폰 및 안드로이드 파이어베이스 연동이 다 된 후를 가정하여 작성한 글입니다.
1. 파이어베이스 웹 등록
먼저 웹 등록을 해줍니다! 이름 등록후 다음으로 넘어가면 SDK추가하라는 말이 나오는데 그냥 넘어가도 됩니다!
2. 웹 script 추가
web/index.html에 파이어베이스 관련 script를 추가해주면됩니다!
<body>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-functions.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
</body>이렇게만 파이어베이스에서 사용할 수있는 모든 js를 추가한거구요 여기서 필요한것만 골라서 해주면되요!
저는 알림만 사용할거라 app.js랑 messaging.js만 추가했어요
여기서 script를 추가하지않으면
TypeError: Cannot read properties of undefined (reading 'messaging') at new firebase_messaging_web.FirebaseMessagingWeb.new
이런 오류가 발생합니다
3. 앱 정보 추가
마지막으로 앱 정보만 추가해주면 끝이나요!
공식 문서에는
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);이렇게 추가하라고 적혀있어요!
직접 찾아서 넣으셔도되는데 웹 프로젝트 설정에 있는 내용이라 복사해서 쓰시는게 실수없이 완벽하게 될거같아 저는 그냥 복붙했어요!!
여기서 위 정보를 추가하지않으면...
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app). {Flutter web}
이런 오류가 발생합니다...ㅠㅠ
여기까지 파이어베이스 웹 기본 세팅이었어요!
생각보다 너무 간단한데 몰라서 조금 헤맸네요ㅠㅠ 앞으로 공식 문서를 잘보는걸루!!
다음엔 검색없이 후딱 끝낼수있을거같아요!!
그럼 안녕👋
'FRAMEWORK > FLUTTER' 카테고리의 다른 글
| flutter apple login android & ios 모두 완료 (5) | 2022.01.06 |
|---|---|
| Flutter 사파리 왼쪽에서 오른쪽으로 스와이프 뒤로가기 트랜지션 오류 수정은 이렇게! (0) | 2022.01.03 |
| [Flutter] web cors 오류 해결 (2) | 2021.11.25 |
| dart 특수문자 validation check (0) | 2021.08.26 |
| Modal Bottom Sheet Widget In Flutter! (0) | 2021.07.27 |