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

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

나만의 엘범 만들기랑 스파르타 플릭스에서 학습한 addDoc 와 getDocs 의 코드랑

과제에 적용 되어있는 코딩이 달라 과제가 막혔습니다

4주차 5주차 강의를 복습해 보아도

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

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

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

라는 문구와

 try {

                const docRef =

 } catch (e) {

                console.error

의 코드들이 이해되지 않아 문의드립니다. 현재 까지 작성한 코드들 첨부드립니다.

작성한 코드 및 에러 메세지

 // 데이터 추가

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

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

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

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

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

            let doc = {

                'floatingInput': floatingInput,

                'foodTitle': foodTitle,

                'inputGroupSelect03': inputGroupSelect03,

                'floatingTextarea': floatingTextarea

            };

            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 row = doc.data();

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