React + Firebase Realtime Database

안녕하세요. 엄티입니다. 오늘은 리액트 프로젝트에서 firebase 기능 중 Real time database 에 접근하여 data 를 가져오는 방법을 포스팅 해보겠습니다.

Real time database 란 firebase 에서 제공하는 데이터 베이스로 따로 서버 없이 url 만으로도 디비에 CRUD 기능을 사용 할 수 있게 해주는 아주 엄청난 도구 입니다. 물론 요청에 따라 과금이 되긴 하지만 서버 구축 없이 클라이언트 프로젝트만으로도 간단한 토이프로젝트를 진행하기엔 아주 좋습니다. (과금도 어느정도 규모 이상이여야 됩니다.)

1. 사용하기 전에 먼저 firebase console 로 이동합니다. 만약 프로젝트가 없다면 '프로젝트를 추가' 하셔야 합니다.

 

2. test(이름은 마음대로 지어도 됨) 프로젝트로 들어가서 앱 추가를 합니다.

+앱 추가 를 눌러줍니다.

웹을 선택해줍니다.

앱 등록을 하고 완료가 되면 '콘솔로 이동'을 합니다.

3. 콘솔로 들어가서 'firebaseConfig' 를 가져옵니다.

앱 1개 버튼을 누르세요

웹 설정으로 이동합니다.

그 다음 하단에 보면 Firebase SDK snippet 을 찾을 수 있는데 거기서 firebaseConfig 자바스크립트 객체를 복사해서 새롭게 파일을 만들어 둡니다.

파일을 만든 뒤 그 파일을 프로젝트 내에 추가해줍니다.

firebase.config.js

const firebaseConfig = {
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
    measurementId: '',
};

export default firebaseConfig

 

기본 세팅은 끝났고 이제 프로젝트에서 firebase 를 사용해 보겠습니다. 의외로 아주 간단 합니다. 

4. firebase 모듈을 설치합니다.

$ npm i firebase

5. root에서 firebase config 를 가져옵니다.

import React, { useEffect } from 'react'
import * as firebase from 'firebase/app';
import 'firebase/database';

import FirebaseConfig from '../firebase.config'

import Test from './components/Test.jsx'

const App = () => {
	useEffect(() => {
        firebase.initializeApp(FirebaseConfig);
        const dataBase = firebase.database();
    }, [])

	return (
    	<Test>
        </Test>
    )
}

export defualt

 

이렇게 FirebaseConfig를 이용하여 initialzeinitializeApp 을 해줍니다.
그 다음 firebase 모듈 에서 database 를 불러서 dataBase라는 변수에 담아둡니다.

그럼 세팅은 끝입니다!!!

만약 friebase -> Database -> 실시간 데이터베이스 에 접근하여 데이터를 가져오고 싶다면

저의 실시간 데이터베이스

const expendableItems = await dataBase.ref('/expendables').once('value');
const glssItems = await dataBase.ref('/glass').once('value');

이런식으로 ref 를 사용해서 가져오면 됩니다.

 

오늘도 즐코딩