개요
- Firebase는 서버리스 서비스 중에 하나이다. Baas 중에 하나라고 표현할 수 있다.
- Baas는 는 Backend as a Service의 약자이다. → 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는 것이다.
- Firebase는 realtime-database인 firestore와 Hosting(서버 없이 웹 서비스를 배포할 수 있도록 도와주는 서비스)을 제공한다.
- 또한, 데이터 베이스, 소셜 서비스 연동(소셜 로그인 등), 파일 시스템 등을 API 형태로 제공해준다.
세팅
다음 자료를 참조한다.
React & Firebase 연동하기/데이터 가져오기
구조
1. Collection
- 문서(다큐먼트)의 집합
- 관계형 데이터베이스의 테이블과 유사
- 동일한 구조를 갖지 않는 문서들 저장 가능
※ 번역하면 문서라고 하고 Firestore 에도 문서로 되어있지만문서라고 하는 우리나라 단어의 뉘앙스와 그렇게 어울리지 않기 때문에원어 발음 그대로 '다큐먼트' 또는 '도큐먼트'라고도 함
2. Document
- 필드와 값을 갖는 JSON 형식으로 데이터를 저장할 수 있는기존의 SQL 데이터베이스보다 현대적인 데이터 저장 방식
- 다큐먼트 내부에 또 다른 Collection을 가질 수 있음문서(책)가 참고 도서 목록을 가지는 것이라고 볼 수 있음
※ 최상위에는 컬렉션이 위치하며 그 후로는 컬렉션과 다큐먼트가 서로를 포함할 수 있음
react 적용 방법
1. 파이어베이스 웹페이지에서 연동할 플랫폼에 적용할 SDK 생성
2. 소스코드로 파이어베이스 인스턴스 초기화
해당 파일은 루트에 존재할 것!
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore/lite';
// 나중에 환경 변수 처리
const firebaseConfig = {
apiKey: '',
authDomain: '',
projectId: '',
storageBucket: '',
messagingSenderId: '',
appId: '',
measurementId: '',
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export default db;
2-1. Firestore DB에서 규칙 true로 바꾸기
allow의 정책에 읽고 쓰기가 true가 되어야만 수정 가능하다.
3. CRUD 작성
import {
doc,
getDoc,
setDoc,
updateDoc,
deleteDoc,
} from 'firebase/firestore/lite';
import db from './firebase';
const document = doc(db, 'test', 'testId');
// Read
const documentSnapshot = await getDoc(document);
if (!documentSnapshot.exists()) {
return null;
}
// Create
const setResult = await setDoc(document, { test3: '333', test4: '444' });
// Update
const updateResult = await updateDoc(document, {
test3: '333',
test4: '555',
test5: '666',
});
// Delete
const deleteResult = await deleteDoc(document, 'testId');
doc
콜렉션을 거쳐서 하나의 도큐먼트(document) 레퍼런스를 얻는다.
인자로 firebase.js 에서 초기화하며 export 해준 db, 조회하려는 Document가 속한 Collection, 해당 Collection의 Document를 넣는다.
getDoc
doc 함수를 통해 구해준 도큐먼트 레퍼런스를 인자로 넣는다.
setDoc
setDoc(reference, data, options)
doc 함수를 통해 구해준 도큐먼트 레퍼런스를 data의 내용으로 수정한다. 옵션이 없다면 기본적으로 data의 값으로 전체 수정, 대체가 되어 기존 데이터는 사라진다.
옵션 값으로는 다음과 같다. {merge : true) 옵션을 통해 기존의 값을 보존하며 병합하는 방식으로 사용할 수 있다.
export declare type SetOptions = {
readonly merge?: boolean;
} | {
readonly mergeFields?: Array<string | FieldPath>;
};updateDoc
updateDoc(reference, data)
변경하려는 값이 이미 존재할 경우만 수정을 시도한다.
setDoc 함수를 항상 merge : ture 값으로 실행하는 것과 동일하다.
deleteDoc
deleteDoc(reference)
레퍼런스 뿐만 아니라 콜렉션까지도 전부 삭제한다.
@firebase/firestore/lite | Firebase JavaScript API reference
doc과 updateDoc을 이용한 예제
putTableCheckIn: async (username, date, value) => {
const dayTableRef = doc(db, 'day_table', date);
const data = { [`${username}.checkIn`]: value };
let response;
try {
response = await updateDoc(dayTableRef, data);
} catch (e) {
alert(e);
}
return response;
}
위와 같은 firebase DB를 doc과 updateDoc을 이용해 특정 document(20240223)의 필드 값을 수정하는 코드이다.
doc을 이용해 dayTableRef에 조작하려는 document에 대한 정보를 받아온다. updateDoc을 이용해 해당 document의 값을 수정할 것인데, 이때 updateDoc의 두번째 인자로 그냥 body만 딸랑 적어놓으면 해당 document가 body만 남기고 나머지 값이 사라져버린다. 각각 필드를 객체처럼 사용하며 다양한 필드값을 저장하고 싶다면 body 부분에 해당 필드.속성값 형태로 적어주면 필드의 한 속성만 수정하는 게 가능해진다.
레퍼런스
