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

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

숙제 반려로 4주차 강의에 다 나와있다길래 4주차 보면서 그대로 다시 해보는 중인데 안됩니다...

멀쩡히 나오던 음식사진이나 카드도 없어졌어요...

파이어 베이스에 컬렉션 추가까지는 했는데 필드값도 안나옵니다,,,

스타일 과 바디 값은 없어도 될것같아 접어두었습니다.

작성한 코드 및 에러 메세지

    </style>

    <script type="module">// Firebase SDK 라이브러리 가져오기

        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: "AIzaSyBFBd1HBgK2bFLXpE1VAwbYa4LiFOXTyyQ",

            authDomain: "spar-7dcde.firebaseapp.com",

            projectId: "spar-7dcde",

            storageBucket: "spar-7dcde.appspot.com",

            messagingSenderId: "933938447038",

            appId: "1:933938447038:web:90d470af7aa45e36d4d4ef",

            measurementId: "G-LF3J9DJL9N"

        };

        const app = initializeApp(firebaseConfig);

        const db = getFirestore(app);

        // 데이터 추가

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

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

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

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

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

            let doc = {

                'title': title,

                'comment': comment,

                'star': star,

                'image': image

            };

            // 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>