Firebase Miniseries 2: Firestore 1부

소개

Firebase의 Firestore API는 일반 데이터베이스처럼 데이터를 저장할 수 있지만 API GET 및 POST 요청이 간편하고 쉬운 강력한 API 관리형 데이터베이스입니다.

Firestore에서 데이터를 가져오는 것은 매우 쉽게 수행할 수 있습니다. 데이터를 가져오는 데 몇 줄, 데이터를 설정하는 데 몇 줄만 필요합니다. 이것이 바로 Firebase가 웹 개발자들 사이에서 선호되는 이유입니다. 그 단순성은 타의 추종을 불허하며 DX(Developer Experience)는 놀랍습니다.

2부로 구성된 이 게시물에서는 firebase의 firestore 데이터베이스를 사용하여 작업하는 모범 사례 방법과 요령을 알려주고 쉽게 배울 수 있도록 하여 이제부터 모든 프로젝트에서 firebase를 사용하게 될 것입니다.

Firestore 설정

Firebase 앱을 설정한 후 사이드바 > Firestore 데이터베이스로 이동하여 헤더에서 활성화 버튼을 클릭할 수 있습니다. 인증에 대한 이전 게시물을 읽지 않았다면 여기에서 Firebase 앱 설정 방법을 설명합니다. Firestore 데이터베이스를 설정하라는 팝업이 열립니다. 생산 모드를 선택합니다. 다음 슬라이드에서 대부분의 사용자가 앱을 사용할 위치와 가장 가까운 Firestore 위치를 선택합니다. 설정이 완료되면 Firestore 데이터베이스 페이지로 리디렉션됩니다.

다음으로 firestore API에 액세스하기 위해 config firebase 파일을 설정합니다.

import firebase from "firebase"

const config = {
  apiKey: "fill in with your real values",
  authDomain: "fill in with your real values",
  projectId: "fill in with your real values",
  storageBucket: "fill in with your real values",
  messagingSenderId: "fill in with your real values",
  appId: "fill in with your real values"
}
const firebaseApp = firebase.initializeApp(config)

const db = firebaseApp.firestore()
const auth = firebaseApp.auth()
const storage = firebaseApp.storage()

export { db, auth, storage } 

src 폴더(다음 js의 루트 폴더)에 있는 firebase라는 폴더 안에 있는 firebase.js라는 파일에 저장해 보겠습니다.

첫 번째 단계는 데이터 쓰기에 관한 것이고 두 번째 단계는 데이터 읽기에 관한 것입니다.

글쓰기

일반적으로 앱이 등록 파일에서 사용자를 생성할 때 새 사용자의 정보를 users라는 컬렉션에 기록하려고 합니다. 즉, Firebase의 인증 사용자 개체는 읽기, 삭제 및 업데이트만 가능하며 새 속성을 쓸 수 없으므로 주소, 도시, 국가 등과 같은 사용자 지정 데이터를 저장하려면 새 '사용자' 개체를 새 인증 사용자의 uid와 동일한 사용자 uid를 가진 사용자라는 콜렉션. 그런 식으로 우리는 "인증 사용자의 uid에 대한 userID ==가 있는 사용자 컬렉션 내에서 사용자를 찾아 현재 로그인한 사용자의 사용자 지정 데이터를 가져올 수 있습니다. 복잡해 보이면 곧 명확해질 것입니다.

계정 생성에 성공한 후 이 함수를 실행하여 사용자 컬렉션 내에 새 사용자를 생성해 보겠습니다.

import { db } from 'path/to/firebase/config' //import db for firestore api calls
auth.createUserWithEmailAndPassword() //use code from my previous auth post 
.then(user => { //this user object contains the auth user data
  //let's create a new user doc inside a collection and call it users
  db.collection('users')
  .doc(user.uid)
  .set({
    firstName: 'Walter',
    lastName: 'White',
    city: 'Albuquerque',
    state: 'New Mexico,
    country: 'U.S.',
    photoURL: ''
  })
})

그러면 사용자 컬렉션 내에 사용자 문서가 생성됩니다.

이제 Firestore를 호출할 준비가 되었습니다. 즉, 사용자에 대해 가지고 있는 정보를 표시합니다. 우리 프로젝트에서 MyProfile.js라는 파일을 생성해 보겠습니다(이 코드에 대해 React를 다시 사용할 것이지만 대부분의 코드 논리는 Vanilla JS를 사용하여 동일하게 구현할 수 있습니다).

기본 구성 요소 템플릿 작성을 시작하겠습니다.

import React from 'react'

export default function ProfilePage() {

  useEffect(() => {

  },[])

  return (
   //render whatever UI you want here, user info, name, image, etc.
  )
}

이제 firestore에서 데이터를 가져오거나 가져오기 위해 다음과 같이 useEffect 내에서 구성 파일에서 생성한 'db' 함수를 가져와서 firestore API를 호출합니다.

import { db } from 'path/to/firebase/config'

const [profileUser, setProfileUser] = useState(null)
const userID = '' //get user's uid from url parameters

useEffect(() => {
  db
  .collection('users')
  .doc(userID)
  .get()
  .then(snap => {
    setProfileUser(snap.data()) //get function returns a snapshot of user's doc in firestore
  })
},[])

이제 UI에서 다음과 같이 profileUser를 사용할 수 있습니다.

<h4>First Name: {profileUser?.firstName}</h4>
<h4>Last Name: {profileUser?.lastName}</h4>
<h4>City: {profileUser?.city}</h4>
<h4>State: {profileUser?.state}</h4>

짜잔, 방금 firebase의 firestore 데이터베이스에서 데이터를 쓰고 읽었습니다. 단 몇 줄의 코드로 모든 작업을 수행할 수 있습니다.

결론

firebase의 firestore API의 단순성은 데이터베이스로 사용하기에 인기 있고 재미있는 이유입니다. Firestore의 API를 사용하면 단순히 'db' 함수를 호출하고 .set() 또는 .get()을 사용하여 데이터베이스에서 데이터를 가져오거나 데이터베이스에서 데이터를 설정함으로써 쉽게 게시 및 호출을 할 수 있습니다.

즐거운 시간 되셨길 바라며 고급 firestore 개념을 다루는 2부에서 뵙겠습니다.