-
글쓴이글
-
2022년 5월 1일 17:32 #32991
유용환참가자파이어 배이스 3강에서 코드를 실행시키는데 이런 오류가 나옵니다
GET http://localhost:5000/resources/tutorial/css/example.css net::ERR_ABORTED 404 (Not Found)
(index):71 Uncaught SyntaxError: Cannot use import statement outside a module (at (index):71:7)
(index):86 Uncaught ReferenceError: firebase is not defined
at (index):86:16어떻게 해야하나요
2022년 5월 1일 23:05 #33015
유용환참가자(index):76 Uncaught ReferenceError: initializeApp is not defined
at (index):76:17
(anonymous) @ (index):76
(index):81 Uncaught ReferenceError: firebase is not defined
at (index):81:16
(anonymous) @ (index):81
init.js?useEmulator=true:1 Uncaught SyntaxError: Identifier 'firebaseConfig' has already been declared (at init.js?useEmulator=true:1:1)
at init.js?useEmulator=true:1:1이런 또다른 에러가 나오는데 문제가 뭔지 잘 모르겠습니다.
구글에 검색해서 관련 해결 코드를 넣어도 똑같이 나옵니다.
2022년 5월 2일 19:30 #33084
유용환참가자<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<title>Welcome to Firebase Hosting</title>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script><script defer src="/__/firebase/9.7.0/firebase-app-compat.js"></script>
<script defer src="/__/firebase/9.7.0/firebase-auth-compat.js"></script>
<script defer src="/__/firebase/9.7.0/firebase-database-compat.js"></script>
<script defer src="/__/firebase/9.7.0/firebase-firestore-compat.js"></script>
<script defer src="/__/firebase/9.7.0/firebase-functions-compat.js"></script>
<script defer src="/__/firebase/9.7.0/firebase-messaging-compat.js"></script>
<script defer src="/__/firebase/9.7.0/firebase-storage-compat.js"></script>
<script defer src="/__/firebase/9.7.0/firebase-analytics-compat.js"></script>
<script defer src="/__/firebase/9.7.0/firebase-remote-config-compat.js"></script>
<script defer src="/__/firebase/9.7.0/firebase-performance-compat.js"></script>
<script defer src="/__/firebase/init.js?useEmulator=true"></script>
<style>
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">사과마켓</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<script>
const firebaseConfig = {
apiKey: "AIzaSyBvz6ps5fpCJ3wnaZCLvAshasvJMZDZdy8",
authDomain: "haha-e16b0.firebaseapp.com",
projectId: "haha-e16b0",
storageBucket: "haha-e16b0.appspot.com",
messagingSenderId: "1072073879277",
appId: "1:1072073879277:web:d38609a530576dd5a7e6e4"
};
const app = initializeApp(firebaseConfig);
</script>
<script>const db = firebase.firestore();
db.collection('product').get().then((결과)=>{
console.log(결과)
})document.addEventListener('DOMContentLoaded', function() {
const loadEl = document.querySelector('#load');
try {
let app = firebase.app();
let features = [
'auth',
'database',
'firestore',
'functions',
'messaging',
'storage',
'analytics',
'remoteConfig',
'performance',
].filter(feature => typeof app[feature] === 'function');
loadEl.textContent =Firebase SDK loaded with ${features.join(', ')};
} catch (e) {
console.error(e);
loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
}
});
</script>
</body>
</html>코드는 이렇게 되어있습니다
2022년 5월 2일 23:10 #33098
codingapple키 마스터9.7.0버전 설치한거같은데 강의처럼 8버전 설치하면 됩니다
그냥 강의밑에 <!DOCTYPE html> 부터 시작하는 코드 복붙하면 편합니다
2022년 5월 4일 02:31 #33181
유용환참가자<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<title>Welcome to Firebase Hosting</title><script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
</head>
<body><script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script><nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">사과마켓</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<script>
const firebaseConfig = {
apiKey: "AIzaSyBvz6ps5fpCJ3wnaZCLvAshasvJMZDZdy8",
authDomain: "haha-e16b0.firebaseapp.com",
projectId: "haha-e16b0",
storageBucket: "haha-e16b0.appspot.com",
messagingSenderId: "1072073879277",
appId: "1:1072073879277:web:d38609a530576dd5a7e6e4"
};
const app = initializeApp(firebaseConfig);
</script>
<script>const db = firebase.firestore();
db.collection('product').get().then((결과)=>{
console.log(결과)
})
</script>
</body>
</html>강의 밑에 복사해서 했는데
Uncaught ReferenceError: initializeApp is not defined
at (index):60:17
(anonymous) @ (index):60
firebaseNamespaceCore.ts:114 Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
at u (firebaseNamespaceCore.ts:114:27)
at Object.e [as firestore] (firebaseNamespaceCore.ts:196:31)
at (index):65:25이런 오류가나옵니다.
그리고 2번째 강의에서 파이어배이스 설정에 들어가서 sdk가지고 오는 화면이 업데이트 되어서 그런지는 몰라도 저는
참고: 이 옵션은 SDK 크기를 줄여주는 모듈형 자바스크립트 SDK를 사용합니다.
이런 말이 있는데 혹시 8버전이 모듈형이 적용안되어서 그런건가요
제거에는 맨위에 import { initializeApp } from "firebase/app";
이런것이 있는데 이것을 넣어도 Uncaught SyntaxError: Cannot use import statement outside a module (at (index):51:7)
이런오류가 나오고 sdk 설정 및 구성요소가 있는데 npm cdn 구성 이렇게 3가지로 나누어져있습니다.
강의에는 이런 것이 없는데 구글에 검색해서 나온 코드를 복붙해도 계속 같은 오류가 나오는데
어떻게 해야하나요.
해결이 잘 안되면 혹시 이부분만 다시 지금 현재상태의 상태에서 강의를 올려주실수있나요.
2022년 5월 4일 09:51 #33189
codingapple키 마스터const app = initializeApp(firebaseConfig); 이건 9버전 문법이라
firebase.initializeApp(firebaseConfig); 이걸로 바꾸면 됩니다
9버전 사용시 번들러 설정도 해야되서 아마 초보들은 못할듯요
-
글쓴이글
- 답변은 로그인 후 가능합니다.