파이어베이스(Firebase)는 구글(Google)이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼
개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와줌
파이어스토어(Firestore)는 구글의 클라우드 기반 NoSQL 데이터베이스
Firestore Database 생성하고 규칙을 들어가서 false -> true 로 수정을 해준다.
Firestore Database 를 연결하기 위해서
script type 을 module 로 설정을 해준다.
// Firebase SDK 라이브러리 가져오기
// Firebase 구성 정보 설정
const firebaseConfig = {
본인 설정 내용 채우기
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
그 다음 Firestore DB 세팅 코드를 복사해서 script 안에 넣어준다.
가운데 본인 설정 내용 채우기 칸에는
프로젝트 설정에 있는 SDK 설정 및 구성의 구성 영역의 코드를 복사해서 덮어준다.
$("#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();
})
이 코드대로라면 postingbtn id 값을 가지고 있는 곳을 클릭하면
선언된 변수들이 doc 변수로 들어가면서 key, value 값으로 저장되고,
await addDoc(collection(db, "albums"), doc);
코드를 통해 albums 컬렉션에 저장된다.
그러고 저장이 완료되었다는 문구와 함께 새로고침이 되면서 저장된 파일이 화면에 뜨게 된다.
반대로 저장된 값들을 불러오기 위해서는 어떻게 해야할까
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-muted">${date}</small>
</div>
</div>
</div>`;
$('#card').append(temp_html);
});
이전에 저장을 위해서는 addDocs 를 사용했다면 불러오기 위해서는 getDocs 를 사용했다.
그러고 반복문을 이용해서 데이터들을 불러왔다.
mongoDB 를 사용했던 때와 비교하면 아주 유사했다.