[Firebase] 실시간 데이터 베이스 (Realtime database)

Realtime database를 사용하기 위해서는 앱 등록 및 초기화 과정이 필요하다.
firebase console을 통해 앱 등록이 되어있다는 가정하에 진행하려고 한다.
다만 보안 규칙을 물을 때 잠금 모드가 아닌 테스트 모드로 진행할 것!

1. 프로젝트 만들기 및 앱 등록

2. SDK 설치 및 Firebase, 실시간 데이터 베이스 초기화

1. firebase 설치

$ npm install firebase
or
$ yarn add firebase

2. firebase, 실시간 데이터 베이스 초기화 및 객체 생성
   config 파일은 configuration(환경 설정)의 약자로 초기 설정을 구성하는 파일이다.

// firebase_config.js

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  // 콘솔에서 앱 등록을 하면 고유한 config 객체를 받는데 이곳에 넣어주면 된다.
  databaseURL: "https://DATABASE_NAME.asia-southeast1.firebasedatabase.app",
  // 설정한 리전에 따라 databaseURL이 달라지는 점 참고!
};

const app = initializeApp(firebaseConfig);
// firebase 초기화
const database = getDatabase(app);
// database 초기화

데이터 베이스 설계

내 프로젝트의 실시간 데이터 베이스로 들어가면 주소만 덩그러니 있는 것을 볼 수 있다.

기본 쓰기라고 해서 데이터를 set() 해주는 기능도 있지만 이것은 늘 데이터를 덮어씌우는작업을 하기 때문에 초기 데이터를 저장하기에는 부족하다고 생각했다.
그래서 나는 직접 firebase 페이지 내에서 초기 데이터를 저장해주었다.
1. 주소에 마우스를 가져가면 + 버튼이 나온다 > 클릭
2. key에 배열의 이름을 적고 옆에 + 버튼을 누른다. -> 경로를 지정해주는 것과 같다.
key와 value를 모두 입력하면 object, key만 입력하면 array가 되는 마법이 일어난다.
또한 저장은 엔터로 한다. 저장을 하지않고 화면이동을 하면 열심히 넣어놓은 정보가 모두모두 날아간다. 나는 3번 날렸다...🥲
3. 여러개의 객체를 하나의 객체 안에 넣어주려면 0부터 인덱스를 시작해야한다.

데이터 읽기

get()를 사용하면 데이터를 읽어올 수 있다.
또한 데이터를 읽을 때에는 이벤트 발생 시점의 스냅샷을 찍어 가져오는 형태로 정보를 가져온다.

ref 메서드는 database와 경로를 인자로 받는다. database는 config객체를 참고하여 도메인 주소와 apiKey등의 정보를 가져온다.
따라서 ref를 한마디로 정의하자면 데이터를 가져오기 위한 경로이다.
data안에 가져온 정보가 담기기 때문에 state에 저장해주면 바로 가공하여 사용할 수 있다.

// database.js

import {ref, get} from "firebase/database";
import {database} from "../config/firebase_config";

export async function getProducts () {
	return await get(ref(database, 'products')).then((snapshot) => {
		if(snapshot.exists()){
    		const data = snapshot.val();
      		const products = Object.values(data);
          	return products;
    	}
	})
}

data는 object의 형태로 들어오기 때문에 Object.values() 메서드를 사용하여 array형태로 변환해주는 작업이 필요하다.

데이터 업데이트

업데이트는 set()메서드를 사용하면 된다.

// database.js

import {ref, set} from "firebase/database";
import {database} from "../config/firebase_config";
import {v4 as uuid} from "uuid";

export async function setProducts() {
	set(ref(database, `products/${uuid()}`)).catch(console.error)
}

api 경로가 겹쳐서 set을 하게 되면 set 메서드의 특성상 덮어씌우게 된다.
그렇기 때문에 uuid를 사용하여 products -> uuid -> 제품 추가를 해주어야한다.

데이터 삭제

삭제는 remove()메서드를 사용하며 삭제할 api의 경로가 필요하다.

// database.js

import {ref, remove} from "firebase/database";
import {database} from "../config/firebase_config";

export async function deleteItem(id) {
	remove(ref(database, `products/${id}`)).catch(console.error)
}

삭제할 아이템의 경로만 잘 설정해주면 remove 메서드가 알아서 해결해준다!