리엑트 파이어베이스 데이터 저장소 연동(React firebase firestore)

 

리엑트에서 파이어베이스 데이터 저장소를 연동하는 방법을 소개 합니다.

파이어베이스에서 제공하는 데이터베이스는 클라우드형식의 저장소로 어디서는 접근이 가능한 장점이 있기 때문에 포트폴리오나 간단한 웹으로도 많이 쓰이는 것 같습니다. : - )

 

연동단계는 아래와 같습니다.

 

파이어베이스 가입 > 프로젝트 생성 > 저장소 생성 > 인증정보 획득 > 로그인 등록 > 리엑트 프로젝트에 Lib 설치 > 사용 > 인증

 

써 놓고보면 단계가 상당하지만 천천히 하다보면 그렇게 어렵지 않습니다.

 

 

#1. 파이어베이스 가입 > 프로젝트 생성 > 저장소 생성 > 인증정보 획득

먼저 파이어베이스에 가입해야 합니다.

네이버나 구글 검색엔진에 "firebase" 라고 입력을 한 뒤 가입하도록 합니다. 이때 구글계정이 필요합니다.

그리고 아래 사진처럼 프로젝트를 생성합니다.

기존 프로젝트가 보이네요..^^;

 

접속한 뒤에 프로젝트를 생성합니다. (기존 프로젝트가 있더라도 가급적 생성하여줍니다)
프로젝트명에는 "test" 문구는 입력하면 프로젝트가 생성되지 않을 것 입니다. 유의하여 주세요.
문제되는 것이 없으면 가급적 추천하는 데로 선택하여 넘어가도록 합니다.

프로젝트를 만듭니다

 

새로운 프로젝트가 만들어졌으면 상단의 톱니바퀴를 클릭합니다.
상단 맨 좌측의 "프로젝트 개요" 라는 부분의 옆의 모양을 의미 합니다.
톱니바퀴에서 프로젝트 설정을 눌러줍니다.

톱니바퀴모양을 누릅니다

 

그리고나서 하단을 살펴보면 3번째 아이콘에 "웹(web)"과 관련된 앱을 만들 수 있는 아이콘이 존재합니다.
물론 툴팁 형식으로 해당 아이콘이 무슨 앱인지 설명이 나옵니다.
웹과 관련된 앱을 추가하여줍니다.

웹을 추가합니다

 

잠시 기다려주면 어떠한 설정파일이 나타나게됩니다.
json형태로 되어 있으며 해당내용을 복사하여 둡니다.
* 하단의 콘솔로 이동을 누르게 되면 해당 설정파일을 다시 볼 수 있습니다.

firebaseConfig라는 내용을 복사해둡니다.

파이어베이스에서 제공하는 데이터베이스의 형태는 2가지가 존재 합니다. * 2021.12 기준
리얼타임 데이터베이스(realtime database)가 가장 먼저 서비스가 시작되었으며 이어서 파이어스토어(cloud firestore) 형테의 데이터베이스가 나중에 등장 하였습니다.
여기서 소개할 내용은 파이어스토어(firestore)를 활용한 데이터베이스 관리 방법 입니다.

아주 중요한 탭 입니다!
우리가 사용할 데이터베이스를 만들기 위해 왼쪽 매뉴에서 Database를 클릭합니다.
여기서 클릭해야 될 버튼은 Cloud Firestore 에 존재하는 데이터베이스 만들기 입니다!

Cloud Firestore보이시죠????

 

가끔 리얼타임 데이터베이스를 누르는 경우가 있습니다.
Firestore 데이터베이스를 사용할 예정이라면 햇갈리지 말아야 합니다...^^;
다음으로 파이어스토어 데이터베이스 만들기를 진행합니다.
데이터베이스를 만들 때 처음에는 테스트 모드로 적용 합니다.

테스트모드로 일단 적용!

 

위 단계까지 진행하였다면 아래사진처럼 빈 화면을 만날 수 있습니다.

짜잔~ 빈화면 등장입니다!

 

파이어스토어(firestore)라는 저장소는 컬렉션 - 도큐먼트 단위로 저장되어 집니다. (몽고DB와 매우 유사합니다)
컬렉션은 일반 관계형 데이터베이스의 테이블을 의미합니다.
도큐먼트는 저장되는 데이터(레코드, 튜플)를 의미합니다.
데이터를 추가한다는 것은 1개의 도큐먼트를 지정한 컬렉션에 넣는다는 의미입니다.조금 더 쉽게 이해하려면 json형식으로 데이터를 관리할 수 있다라고 생각하시면 좋을 것 같습니다.
아무것도 없으므로 데이터를 한번 넣어보겠습니다.

 

1. 컬렉션 생성(관계형데이터베이스에 비유하면 테이블 생성)  * 이름은 board로 꼭 해주세요!

맨처음 등록을 하면 컬렉션ID를 입력하라고 합니다. 관계형 DB로 비유하면 table을 의미 합니다.

 

2. 도큐먼트 생성(관계형데이터베이스에 비유하면 컬럼 추가, 컬럼 데이터 추가)

그리고나서 다음화면으로는 넣을 데이터를 입력합니다. 관계형 데이터베이스로 비유하면 컬럼과 값 입니다.

 

3. 문서ID 넣기(관계형데이터베이스에 비유하면 Primary key 생성)

