5주차 숙제 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

5주차 숙제

[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z v0

5주차

강*영

・

추천

・

조회수

답변 완료

카드들 만드는 과정에서 기록하기 버튼을 눌었을 때 팝업창이 안 뜨고 카드가 생성이 안되고 있어요.

어제 도움 받고 코드 수정을 했을 때까지는 괜찮았는데 전에 있던 firebase 문서를 지우니 컬랙션도 없어졌습니다. 이런 경우에 어떻게 수정하면 될까요?

제 코드입니다:

</style>

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

const firebaseConfig = {

// https://firebase.google.com/?hl=ko

// 파이어베이스에 접속한 후 프로젝트 설정에 들어갑니다.

// 본인 firebaseConfig 내용으로 설정해 줍니다

apiKey: "AIzaSyADF2JC9ZZ7_u0rHk82mqwJCMMsMyDoedw",

authDomain: "sparta-21b81.firebaseapp.com",

projectId: "sparta-21b81",

storageBucket: "sparta-21b81.appspot.com",

messagingSenderId: "165928320453",

appId: "1:165928320453:web:2c1028ea6b50554d645fac",

measurementId: "G-E2TL49ZF3F"

};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

// 데이터 추가

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

try {

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

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

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

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

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

let doc = {

'title': title,

'comment': comment,

'star': star,

'image': image,

};

const docRef = await addDoc(collection(db, "foods"), doc);

// 각각 담은 변수를 컬렉션 필드에 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 image = row['image'];

let title = row['title'];

let comment = row['comment'];

let star = row['star'];

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

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

let temp_html = `<div class="col">

<img src="${image}"

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

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

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

</div>

</div>`;

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

});

</script>

</head>

<body>

</svg>

</a>

<img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/food.png"

class="icon">

<li><a href="#" class="nav-link px-2 text-danger">Foodcourt</a></li>

</ul>

<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."

aria-label="Search">

</form>

<button type="button" class="btn btn-warning me-2">Login</button>

</div>

</header>

<h1 class="display-5 fw-bold" style="font-family: 'Black Han Sans', sans-serif; ">스파르타 푸드파이터

</h1>

<p class="col-md-8 fs-4"> 본인만의 맛집을 소개하는 사이트입니다.

<br>맛집을 소개해 주세요!

</p>

</div>

</div>

</div>

<select class="form-select" id="inputGroupSelect03"

aria-label="Example select with button addon">

</select>

</div>

<textarea class="form-control" placeholder="Leave a comment here"

id="floatingTextarea"></textarea>

</div>

</div>

<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2162&q=80"

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

</div>

<img src="https://images.unsplash.com/photo-1481070555726-e2fe8357725c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2235&q=80"

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

</div>

<img src="https://images.unsplash.com/photo-1569718212165-3a8278d5f624?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80"

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

</div>

댓글 알림