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

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

firebase에는 데이터 입력이 잘 되는데 웹화면에는 카드가 안뜹니다.

작성한 코드 및 에러 메세지

오류 발생 시, $("#addBtn").click(async function () {

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

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

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

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

            let doc = {

                'image': image,

                'title': title,

                'star': star,

                'comment': comment

            };

            await addDoc(collection(db, "foods"), doc);

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

            window.location.reload();

        });

        let docs = await getDocs(collection(db, "foods"));

        docs.forEach((doc) => {

            let row = doc.data();

            let image = row['image']

            let title = row['title']

            let star = row['star']

            let comment = row['comment']

            let temp_html = `

             <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">${star}</p>

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

                    </div>

                </div>

            </div>

            `

            $("card").append(temp_html);

        });

------

<div class="mycards">

    <div id="card" class="row row-cols-3 row-cols-md-3">

    </div>

</div>

작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!