3일차) 웹개발 종합반 4주차 파이어베이스

4주차 강의에는 그 동안 만들어온 웹페이지에 파이어베이스를 활용하는 내용을 배웠다.

기존에는 기록하기 버튼으로 카드를 저장해도 페이지를 새로고침하면 초기 상태로 돌아갔다. 하지만 카드를 만들때 필요한 요소들을 파이어베이스(클라우드)에 저장하면, 페이지를 새로고침하더라도 데이터를 파이어베이스에서 가져올 수 있으므로 기록한 카드가 사라지지 않고 유지된다. 

 

파이어베이스 사용) 

script 태그 안에 type = "module" 을 붙인다.  <script>  →  <script type="module"> 

태그 내용에는 파이어베이스 세팅 코드를 넣는다.

 

const firebaseConfig = {} 에 본인의 파이어베이스 구성 정보를 넣기

 

파이어베이스에 데이터 저장) addDoc

onclick() 과 같은 메소드 실행이 잘 안될 수 있음. 메소드는 아래와 같은 형식으로 구성함

$("#id").click(async function () { let doc = {저장할 데이터}; await addDoc(collection(db, "콜렉션이름"), doc); })

(기존) button onclick="makeCard()"

button id="postingbtn" 과 같이 id를 부여 후,
$("#postingbtn").click(async function () {
        let image = $("#image").val();
        let title = $("#title").val();
        let content = $("#content").val();
        let date = $("#date").val();

        let doc = { //저장할 데이터
          image: image,
          title: title,
          content: content,
          date: date,
        };
        await addDoc(collection(db, "albums"), doc);

        alert("저장 완료"); //저장 완료 알림
        window.location.reload(); //새로고침
});

 

파이어베이스로부터 데이터 가져오기) getDocs

let docs = await getDocs(collection(db, "albums"));
      docs.forEach((doc) => {
        let row = doc.data();

        let image = row["image"];
        let title = row["title"];
        let content = row["content"];
        let date = row["date"];

        //카드 붙이기
        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 class="card-text">${content}</p>
            </div>
            <div class="card-footer">
              <small class="text-body-secondary">${date}</small>
            </div>
          </div>
        </div>`;

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