ReactJS | Firebase로 React 프로젝트 DB 연동 및 배포

Firebase

데이터 베이스를 포함한 여러가지 서비스를 제공하는 Google의 모바일 플랫폼

※ 주의사항__요금제를 Spark로 사용해야 무료로 이용 가능!! ※

그 외의 서비스나 다른 클라우드 플랫폼도 마찬가지로 서비스에 따라, 서비스 사용량에 따라 과금이 발생하는 경우가 있기 때문에 무료로 이용을 원하는 경우에는 항상 요금을 확인하고 서비스를 이용해야 불필요한 과금이 발생하지 않음

---

Firebase 주요 서비스

• Firebase Cloud Function: 클라우드 서비스들을 빌드하고 연결할 수 있는 serverless 실행 환경
  Google Cloud Function과 유사한 부분이 많음
• Auth: 주요 SNS를 통해서 로그인을 쉽게 구현할 수 있도록 도와 주는 서비스
• Hosting: 서버 없이 웹 서비스를 배포할 수 있도록 도와 주는 서비스
• Realtime Database: Firebase의 기존 실시간 데이터베이스
  여러 클라이언트에서 실시간으로 상태를 동기화해야 하는 모바일 앱을 위한 효율적이고 지연 시간이 짧은 솔루션
• Cloud Firestore: 모바일 앱 개발을 위한 Firebase의 최신 데이터베이스
  실시간 데이터베이스보다 직관적이고 새로운 데이터 모델을 적용했으며,
  보다 풍부하고 빠른 쿼리 및 우수한 확장성을 제공
  최근에는 Firestore를 많이 사용하는 추세라고 함
• ML: 머신 러닝 서비스
• etc.

---

Firestore

Firebase에 포함되어 있는 서비스 중 하나로
유연하고 확장 가능한 NoSQL 클라우드 데이터베이스

Firestore 구조

1. Collection

• 문서(다큐먼트)의 집합
• 관계형 데이터베이스의 테이블과 유사
• 동일한 구조를 갖지 않는 문서들 저장 가능

 

※ 번역하면 문서라고 하고 Firestore 에도 문서로 되어있지만
문서라고 하는 우리나라 단어의 뉘앙스와 그렇게 어울리지 않기 때문에
원어 발음 그대로 '다큐먼트' 또는 '도큐먼트'라고도 함

---

2. Document

• 필드와 값을 갖는 JSON 형식으로 데이터를 저장할 수 있는
  기존의 SQL 데이터베이스보다 현대적인 데이터 저장 방식
• 다큐먼트 내부에 또 다른 Collection을 가질 수 있음
  문서(책)가 참고 도서 목록을 가지는 것이라고 볼 수 있음

 

※ 최상위에는 컬렉션이 위치하며 그 후로는 컬렉션과 다큐먼트가 서로를 포함할 수 있음

---

Firebase Project 시작하기

1. https://firebase.google.com/?hl=ko 접속
2. 시작하기 클릭
3. 프로젝트 만들기 클릭
4. 프로젝트 이름 입력
   독특하지 않은 이름인 경우 프로젝트 이름 뒤에 아이디가 추가로 부여됨
   독특한 이름인 경우 아이디가 부여되지 않음
5. 애널리틱스 사용 설정
6. 위치 설정
   위치로는 주요 서비스 대상 국가를 선택
   ex) 대한민국
7. 완료

---

Cloud Firestore 추가하기

1. 생성된 프로젝트 클릭
2. Cloud Firestore 추가
3. 데이터베이스 만들기 클릭
4. Cloud Firestore 보안 규칙 설정
   테스트 모드로 설정해야 local에서 Firestore 데이터 요청 가능
   후에 보안 규칙 변경 가능
5. Cloud Firestore 위치 설정
   서비스 지역과 동일하게 설정해야 하며, 설정 시 고객 참고사항이 나온다면 그와 유사한 이름의 다른 위치를 눌러서 참고사항이 나오지 않는 위치로 설정해야 함
   ex) 애널리틱스 위치를 대한민국으로 지정한 경우 asia-east2로 설정
6. 완료

---

Firestore에 Collection 추가하기

1. 해당 프로젝트 페이지 좌측 상단 메뉴 아이콘 클릭
2. Database 클릭
   추가한 Firestore가 활성화되어 있는 것을 볼 수 있음
3. 규칙 탭에서 보안 규칙 설정 가능
   allow read, write; 를
   allow read, write: if false; 로 수정하면 프로덕션 모드로 변경됨
4. 데이터 탭에서 컬렉션 시작 클릭
5. 컬렉션 ID 지정
6. 첫 번째 문서 추가
   ID 자동 생성 가능
   필드 이름을 입력하고 저장될 값의 타입과 값 입력
   ※ 타입의 map은 객체를 뜻함
