TIL 강의를 듣고, 이전까지 밋밋하게 지었던 제목을 바꿔보았다.
시작에 앞서, 파이어베이스와 이를 통해 다루고자 하는 데이터베이스의 기초 개념을 알아보고 프로젝트를 만들어보자.
1. Firebase 기초
1.1 Firebase란?
구글이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼이다.
저 모바일 및 웹 애플리케이션 개발 플랫폼의 범주 안에 속한 것만 해도 아래 그림과 같이 정말 많이 있다.
그 중에서 Firebase의 특징적인 점이라고 하면 백엔드 시스템 없이도 웹 서비스를 쉽게 만들고 배포할 수 있도록 돕는 플랫폼이라는 것이다.
DB 구축 및 관리하는 작업도 큰 일인데, Firebase에서 DB/인증/푸시 알림 등 다양한 서비스를 미리 잘 통합하여 API로 제공하므로 조금 더 쉽고 빠른 개발이 가능하다!
비용 청구되는 부분만 조심하자..
https://firebase.google.com/pricing?hl=ko
1.2 데이터베이스란?
Firestore Database를 시작하기 전, 데이터베이스 개념을 짚고 넘어간다.
데이터베이스는 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음이다.
많은 양의 정보를 효율적으로 관리하기 위해 많이 사용된다.
크게 두 종류로 나뉘는데,
둘의 결정적인 차이점은 관계형 데이터베이스는 고정된 포맷 기반이고(엑셀처럼), 비관계형 데이터베이스는 그에 비해 바뀔 여지가 있는 데이터 모델 기반이다. 아래는 챗지피티가 잘 정리해준 도표이다.
최근 들어 DB가 클라우드 형태로 제공해주는 곳들이 많아졌는데 모니터링, 백업 등 관리하기에 용이하기 때문이다.
그 대표적인 예시 중 하나인 Firestore Database를 사용해본다.
2. Firebase 시작
2.1 Firebase 프로젝트 생성하기
일단 아래 링크를 통해 접속하여 로그인하자.
https://firebase.google.com/?hl=ko
이미 브라우저에 구글 로그인 정보가 남아 있다면, 접속하자마자 위 사진에서처럼 본인의 아이콘이 표시될 것이다.
로그인이 완료되면 Go to console을 클릭, 이동한 창에서 Firebase 프로젝트 시작하기 클릭
프로젝트 만들기 과정은 직관적이어서 내용을 생략하였다.
빨간 상자로 표시되어 있는 웹 버튼을 클릭한다.
다음으로 나타나는 화면에서는 앱 닉네임 등록 및 앱 등록 클릭, 아래 Firebase SDK 추가는 뒤에서 이어 진행한다.
2.2 Firestore Database 시작하기(설정 마치기)
파이어스토어(Firestore)는 구글의 클라우드 기반 NoSQL 데이터베이스
좌측 메뉴에서 빌드>Firestore Database 클릭
메인 영역에서 데이터베이스 만들기 버튼 클릭
아래와 같이 설정
위 사진은 규칙>false를 true로 변경>게시 작업을 순서대로 진행할 것을 나타낸다.
이 db에서 read, write 권한을 허용으로 바꾸는 부분이다.
다음으로 좌측 메뉴의 프로젝트 개요>설정 아이콘 클릭>프로젝트 설정 클릭하여 설정 창으로 넘어간다.
하단에 SDK 설정 및 구성 부분이 있다.
구성 radiobutton 클릭하여 Firebase 구성 객체를 가져올 준비를 마친다.
이제 DB를 사용할 프로젝트로 넘어가 준비 작업을 마친다.
script 태그 안에 Javascript 코드를 넣은 프로젝트 기준으로 정리한다.
1) script 태그에 type="module" 추가
※ type="module"을 추가하면 script 내부 코드는 document가 모두 로드 된 후에 호출된다. 즉, 내부에 $(document).ready(jQuery 기준)이 있다면 바깥으로 빼줘도 된다.
2) Firebase 세팅 코드(하단 스니펫 참조)를 script 태그 내부에 붙여넣기
// 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 구성 객체를 복사해 넣어준다.
2.3 Firestore Database에 데이터 넣기 by addDoc
예시
$("#postingbtn").click(async function () {
let doc = {'name':'bob','age':30};
await addDoc(collection(db, "albums"), doc);
})postingbtn id에 해당하는 버튼을 클릭하면, 아래와 같이 db에 doc 데이터가 추가된다.
※ 화면 새로고침 방법
window.location.reload();※ 기존에 직성한 onclick이 type="module"을 추가한 후 동작하지 않는 이유?
=> type="module"을 사용하면 모듈 스코프로 인해 전역 객체인 window와의 연결이 끊어져, window.onclick 속성 방식이 동작하지 않는다.
javascript vanilla에서는 addEventListener를 통해 이벤트 핸들러를 등록한다.
2.4 Firestore Database에서 데이터 가져오기 by getDocs
예시
let docs = await getDocs(collection(db, "albums"));
// console에 출력
docs.forEach((doc) => {
let row = doc.data();
console.log(row);
});3. 정리
