#4. FireBase 활용

지난 시간에 만들었던 브라우저는 데이터를 저장하지 못해 새로고침을 하면 기록했던 데이터가 모두 리셋되는 것을 볼 수 있었다.

이번 시간에는 이러한 데이터 저장을 위해 구글의 FireBase 를 활용하는 실습을 진행한다.

 

FireBase

구글이 만들어둔 백앤드 플랫폼이다.

클라우드 서비스처럼 미리 만들어진 플랫폼을 개발한 프론트앤드에 적용시켜, 기능 구현이 더 집중할 수 있도록 한다.

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

Firebase | Google's Mobile and Web App Development Platform

이 FireBase 에서 데이터를 관리할 수 있다.

 

데이터 관리를 위해서는 먼저 데이터 베이스의 개념을 알아야 한다.

DataBase 

데이터를 저장, 관리하는 데이터 모음. 프로그램의 일종이다.

방대한 양의 데이터를 묶고, 관리 및 이후 데이터 활용 시 더 효율적으로 사용하기 위해 존재한다.

다음과 같이 두 종류로 나눌 수 있는데,

1. 관계형 데이터 베이스

이미 틀이 짜여져 그만큼 정교한, 사람의 실수가 나면 안되는 데이터 관리에 사용한다.

2. 비관계형 데이터베이스

형식이 크게 정해져있지 않아 자유도가 높고, 앞으로 바뀔 여지가 많은 데이터 관리에 사용한다.

 

FireStore

FireBase 에서 들어갈 수 있다.

구글 클라우드 기반 NoSQL(Not Only SQL) 데이터 베이스로, 비관계형이다.

이를 활용하기 위해 '웹 앱' 을 만들고, Rules - read, write 를 true 로 변경한다.

 

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

이 코드를 통해 FireBase 와 연동 설정이 가능하다.

이를 기존의 Album 프로젝트에 활용할 것이다.

 

저 '본인 설정 내용 채우기' 에는 FireBase에서 제공하는 코드를 삽입하여 원하는 웹 앱 프로젝트와 연동한다.

추가적으로 <Script>에 type = “module” 이라는 타입을 지정할 것이다.

<Sctipt type = “module”>

 

코드 추가 삽입

$("#id").click(async function () {
    let doc = {};
    await addDoc(collection(db, "albums"), doc);
})

$("#postingBTN").click(async function () {
	let images = $('#image').val();
	let titles = $('#title').val();
	let contents = $('#content').val();
	let dates = $('#date').val();

	let doc = {
		'image' : images,
		'title' : titles,
		'content' : contents,
		'date' : dates
	};
	await addDoc(collection(db, "albums"), doc);
})

 

기존의 MakeCard() 에 만들었던 변수들을 데이터 베이스에 저장하기 위해 다음과 같이 코드를 변경한다.

onClick = "MakeCard()" 를 통해 함수 호출을 가능하게 했던 버튼은

<button id="postingBTN" type ~

으로 수정 및 id 값을 추가한다.

 

다만, 여기까지 따라오고 나니 기존에 onClick으로 동작하던 기능이 작동을 안하게 된다.

이는 button 에 직접적으로 명령을 내리던 것을 이제 id 값을 통해 스크립트에서 호출하게 만들 것이다.

$("#saveBTN").click(async function () {
	$('#PostBox').toggle();
})

이렇게 작성하고 나면 정상적으로 작동한다.

 

여기까지가 데이터 저장 과정이고, 이제 호출을 실습할 것이다.

 

데이터 호출 : GET

기존의 날씨 정보를 불러오는 것과 유사한 동작을 진행한다.

다만 조금 다른 개념으로, type = "module" 코드를 넣어주면 이전의 ready 함수가 로딩이 끝난 후에 호출이 되어 호출 타이밍이 더 느려진다.

해서 이 함수를 변경할 것이다.

 

기존의 ready 함수 본문만 제외, 함수 자체는 삭제.

이후 이전의 MakeCard() 함수 본문과 합친 후 변수값만 수정한다.

let docs = await getDocs(collection(db, "albums"));
docs.forEach((doc) => {
	let row = doc.data();
	console.log(row);

	let images = row['image'];
	let titles = row['title'];
	let contents = row['content'];
	let dates = row['date'];

	let temp_html = `
		<div class="col">
			<div class="card h-100">
				<img src="${images}"
				class="card-img-top" alt="...">
				<div class="card-body">
					<h5 class="card-title">${titles}</h5>
					<p class="card-text">${contents}</p>
				</div>
				<div class="card-footer">
				<small class="text-body-secondary">${dates}</small>
				</div>
			</div>
		</div>`;
		$('#card').append(temp_html);
});

여기까지 진행하면, 이전의 모든 기능을 동작하면서 (클릭할 때마다 새롭게 카드 추가, 토글 기능 등) 새로고침을 해도 이전에 저장한 카드가 지워지지 않는다.

즉, FireBase 를 통해 데이터를 저장, 호출할 수 있게 되었다.