[Firebase] Firebase 및 Firestore Database 시작하기

파이어베이스(Firebase)는 구글(Google)이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼

 

개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와줌

 

 

---

파이어스토어(Firestore)는 구글의 클라우드 기반 NoSQL 데이터베이스

 

 

Firestore Database  생성하고  규칙을 들어가서 false -> true  로 수정을 해준다.

 

Firestore Database 를 연결하기 위해서 

 

<script type="module">

 

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 = {

    본인 설정 내용 채우기

};

// Firebase 인스턴스 초기화

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

 

그 다음 Firestore DB 세팅 코드를 복사해서 script 안에 넣어준다.

 

가운데 본인 설정 내용 채우기 칸에는

 

프로젝트 설정에 있는 SDK 설정 및 구성의 구성 영역의 코드를 복사해서 덮어준다.

        $("#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();

        })

 

이 코드대로라면 postingbtn id 값을 가지고 있는 곳을 클릭하면

 

선언된 변수들이 doc 변수로 들어가면서 key, value 값으로 저장되고,

 

await addDoc(collection(db, "albums"), doc);

 

코드를 통해 albums 컬렉션에 저장된다.

 

그러고 저장이 완료되었다는 문구와 함께 새로고침이 되면서 저장된 파일이 화면에 뜨게 된다.

 

---

 

반대로 저장된 값들을 불러오기 위해서는 어떻게 해야할까

 

        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-muted">${date}</small>

                    </div>

                </div>

            </div>`;

            $('#card').append(temp_html);

        });

 

이전에 저장을 위해서는 addDocs 를 사용했다면 불러오기 위해서는 getDocs 를 사용했다.

 

그러고 반복문을 이용해서 데이터들을 불러왔다.

 

mongoDB 를 사용했던 때와 비교하면 아주 유사했다.