파이어베이스 - 데이터베이스 (앵귤러, 리액트)

클라우드 백엔드 서비스인 파이어베이스의 데이터베이스 서비스를 사용하는 방법을 보겠습니다. 파이어베이스 데이터베이스는 최신버전인 파이어베이스와 구 버전인 실시간 데이터베이스가 있으며 대동소이하므로, 이 글에서는 최신버전인 파이어스토어를 설정하고 애플리케이션에 연결해 보겠습니다.

목차

• 파이어스토어 서비스
  • 서비스 생성
  • 데이터 생성하기
  • 규칙지정
    • ▶ 일반 데이터
    • ▶ 회원관리
  • 인덱스 지정
• 애플리케이션에서 파이어스토어 사용하기
  • 애플리케이션과 파이어베이스 연결
  • 리액트
    • ▶ 아이템 리스트 가져오기 (getDocs)
    • ▶ 쿼리 추가하기
    • ▶ 아이템 가져오기 (getDoc)
    • ▶ 아이템 추가하기 (addDoc)
    • ▶ 아이템 수정하기 (updateDoc)
    • ▶ 아이템 삭제 (deleteDoc)

파이어스토어 서비스

서비스 생성

좌측메뉴에서 Build -> Firestore Database 순으로 클릭

Create database 클릭

프로덕션모드와 테스트모드 중 테스트모드 선택 (프로덕션모드는 안전하나 개발환경에서는 적합하지 않음). 추후에 변경가능.

지역선택

데이터 생성하기

Start collection 선택

컬렉션 이름 지정 (관계형의 테이블 이름)

필요한 정보입력. 아이디는 'Auto-ID' 버튼을 클릭하여 자동으로 생성 권장

데이터 추가는 Add document를 클릭

규칙지정

기본적으로 누구나 데이터베이스의 데이터에 접근, 수정, 삭제가 가능합니다. 세팅의 규칙에서 이러한 설정의 수정이 가능합니다.

▶ 일반 데이터

예를 들어, 포스트라고 가정하고, 로그인한 유저만 포스트를 작성할 수 있고 자신의 글만 수정, 삭제가 가능한 경우 규칙은 아래처럼 지정합니다.

match /<tableName>s/{<tableName>} {
  allow read;
  allow create: if request.auth != null;
  allow delete: if resource.data.userRef == request.auth.uid;
  allow update: if resource.data.userRef == request.auth.uid;
}

▶ 회원관리

인증의 경우 수정과 삭제의 경우만 자신인지 확인이 필요하므로 아래처럼 작성합니다.

match /<tableName>s/{<tableName>} {
  allow read;
  allow create;
  allow update: if request.auth.uid == <tableName>;
  allow delete: if request.auth.uid == <tableName>;
}

인덱스 지정

일부 쿼리는 작동을 위해 테이블 인덱스 지정이 필요합니다. 메뉴 중 인덱스를 누름

인덱스를 추가할 컬렉션의 이름, 기준이 될 필드 (두 개 이상)를 추가 

컬렉스 체크 후 저장

애플리케이션에서 파이어스토어 사용하기

애플리케이션과 파이어베이스 연결

파이어베이스 - 연결하기 (앵귤러, 리액트)

리액트

 

▶ 아이템 리스트 가져오기 (getDocs)

필요한 기능들 추가

import { collection, getDocs } from 'firebase/firestore'
import { db } from '../firebase.config'

컬렉션은 관계형 데이터베이스의 테이블 개념으로 아이템 리스트를 가져오기 위해서 먼저 해당 컬렉션을 가져와야 합니다. 아래와 같이 collection에 해당 애플리케이션 구성이 담긴 파일 및 가져올 컬렉션 추가

 

반환된 컬렉션을 비동기방식으로 getDocs를 통해 요청하면 아이템 리스트가 반환되는 데 이를 반복문을 통해 아래와 같이 '.data()'를 통해 추출

const [listings, setListings] = useState(null)
const [loading, setLoading] = useState(true)

useEffect(() => {
  fetchListings()
}, [])

const fetchListings = async () => {
  try {
    const listingRef = collection(db, 'listings')
    const docSnap = await getDocs(listingRef)
    const listings = []    
    docSnap.forEach((doc) => {      
      listings.push({
        id: doc.id,
        data: doc.data()
      })
    })
    setListings(listings)
    setLoading(false)
  } catch (error) {
    // error handling
  }
}

▶ 쿼리 추가하기

query 기능을 통해 데이터를 가져올 때 특정조건을 지정하는 것도 가능합니다.

 

쿼리를 위해 필요한 기능들을 추가

import { collection, getDocs, query, where, orderBy, limit, startAfter } from 'firebase/firestore'
import { db } from '../firebase.config'

아래와 같이 반환된 컬렉션과 사용할 조건을 query에 전달하고 이를 통해 정보요청 (orderBy 등 특정쿼리는 인덱싱이 지정되어 있어야 사용가능)

const [listings, setListings] = useState(null)
const [loading, setLoading] = useState(true)

useEffect(() => {
  fetchListings()
}, [])

const fetchListings = async () => {
  try {
    const listingRef = collection(db, 'listings')
    const q = query(
      listingRef,
      where('type', '==', params.categoryName),
      orderBy('timestamp', 'desc'),
      limit(10)
    )
    const docSnap = await getDocs(q)
    const listings = []    
    docSnap.forEach((doc) => {      
      listings.push({
        id: doc.id,
        data: doc.data()
      })
    })
    setListings(listings)
    setLoading(false)
  } catch (error) {
    // error handling
  }
}

▶ 아이템 가져오기 (getDoc)

필요한 기능들 가져오기

import { getDoc, doc } from 'firebase/firestore'
import { getAuth } from 'firebase/auth'
import { db } from '../firebase.config'

아래와 같이 getDoc을 통해 비동기식 요청

const docSnap = await getDoc(docRef)
if (docSnap.exists()) {
  setListing(docSnap.data())  
}

▶ 아이템 추가하기 (addDoc)

필요한 기능들 가져오기

import { addDoc, collection, serverTimestamp } from 'firebase/firestore'

아래와 같이 addDoc을 통해 비동기식 요청으로 추가

const [formData, setFormData] = useState({
  name: '',
})

await addDoc(collection(db, 'listings'), formData)

---

serverTimestamp를 통해 데이터 생성 시간을 간단히 추가가능

const [formData, setFormData] = useState({
  name: '',
})

const formDataCopy = {
  ...formData,
  timestamp: serverTimestamp()
}

await addDoc(collection(db, 'listings'), formDataCopy)

---

▶ 아이템 수정하기 (updateDoc)

필요한 기능들 가져오기

import {
  addDoc,
  collection,
  serverTimestamp,
  doc,
  updateDoc,
  getDoc,
} from 'firebase/firestore'

아래와 같이 updateDoc을 통해 비동식 요청으로 수정

const [formData, setFormData] = useState({
  type: 'rent',
  name: '',
  bedrooms: 1,
  bathrooms: 1,
  parking: false,  
})
  
const docRef = await doc(db, 'listings', params.listingId)
await updateDoc(docRef, formData)

▶ 아이템 삭제 (deleteDoc)

필요한 기능들 가져오기

import {
  addDoc,
  collection,
  serverTimestamp,
  doc,
  updateDoc,
  getDoc,
} from 'firebase/firestore'

아래와 같이 deleteDoc을 통해 비동식 요청으로 삭제

await deleteDoc(doc(db, 'listings', id))

이상으로 파이어베이스 데이터베이스에 대해 알아보았습니다.

---

참조

Firebase Realtime Database (google.com)

Firebase Realtime Database