1. Firebase


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

  • 웹 서버를 대신 만들어 주는 서비스
  • 서버 개발 없이 제작 가능
  • 백엔드 코드 한 줄 없이도 프론트지식( html, css, js )만 알아도 웹 서비스 출시 가능



2. 데이터베이스란?


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

나중에 찾기 쉽게 정리를 하는 것



3. 데이터베이스 종류


관계형 데이터베이스: SQL
*정리된 정보를 다룰 때 사용(은행, 대기업)

비관계형 데이터베이스: NoSQL
*복잡하거나 유연한 정보를 다룰 때 사용(스타트업)



4. Firebase의 Firestore


구글의 클라우드 기반 NoSQL 데이터베이스



5. Firebase 세팅 코드

<script type="module"> //script 타입을 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);



6. Firebase 데이터 추가

$("#id").click(async function () {
    let doc = {};
    await addDoc(collection(db, "콜렉션이름"), doc);
})



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

window.location.reload();: 페이지 초기화



6. Firebase 버튼 설정과 $(document).ready


버튼 설정

<script type="module">

이렇게 script type을 모듈로 하면 onclick()이 먹히지 않아 버튼에 id값을 만들어준 뒤 사용한다

$("#savebtn").click(async function () {
    $('#postingbox').toggle();
})

<button id="savebtn">추억 저장하기</button>

$(document).ready

스크립트 타입이 모듈일 경우 페이지가 로드되고 나면 작동하므로

$(document).ready(function () {
    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);
    })
})

$(document).ready를 아래처럼 뺄 수 있다

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



7. Firebase에서 데이터 읽기

let docs = await getDocs(collection(db, "콜렉션이름"));
docs.forEach((doc) => {
    let row = doc.data();
    console.log(row);
});

추억 앨범에 적용

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-body-secondary">${date}</small>
            </div>
        </div>
    </div>`;
    $('#card').append(temp_html);
});

참고