7. 저장

---

React JS에서 Firebase 연동하기

1. 로컬 Create-React-App 프로젝트에서 firebase 패키지 설치
   yarn add firebase or npm install firebase
2. src 폴더에 firebase.js 파일 생성
3. Firebase 프로젝트 페이지에서 </> 웹 아이콘 클릭
4. 웹 앱 추가
   앱 닉네임 입력 → 앱 등록
5. Firebase SDK 추가
   스크립트 내부의 firebaseConfig 객체만 복사해서 firebase.js 에 붙여넣기
   !! 깃허브에 연동한 경우 보안과 관련된 파일은 .gitignore에서 무시하도록 설정하거나
   다른 방식으로 꼭 처리해 주어야 깃허브에 개인 정보가 업로드 되지 않음
6. 아래와 같이 코드 작성

---

firebase.js

Firebase 설정과 관련된 js 파일

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

const firebaseConfig = {
    // firebase 설정과 관련된 개인 정보
};

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

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

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

---

App.js

firestore의 데이터를 필요로 하는 js or jsx 파일

// 위에서 내보낸 firestore 가져오기
import { firestore } from "./firebase";

---

Firestore 데이터 가져오기_READ

firestore 객체에 연결해서 사용하는 메서드로 Cloud Firestore의 데이터 조회

• FIRESTORE_INSTANCE.collection("COLLECTION_ID")
  컬렉션 아이디에 맞는 컬렉션 반환
• collection("COLLECTION_ID").get()
  ID에 맞는 컬렉션 내부의 모든 다큐먼트를 가져오며 promise 형태로 반환
  doc("DOCUMENT_ID") 에도 사용 가능
• collection("COLLECTION_ID").where("FIELD", "OPERATOR", VALUE).get()
  where 조건식을 충족하는 다큐먼트만 조회
• doc("DOCUMENT_ID").data()
  다큐먼트 내부의 데이터를 가져옴
  각각의 필드는 .FIELD_NAME 으로 접근 가능
• doc("DOCUMENT_ID").id
  Firestore에서 다큐먼트를 생성할 때 부여된 id에 접근 가능

 

