숙제 3번 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

숙제 3번

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

5주차

강*영

・

추천

・

조회수

답변 완료

카드 생성 및 firebase에서 정보를 가지고 오는 작업에 어려움을 겪고 있습니다. 이런 상황에서 어떻게 변경하면 될까요?

저의 현재 코드입니다:

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 = $(`#foodTitle`).val();

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

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

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

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

let doc = {

'foodTitle': title,

'floatingTextarea': comment,

'inputGroupSelect03': star,

'floatingInput': 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['floatingInput'];

let title = row['foodTitle'];

let comment = row['floatingTextarea'];

let star = row['inputGroupSelect03'];

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

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

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

<img src="${floatingInput}"

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

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

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

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

</div>

</div>`;

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

});

</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>

댓글 알림