
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
숙제 작성을 다한 것 같은데 콘솔창에 에러가 뜹니다 왜그럴까요?
고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
// Firebase 구성 정보 설정
const firebaseConfig = {
apiKey: "AIzaSyC5DUUM8j4P_0xiWVMDo425rT67uRpCak8",
authDomain: "sprata-24865.firebaseapp.com",
projectId: "sprata-24865",
storageBucket: "sprata-24865.appspot.com",
messagingSenderId: "526106325681",
appId: "1:526106325681:web:27ca775c92cf5be557e890",
measurementId: "G-DZW2BBQM2G" 본인 설정 내용 채우기
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
$("#addbtn").click(async function () {
let image = $('#image').val();
let title = $('#title').val();
let stars = $('#stars').val();
let comment = $('#comment').val();
let doc = {
'image': image,
'title': title,
'star': star,
'comment': comment,
};
await addDoc(collection(db, "푸드파이터"), doc);
alert('저장 완료!');
window.location.reload();
})
$("#savebtn").click(async function () {
$('#postingbox').toggle();
})
$("row-cols-3").empty();
let docs = await getDocs(collection(db, "푸드파이터"));
docs.forEach((doc) => {
let row = doc.data();
let image = row['image'];
let title = row['title'];
let comment = row['comment'];
let star = row['star'];
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${star}</p>
<p class="card-text">${comment}</p>
</div>
</div>
</div>`;
$('#card').append(temp_html);
});
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
$("#addbtn").click(async function () {
let image = $('#image').val();
let title = $('#title').val();
let stars = $('#stars').val();
let comment = $('#comment').val();
let doc = {
'image': image,
'title': title,
'star': star,
'comment': comment,
};
await addDoc(collection(db, "푸드파이터"), doc);
alert('저장 완료!');
window.location.reload();
})
$("#savebtn").click(async function () {
$('#postingbox').toggle();
})
$("row-cols-3").empty();
let docs = await getDocs(collection(db, "푸드파이터"));
docs.forEach((doc) => {
let row = doc.data();
let image = row['image'];
let title = row['title'];
let comment = row['comment'];
let star = row['star'];
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${star}</p>
<p class="card-text">${comment}</p>
</div>
</div>
</div>`;
$('#card').append(temp_html);
});
