React + Firebase 애플리케이션 구축하기

Frontend = create-react-app

backend = firebase

소스코드는 git과 연동이 되어있도록

Github 연결

틴더 클론 코딩을 할 프로젝트라서 레파지토리 이름은 tinder-clone으로 정해주었습니다.

 

 

저는 github-desktop을 사용해서 레파지토리를 clone 했습니다.

 

VScode 사용해서 폴더를 열어주고

 

Create-react-app 설치

 

npm create-react-app .

입력해서 현재 폴더에서 create-react-app 을 설치하였습니다!

 

 

필요없는 파일들은 삭제를 하고, App.js를 저렇게 바꾸어 주었습니다.

 

정상적으로 뜨는 것을 볼 수 있습니다.

Firebase 설치 및 구성

npm install firebase

firebase를 설치를 해줍니다!

 

https://console.firebase.google.com/u/0/?hl=ko

그리고 해당 링크로 이동해서 구글 계정으로 Firebase 프로젝트를 생성합니다.

 

Firebase에는 두 가지의 데이터베이스가 존재합니다.

Cloud Firestore와 Realtime Database 이 두 가지인데

Cloud Firestore가 최신 데이터베이스라고 해서 Cloud Firestore를 사용했습니다!

 

데이터베이스 만들기 버튼을 클릭해줍니다. 

 

테스트 모드로 시작(추후에 바꿀 수 있습니다.)

 

그리고 다음버튼을 누르면 지역을 선택하는 창이 뜨는데

 

https://www.inflearn.com/questions/23338

 

요기를 참고했습니다! 저는 asia-northeast3 로 선택을 했습니다.

 

처음에는 아무것도 안뜨는데 제가 테스트를 위해서 데이터베이스에 데이터를 넣어주겠습니다. 

 

Store 는 Collection(폴더) -> Document(파일) -> field(data) 순으로 데이터베이스가 짜여집니다.

 

저는 test 폴더에 friend 파일에 friend_count 라는 데이터를 생성해주었습니다.

 

그리고 react와 연동을 위해서 firebase.js 라는 파일을 생성해주고 거기에 들어갈 config를 넣어야하는데

 

그러려면 firebase 프로젝트 안에 앱을 생성해주어야 합니다.

 

저는 tinder-clone 이라는 웹-앱을 만들어주었습니다. (</> 아이콘이 웹을 의미합니다. )

 

저기있는 코드들을 firebase.js에 추가를 해줍니다.

 

 

firebase.js

import firebase from "firebase/app";
import "firebase/firestore";

const firebaseConfig = {
// 자기 config를 넣어주세요
  };

// firebaseConfig 정보로 firebase 시작
firebase.initializeApp(firebaseConfig);

// firebase의 firestore 인스턴스를 변수에 저장
const firestore = firebase.firestore();

// 필요한 곳에서 사용할 수 있도록 내보내기
export { firestore };

firebase.js

 

import React, { Component } from 'react';
import './App.css';
import { firestore } from "./firebase";

class App extends Component {
  state = {
    data : ""
  }

  componentDidMount(){
    firestore.collection("test")
    .doc("friend")
    .get()
    .then(doc => {
      this.setState({
        data : doc.data().friend_count
      }) 
    })
  }
  
  render(){
    return (
      <div className="App">
        <h1>Let's build the TINDER Clone App!</h1>
        <h2> {this.state.data} </h2>
      </div>
    );
  }
}

export default App;

App.js

 

컴포넌트가 마운드 될 때, firestore에서 "test"라는 이름의 콜렉션에서 

"friend" 라는 이름의 document에서 "friend_count" 라는 이름의 field 값을

data 라는 state 값에 넣어주고, render에서 보여주는 코드입니다. 

 

요기까지하고 실행을 해보면

 

0으로 값을 잘 받아오는 것을 알 수 있습니다.

 

추가적으로 버튼을 이용해서

데이터를 조작하는 것 까지 해보겠습니다.

 

 

 

버튼 스타일링을 위해서 부트스트랩을 설치해주었습니다. 

 

import React, { Component } from 'react';
import './App.css';
import { firestore } from "./firebase";
import { Button } from 'react-bootstrap';

class App extends Component {
  state = {
    data : 0
  }

  componentDidMount(){
    firestore.collection("test")
    .doc("friend")
    .get()
    .then(doc => {
      this.setState({
        data : doc.data().friend_count
      }) 
    })
  }
  
  onClickUpButton = () => {  
    firestore.collection("test")
    .doc("friend")
    .update({
      friend_count : this.state.data + 1
    })
    .then(
      this.setState({
        data : this.state.data + 1
      })
    )
  }

  onClickDownButton = () => {
    firestore.collection("test")
    .doc("friend")
    .update({
      friend_count : this.state.data - 1
    })
    .then(
      this.setState({
        data : this.state.data - 1
      })
    )
  }

  render(){
    return (
      <div className="App">
        <h1>Let's build the TINDER Clone App!</h1>
        <h2> 현재 친구는 {this.state.data}명 입니다.</h2>
        <Button variant="primary" onClick={this.onClickUpButton}>친구 늘리기</Button><br />
        <Button variant="danger"  onClick={this.onClickDownButton}>친구 줄이기</Button>
      </div>
    );
  }
}

export default App;

App.js을 간단히 설명하자면

componentDidMount에서 한번 데이터를 받아옵니다.

그리고 "친구 늘리기" 버튼을 클릭하면 우선 firebase에

"friend_count" filed 값을 현재 data state에서 1을 늘린 값을 update해주고

data state도 1을 늘려주는 방식입니다.

 

버튼을 늘리면 실시간으로 오른쪽에 파이어스토어에도 값이 변하는 것을 볼 수 있습니다.