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

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

강의는 두번이상 봤는데, 여전히 어렵네요

코드에 뭐가 문제일까요. 기록하기 눌러도 아무런 변화가 없네요

작성한 코드 및 에러 메세지

<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 변수에 저장해 주세요.

let image = $('#image').val();

let title = $('#title').val();

let star = $('#star').val();

let comment = $('#comment').val();

try {

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

image: image,

title: title,

star: star,

comment: comment

// 각각 담은 변수를 컬렉션 필드에 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(temp_html, snake case로 바꿈) 문자열에 각 데이터를 포함한 카드의 HTML 코드를 생성하세요.

let tempHtml =

`<div class="col">

<div class="card h-100">

<img src="${image}">

class="card-img-top" alt="...">

<div class="card-body">

<h4 class="card-title">"${title}"</h4>

<p class="card-text">"${comment}"</p>

<p>"${star}"</p>

<button class="card-button">주문하기</button>

</div>

</div>

</div>`;

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

});

</script>