* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

그냥 강의 다시 보는게 답 일까요?

작성한 코드 및 에러 메세지

<script type="module">

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";

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {

apiKey: "AIzaSyCZUqmHG3dbZ0s5gaUiSk3IFmwzK15VTME",

authDomain: "sparta-84d3a.firebaseapp.com",

projectId: "sparta-84d3a",

storageBucket: "sparta-84d3a.appspot.com",

messagingSenderId: "732287973731",

appId: "1:732287973731:web:47a10fefb2c549414b7b56",

measurementId: "G-LF742L94HJ"

};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

// 데이터 추가

$("#addBtn").click(async function () {

// title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.

try {

const docRef = await addDoc(collection(db, "foods"), {

// 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.

});

alert("음식이 추가 되었습니다!");

window.location.reload();

} catch (e) {

console.error("Error adding document: ", e);

}

});

// 데이터 읽기 및 카드 생성

$(".row-cols-3").empty();

const querySnapshot = await getDocs(collection(db, "foods"));

querySnapshot.forEach((doc) => {

let title = doc.data().title;

let comment = doc.data().comment;

let star = "⭐".repeat(doc.data().star);

let image = doc.data().image;

// 문서의 title, comment, image, star 필드에서 데이터를 추출한 변수명을 갖고,

// tempHtml 문자열에 각 데이터를 포함한 카드의 HTML 코드를 생성하세요.

$(".row-cols-3").append(tempHtml);

});

</script>