[사전캠프]7일차-4주차

파이어베이스(Firebase)
개발사: 구글
모바일 및 웹 애플리케이션 개발 플렛폼이다.
백에드 인프라 구축, 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와준다.

데이터 베이스 
데이터를 저장하고 여러 사람들이 관리하는 데이터 모음이며 빠르게 찾기 위해 한다.

- 관계형 데이터베이스, SQL
정리된 정보를 다룰 때 사용한다.
틀이 이미 정해져있다.
-비관계형 데이터베이스, NoSQL
복잡하거나 유연한 정보를 다룰 때 사용한다.
비정

 

 

파이어베이스에서 내 코드를 가져와서 지난 번에 만들어놓은 'albun'에 script에 넣어주었다.

기록하기 버튼을 누르고 새 카드가 페이지에 등장해도 새로고침하면 사라지는 걸 해결해보겠다.

 

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


        const firebaseConfig = { //내 코드를 넣어주면 됨
            
        };

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

        // 어떤 id값에 클릭을 준 코드.
        $("#id").click(async function () {
            let doc = {};
            await addDoc(collection(db, "albums"), doc);
        })

전에 온클릭 줬던 버튼으로 가서 수정해준다.

            <button id="postingbtn" class="btn btn-dark">기록하기</button>

다시 올라와서 수정해준다.

// 어떤 id값에 클릭을 준 코드.
        $("#postingbtn").click(async function () {
            let doc = {};
            await addDoc(collection(db, "albums"), doc);
        })

 

 

확인하기

 // 어떤 id값에 클릭을 준 코드.
        $("#postingbtn").click(async function () {
            let doc = {'name':'bob', 'age':30};
            await addDoc(collection(db, "albums"), doc);
        })

이제 파이어베이스에 가보면 

age : 30

name : "bob"

라고 출력되어있다.

 

정상작동을 확인했으면 이제 '카드 저장하는 기능을 해주었던 코드'를 넣어주면 된다.

// 어떤 id값에 클릭을 준 코드.
        $("#postingbtn").click(async function () {
            function makeCard() {}
            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);
        })

 

---

 

		//카드 가져오기 getDocs, 카드 붙이기 addDoc
        
        // 카드 붙이기 addDoc
            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();
            console.log(row);
        });