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

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

5주차 과제 진행 중에 기록하기 누르면 undefined 값이 한번 더 들어갑니다.

보고 계

신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.

작성한 코드 및 에러 메세지

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

        $(".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 = doc.data().stars;

            let image = doc.data().image;

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

            // tempHtml 문자열에 각 데이터를 포함한 카드의 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);

        });

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

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

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