[TIL-DAY2] 웹개발 종합반 강의 3, 4, 5주차 수강 [Firebase]

Firebase

• 구글이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼
• 서버 개발 없이 제작 가능

Firestore Database

- firestore 세팅 코드

  // Firebase SDK 라이브러리 가져오기
  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";


  // Firebase 구성 정보 설정
  const firebaseConfig = {
      본인 설정 내용 채우기 
  };


  // Firebase 인스턴스 초기화
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);

- Firestore Database에 데이터 넣고, 화면 새로고침

<script type="module">
- 위와 같이 type에 module이 붙으면 onclick을 부를 수 없게 됨



    $("#postingbtn").click(async function () {        // click을 동적으로 달아줌 (type="module"로 변경했기 때문)
        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();
    })

- Firestore Database에서 데이터 가져오기

let docs = await getDocs(collection(db, "movies"));       // db에서 데이터 가져와서 card에 붙임
        docs.forEach((doc) => {
            let row = doc.data();
            let image = row['image'];
            let title = row['title'];
            let comment = row['comment'];
            let star = row['star']

            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">${star}</p>
                        <p class="card-text">${comment}</p>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);
        });