※ 아래 링크에 보다 많은 설명과 예제가 나와 있음
[https://firebase.google.com/docs/firestore/query-data/get-data#get_multiple_documents_from_a_collection]

---

 

예제_App.js

App 컴포넌트 렌더링 시,
Firestore의 tasks 컬렉션에 있는 데이터를 조회하는 예제

/*
fetchData가 useEffect의 dependencies로 설정되어 있기 때문에
렌더링마다 의존 값을 변경하지 않으려면
fetchData를 useEffect 내부로 옮기거나 useCallback으로 감싸야 함
*/
const fetchData = useCallback(() => {
    // 받아온 데이터를 저장할 배열
    let tasksData = [];

    // firestore.js에서 가져온 firestore 객체
    firestore
        .collection("tasks") //  "tasks" 컬렉션 반환
        .get() // "tasks" 컬렉션의 모든 다큐먼트를 갖는 프로미스 반환
        .then((docs) => {
        // forEach 함수로 각각의 다큐먼트에 함수 실행
        docs.forEach((doc) => {
            // data(), id로 다큐먼트 필드, id 조회
            tasksData.push({ todo: doc.data().todo, id: doc.id });
        });
        // tasks state에 받아온 데이터 추가
        setTasks((prevTasks) => prevTasks.concat(tasksData));
    });
}, []);

// 최초 렌더링 이후에 실행하기 위해 useEffect 내부에서 함수 실행
useEffect(() => {
    fetchData();
}, [fetchData]);

---

Firestore 데이터 삭제하기_DELETE

• collection("COLLECTION_ID").doc("DOCUMENT_ID").delete()
  특정 컬렉션의 다큐먼트 삭제
• 다큐먼트가 없는 컬렉션은 존재할 수 없기 때문에
  컬렉션 내부의 모든 다큐먼트를 삭제하면 컬렉션도 삭제됨

---

예제_App.js

이벤트 핸들러 실행 시,
Firestore의 tasks 컬렉션에 있는 특정 다큐먼트를 삭제하고
결과를 즉시 렌더링 되게 하는 예제

  const removeHandler = (id) => {
    firestore
      .collection("tasks")
      .doc(id) // id에 맞는 문서 인스턴스 반환
      .delete() // 삭제
      .then(() => // then으로 넘어오는 값은 없음
        /*
        화면에도 바로 적용하기 위해서 setTasks로
        prevTask.id와 삭제 버튼을 클릭한 컴포넌트의 id가
        다른 요소들만 tasks state로 설정
        */
        setTasks((prevTasks) =>
          prevTasks.filter((prevTask) => id !== prevTask.id)
        )
      );
  };

---

Firestore 데이터 추가하기_CREATE

• collection("COLLECTION_ID").add({ FIELD: VALUE })
  컬렉션에 다큐먼트 추가, 다큐먼트 ID가 자동 생성됨
• collection("COLLECTION_ID").doc("DOCUMENT_ID").set({ FIELD: VALUE })
  특정 ID와 필드-값을 갖는 다큐먼트를 지정해서 추가
  단, DOCUMENT_ID가 중복되는 경우 이후에 추가되는 다큐먼트를 덮어씀
  → 수정(UPDATE)에도 사용 가능
• 데이터 추가 시, 컬렉션이 없는 경우에도 COLLECTION_ID에 맞는
  컬렉션이 자동 생성되며 그 안에 다큐먼트들이 추가됨
• Firestore는 DOCUMENT_ID에 따라 오름차순으로 자동정렬을 수행하기 때문에
  데이터를 원하는 대로 조회하려면 DOCUMENT_ID를 규칙에 따라 부여하는 등의 추가적인 처리를 해주어야 함

---

예제_App.js

input 값을 task 스테이트로 관리하는 컴포넌트에서 이벤트 핸들러 실행 시,
todo 필드에 task를 값으로 갖는 다큐먼트를 추가하는 예제

const onClickHandler = (e) => {
    // 해당 이벤트에 미리 구현되어 있는 동작이 발생하지 않도록 함
    e.preventDefault();

    // task의 값이 빈 문자열이 아닌 경우 실행
    if (task !== "") {
      firestore
        .collection("tasks")
        .add({ todo: task }) // todo 필드에 task 값 입력
        .then((res) => { // 추가된 데이터와 관련된 정보가 전달됨
        
          /*
          tasks 스테이트의 각 요소는 todo, id를 필드로 갖는 객체이기 때문에
          todo 필드에는 task를, id에는 추가된 데이터의 id인 res.id를 대입해서
          기존 tasks 스테이트에 추가
          */
          setTasks((prevTasks) => tasks.concat({ todo: task, id: res.id }));
        });
        
      // input 값을 빈 문자열로 되돌림
      setTask("");
    }
  };

---

Hosting

서버 없이 웹 서비스를 배포할 수 있도록 도와 주는 Firebase 서비스

Firebase Hosting_프로젝트 배포

1. 프로젝트의 배포 버전에 하자가 없는지 확인

1. yarn build or npm run build
   배포용 파일들이 모여 있는 프로덕션 build 폴더 생성
2. yarn add serve or npm install serve
serve 패키지 설치
3. serve -s build
   서버를 열어서 프로덕션이 정상 작동하는지 확인

---

2. Firebase Hosting 연동

1. yarn global add firebase-tools or npm install -g firebase-tools
firebase-tools 패키지 설치
2. firebase login 명령어 입력 Firebase에 로그인
   로그아웃은 firebase logout으로 실행
3. firebase init 명령어 입력
   Firebase 기본 설정
4. ? Which Firebase CLI features do you want to set up for this folder?
   원하는 서비스를 선택하는 곳에서 Hosting만 선택
5. === Project Setup ===
   First, let's associate this project directory with a Firebase project. ....
   Use an existing project선택
   현재 로컬 프로젝트와 연결할 Firebase 프로젝트 선택
6. === Hosting Setup ===
   ? What do you want to use as your public directory? (public)
   CRA 프로젝트에는 public 폴더가 따로 있기 때문에 build 입력
7. ? Configure as a single-page app (rewrite all urls to /index.html)?
   SPA의 경우 페이지가 하나만 필요하기 때문에 모든 url을 index.html로 다시 작성하겠냐는 질문으로 Yes 입력
8. ? File build/index.html already exists. Overwrite?
   이미 있는 index.html을 덮어쓰겠냐는 질문으로 No 입력
9. firebase deploy --only hosting
   세팅이 완료된 프로젝트를 업로드하는 명령어
   firebase deploy만 입력하면 선택한 서비스를 전부 업로드 하게 됨
   → 여기서는 Hosting만 선택했기 때문에 전부 업로드해도 Hosting만 적용
10. Firebase 프로젝트 페이지 Hosting 탭의 대시보드에서 관련 내용 확인 가능
11. 사용할 수 있는 외부 도메인이 있다면 커스텀 도메인 추가로 연결 가능

---

DB와 서버에 많은 시간을 들이지 않고 웹 서비스를 배포할 수 있도록 도와주는 Firebase 서비스에 대해 알아보았습니다.

 

참고 강의: [박성준님 유투브 강의: https://www.youtube.com/watch?v=TfDe1dG0tHc&t=198s]

전체 코드: [https://github.com/pathas1126/todo-with-firebase]

※ 전체 코드를 참고하실 때 Card 컴포넌트의 수정 버튼은 무시하시면 됩니다.