2023-03-20

파이어베이스 (Firebase): 프론트엔드에 집중할수 있게 백엔드의 기능을 지원

https://firebase.google.com/?hl=ko

Firebase | Google’s Mobile and Web App Development Platform

 

데이터베이스: 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음

데이터 베이스의 목적은 데이터를 잘 찾기 위함

관계형 데이터베이스- SQL (정리된 정보를 다룰 때 사용 , 큰틀이 있는 대기업,은행등에서 사용)

비관계형 데이터베이스- NoSQL (복잡하거나 유연한 정보를 다룰때 사용 ,자유도가 높고 언제든지 바뀌고 수정될 여지가 있는 스타트업 등에서 사용)

 

파이어스토어 (Firestore): 구글 클라우드 기반 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";

script type을 module로 설정(type을 module로 설정하게 되면 onclick을 사용할수 없게 된다)

// Firebase 구성 정보 설정

        const firebaseConfig = {

            본인 설정 내용 채우기

        };

        // Firebase 인스턴스 초기화

        const app = initializeApp(firebaseConfig);

        const db = getFirestore(app);

firebaseConfig부분에

위 코드를 복사붙여넣기를 실행

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

        // For Firebase JS SDK v7.20.0 and later, measurementId is optional

        const firebaseConfig = {

            apiKey: "AIzaSyA4mtwcw93IVPtozRAzWk6oYrs_MjtoUMk",

            authDomain: "sparta-9cd99.firebaseapp.com",

            projectId: "sparta-9cd99",

            storageBucket: "sparta-9cd99.appspot.com",

            messagingSenderId: "66396007230",

            appId: "1:66396007230:web:8d5f3bceb020e06ae8da6f",

            measurementId: "G-8D9XSN9Z5L"

        };

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

        })

사용자가 입력한 image,title,content,date값을 각 변수에 할당하고 딕셔너리형태로 doc라는 변수에 집어넣은 다음  addDOC함수로 데이터를 넣을수 있다.(addDOC의 경우 setDOC와 다르게  id를 따로 설정하지 않아도 자동으로 설정을 해준다)  위의 과정은 $('#postingbtn')이 가르키는 id가 postingbtn인 고유식별자를 찾아서 클릭이 되었을경우에 작동하는 함수이다

let docs = await getDocs(collection(db, "albums"));

addDOC함수로 데이터베이스에 데이터를 넣었다면 반대로 데이터베이스에서 데이터를 가져오기 위해서 getDOCS함수를 사용 (addDOC함수를 사용할때 albums라는 장소에 데이터를 넣었기 때문에 마찬가지로 albums라는 장소에서 가져와야한다)

 

데이터베이스에 저장되있는 데이터를 가져온다

getDOC함수로 데이터 가져와서 적용

 addDOC함수와 getDOC함수를 이용하여 데이터베이스에 데이터를 집어넣고 가져오는 과정을 학습할 수 있었음