Firebase를 프로젝트에 적용하기

이전 앨범 프로젝트를 사용

<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);

        // 데이터 추가 코드
        $("#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();
        })

        $("#saveBtn").click(async function () {
            $('#posting').toggle();
        })

        let url = "http://spartacodingclub.shop/sparta_api/seoulair";
        fetch(url).then(res => res.json()).then(data => {
            let state = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
            $("#state").text(state);
        })
        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_card = `
            <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>`;

            $('#cardView').append(temp_card);
        });
    </script>

결과