파이어베이스 이해하기

쉽게 배우는 웹개발 4주차

[수업 목표]

• 파이어베이스와 파이어스토어를 이해하고 사용할 수 있다
• 파이어스토어에 데이터를 넣고, 가져올 수 있다.

1. 파이어베이스와 파이어스토어를 이해하고 사용할 수 있다

• 파이어베이스란?
  • 웹 서버를 대신 만들어 주는 서비스
  • 서버 개발 없이 제작 가능
  • 백엔드 코드 한 줄 없이도 프론트지식만 알아도 웹 서비스 출시 가능!
• 데이터베이스란?
  • 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음
  • 데이터를 잘 찾기 위해서 존재
  • 관계형 데이터베이스(SQL) → 엑셀과 비슷
    • 틀이 이미 짜여져 있는 은행, 대기업 등
  • 비관계형 데이터베이스(NoSQL)
    • 복잡하고 어떻게 바뀔지 모르는 스타트업 등
• 파이어스토어란?
  • 최신 클라우드 서비
  • 구글 클라우드 기반 NoSQL 데이터베이스
  • 커다란 창고와 같다고 생각하기
• 파이어베이스 코드 가져오기

 <script type="module">
      // 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 = {
          apiKey: "AIzaSyBE0TC9ql0MHFih2GaxmxOWm7NLIHa4gRs",
          authDomain: "sparta-1a391.firebaseapp.com",
          projectId: "sparta-1a391",
          storageBucket: "sparta-1a391.appspot.com",
          messagingSenderId: "105147788164",
          appId: "1:105147788164:web:b7b3f821fb266983b84bd1",
          measurementId: "G-CWJ8DCX6YG"
        };


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

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

• postbox에 입력했던 값들을 데이터베이스에 넣는 코드

$("#posingbtn").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(); //새로고침 화면
        })

• module이 있으면 onclick이 안됨
• module이 있으면 script는 가장 나중에 실행된다.
• 그래서 직접 동적으로 click을 입력 해줘야한다.

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);
        });
            $('#card').append(temp_html);                   

• 데이터베이스에서 데이터 가져오는 코드
• 가져온 데이터를 변수에 담고, 카드형식에 각각 값들을 넣어서 카드 생성

회고 : JQuery 어렵다.. 아직 이해가 부족ㅠ 강의 한번 더 들어보자!