스파르타 코딩클럽(부트캠프) 웹개발 입문 4장

파이어베이스(Firebase)란

구글이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼이다.

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

출처 : 스파르타 코딩클럽

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

Firebase | Google’s Mobile and Web App Development Platform

---

 

---

데이터베이스란

데이터를 저장하고 여러사람들이 관리하는 데이터의 모음이다.

출처: 스파르타 코딩클럽

---

파이어스토어(Firestore)란

구글 클라우드 기반 NoSQL 데이터베이스이다.(커다란 창고)

출처 : 스파르타 코딩클럽

컬렉션(Collection)

• 여러 개의 문서들이 특정한 주제 또는 유형으로 그룹화 되어있는 폴더

문서(Document)

• 폴더 안에 들어있는 제목을 가진 파일

필드(Field)

• 파일 안에 들어있는 데이터의 작은 부분. 각 필드는 값으로 구성된다.

---

---

파이어베이스 세팅코드

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

 

파이어베이스에서 받은 코드를 const firebaseConfig을 지우고 붙여넣으면 설정이 마무리된다.

---

데이터 추가 코드를 입력하고 makecard()를 지우고 id 값을 준다.

 

    // Firebase 인스턴스 초기화

    const app = initializeApp(firebaseConfig);

    const db = getFirestore(app);

    $("#postingbtn").click(async function () {

        let doc = {'name':'bob','age':30};

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

    })

 

<div class="mybtn">

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

            <button type="button" class="btn btn-outline-dark">닫기</button>

        </div>

 

---

---

  $("#postingbtn").click(async function () {

        let image = $('#image').val();

        let title = $('#title').val();

        let date = $('#date').val();

        let content = $('#content').val();

        let doc = {

            'image':image,

            'title':title,

            'date':date,

            'content':content,

        };

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

    })

---

    $("#postingbtn").click(async function () {

        let image = $('#image').val();

        let title = $('#title').val();

        let date = $('#date').val();

        let content = $('#content').val();

        let doc = {

            'image':image,

            'title':title,

            'date':date,

            'content':content,

        };

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

        alert('저장 완료');

        window.location.reload();

    })

---

   $("#postingbtn").click(async function () {

        let image = $('#image').val();

        let title = $('#title').val();

        let date = $('#date').val();

        let content = $('#content').val();

        let doc = {

            'image':image,

            'title':title,

            'date':date,

            'content':content,

        };

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

        alert('저장 완료');

        window.location.reload();

    })

    $("#savebtn").click(async function () {

        $('#postingbox').toggle();

    })

---

데이터 읽기 코드 추가

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

    docs.forEach((doc) => {

        let row = doc.data();

        console.log(row);

    });

---

// Firebase 인스턴스 초기화

    const app = initializeApp(firebaseConfig);

    const db = getFirestore(app);

    $("#postingbtn").click(async function () {

        let image = $('#image').val();

        let title = $('#title').val();

        let date = $('#date').val();

        let content = $('#content').val();

        let doc = {

            'image': image,

            'title': title,

            'date': date,

            'content': content,

        };

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

        alert('저장 완료');

        window.location.reload();

        })

   

    $("#savebtn").click(async function () {

        $('#postingbox').toggle();

    })

    let url = "http://spartacodingclub.shop/sparta_api/seoulair";

    fetch(url).then(res => res.json()).then(data => {

        let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']

        $('#msg').text(mise)

    })

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

    docs.forEach((doc) => {

        let row = doc.data();

        let image = row['image'];

        let title = row['title'];

        let date = row['content'];

        let content = 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);

    });