웹 개발 강의 정리 5 -완-

부트캠프

웹 개발 강의 정리 5 -완-

taehyon 2025. 3. 25. 17:51

[목차]

1. 5주차 배울것

2. [addDoc] 영화 데이터 넣기

3. [getDocs] Firestore Database에서 데이터 가져오기

4. 배포하는 방법

5. Github 사용 방법

6. Github Pages로 배포하기

1. 5주차 배울것

스파르타 플릭스로 데이터 넣고, 가져오기를 한번 더 복습 해보기로 하자!

2. [addDoc] 영화 데이터 넣기

영화 데이터 넣어보기

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

  let image = $("#image").val();
  let title = $("#title").val();
  let star = $("#star").val();
  let comment = $("#comment").val();

  let doc = {
      image: image,
      title: title,
      star: star,
      comment: comment,
    };

    await addDoc(collection(db, "movies"), doc)
    alert("영화가 추가되었습니다!");
    window.location.reload();
});

버튼을 누르면 이미지와 제목 별점 댓글을 추가하고 추가되었다는 알림을 주게 했다

*async 와 await 는 파이어베이스에 접속해서 데이터를 보내기 전에
잠깐 멈춰두는 기능이다

3. [getDocs] Firestore Database에서 데이터 가져오기

데이터 가져오기

let docs = await getDocs(collection(db, "movies"));
docs.forEach((doc) => {
  
  let row = doc.data();
  let image = row['image']
  let title = row['title']
  let star = "⭐".repeat(row['star']);
  let comment = row['comment']

  let tempHtml =
    `<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>${star}</p>
                          <p class="comment">${comment}</p>
                      </div>
                  </div>
        </div>`;

  $(".row").append(tempHtml);
});