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

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

5주차 과제 진행 중인데 똑같은 파이어베이스 설정 값도 넣었는데 db 생성이 되지 않습니다.

이전 강의랑 코드를 다 비교해봐도 이유를 찾을 수 없어 문의드립니다 ㅠ

에러 메시지도 안뜨고 다 동작이 되지 않아 답답하네요 ㅠ

아래 js 파일 코드 넣어놓겠습니다.

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

  authDomain: "sparta-e5079.firebaseapp.com",

  projectId: "sparta-e5079",

  storageBucket: "sparta-e5079.appspot.com",

  messagingSenderId: "877199942254",

  appId: "1:877199942254:web:e1c2a8718102eefe08fc7f",

  measurementId: "G-W6SSYRK5DS"

};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

//---------------------------------------------------------------------------------------

// 데이터 추가

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

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

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

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

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

  // title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.

  try {

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

      'image': image,

      'title': title,

      'stars': stars,

      '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, "foodfighter"));

querySnapshot.forEach((doc) => {

  let image = doc.data().image;

  let title = doc.data().title;

  let stars = "⭐".repeat(doc.data().stars);

  let comment = doc.data().comment;

  let temp_html = `

            <div class="col">

              <div class="card h-100">

                <img src="${image}"

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

                <div class="card-body">

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

                  <p>${stars}</p>

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

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

                </div>

              </div>

            </div> ` ;

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

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

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

});