문서ID는 고유 아이디 입니다. 여기서는 자동버튼을 눌러줍니다.

 

4. 데이터 완성

데이터 완성!

위 4단계를 통해서 데이터를 생성하여 보았습니다.

데이터 생성을 꼭 하고 난 다음에 아래내용을 진행하여 주세요.

 

 

#2. 로그인 등록

다음으로 파이어베이스에서 등록, 수정, 삭제를 하기 위해서 아래 관련된 내용을 허용하여 줍니다.

이메일/비밀번호 를 통하여 인증이 완료되면 데이터에 대한 등록, 수정, 삭제가 되도록 추가합니다.

 

 

#3. 리엑트 프로젝트에 Lib 설치 > 사용

리엑트 프로젝트에 파이어베이스 연동을 위한 라이브러리를 설치 합니다.

npm install firebase

파이어베이스 라이브러리는 9버전과 8버전 이하에서의 사용법이 다소 상이합니다.

이곳에서는 9.X 버전으로 소개 합니다.

 

먼저 파이어베이스 설정을 가져올 5가지 함수(클래스)를 import 합니다.

import {initializeApp} from 'firebase/app'
import { getFirestore } from "firebase/firestore"
import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword } from "firebase/auth"


const fireEnvironment = {
    production: true ,
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
}

 

fireEnvironment 값은 프로젝트를 생성 할 때 만들어진 정보를 입력하면 됩니다.

위 정보를 토대로 앱을 설정하고, 사용할 데이터베이스인 파이어스토어에 접속하여 보겠습니다.

import {initializeApp} from 'firebase/app'
import { getFirestore } from "firebase/firestore"
import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword } from "firebase/auth"


const fireEnvironment = {
    production: true ,
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
}

const firebaseApp = initializeApp(fireEnvironment)  //1차 정보 접근
const database = getFirestore(firebaseApp)  //정보가 올바르면 아래 파이어스토어 접근

export default database

 

database의 객체를 export하여 원하는 서비스나 컴포넌트에서 사용을 하면 됩니다.

간단한 select 기능의 함수를 예로들어 보겠습니다.

import database from '위에만든파일경로'
import { collection, query, where, getDocs, orderBy } from "firebase/firestore"

const q = query(collection(database, "검색할컬랙션"), where("대상", "조건문", '값'), orderBy('정렬대상', 'desc') )
getDocs(q).then( (querySnapshot)=>{
    querySnapshot.forEach((doc) => {
        let data = doc.data()  //저장된 데이터
        let id = doc.id  //고유 아이디
    })
})

 

조회를 하는 함수의 샘플 입니다.

query라는 함수에 대상컬렉션, 조건, 정렬 값 등을 통하여 데이터를 가져올 수 있습니다.

getDocs 함수는 Promise결과를 반환하므로 async, await 명령어를 통해 제어도 쉽게 가능 합니다.

 

 

#4. 인증

마지막으로 인증(auth) 입니다.

우리는 프로젝트 설정을 테스트 모드로 하였습니다.

테스트 모드는 누구나 등록, 수정, 삭제 할 수 있는 환경입니다.

테스트 모드는 대략적으로 몇달은 파이어베이스에서 등록, 수정, 삭제요청에 대해서 허용을 하여 주지만, 시간이 지나면 이러한 요청은 전부 권한제한으로 막아버립니다.

 

파이어베이스 저장소 설정을 아래처럼 변경합니다.

 

그리고 정보를 가져오는 기능을 아래처럼 수정합니다.

import {initializeApp} from 'firebase/app'
import { getFirestore } from "firebase/firestore"
import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword } from "firebase/auth"


const fireEnvironment = {
    production: true ,
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
}

const firebaseApp = initializeApp(fireEnvironment)  //1차 정보 접근
const database = getFirestore(firebaseApp)  //정보가 올바르면 아래 파이어스토어 접근

//////////권한 관련 내용//////////
const auth = getAuth()  //권한

auth.onAuthStateChanged( user=>{  //사용가능한 유저인지 확인
    if(user){  //사용가능한 유저이면
        signInWithEmailAndPassword(auth, 'mail_address', 'password')  //정보를 토대로 로그인
        .then((userCredential) => {
            const user = userCredential.user
            console.log(user)
        })
        .catch((error) => {
            console.log(error)
        })
    } else {  //사용가능한 유저가 아니면
        createUserWithEmailAndPassword(auth, 'mail_address', 'password')  .then((userCredential) => { //사용자를 추가
                signInWithEmailAndPassword(auth, 'mail_address', 'password') //추가된 사용자를 토대로 로그인
                .then((userCredential) => {
                    const user = userCredential.user
                    console.log(user)
                })
                .catch((error) => {
                    console.log(error)
                })
        })
        .catch((error) => {
            console.log(error)
        })
    }
})



export default database

 

인증과 관련된 내용을 추가하여줍니다.

인증을 통해서 등록된 사용자는 파이어베이스 저장소에 접근하여 등록, 수정, 삭제에 대한 행위를 할 수 있게 됩니다.

 

이상으로 리엑트 파이어베이스 데이터 저장소 연동(React firebase firestore)에 대해서 살펴보았습니다.

궁금한점 또는 틀린 부분은 언제든 연락주세요! 👻