firebase 개념 & 연동방법 (1)

서버리스(Serverless)

    : 서버를 직접 만들 필요 없이, 필요한 서버 기능을 제공하는 곳에서 서비스를 사용하는 것

 

파이어베이스(Firebase)

    : 구글에서 만든 서버리스 (로그인, 이미지 서버 등 다 지원해줌)

 * 예시설명

    1) 게임에 가입한다 > 파이어베이스에 가입한다

    2) 캐릭터를 생성한다 > 파이어베이스 프로젝트를 생성

    3) 캐릭터에 필요한 장비를 착용한다 > 사용 할 파이어베이스 서비스 활성화

 

파이어베이스 앱 연동 및 파일 스토리지(이미지 파일 관리)

 1. 프로젝트 만들기

  1) 파이어베이스에서 프로젝트 생성

  2) iOS, Android, web 중 선택 (react-native의 경우, 웹앱으로 구분된다)

  3) 웹 아이콘 클릭 ( </> )

  4) 자바스크립트 코드 생성 후 알려줌 => 내용을 보면 딕셔너리 형태의 키 값임 (웹앱이므로)

 2. 연동하기 

  1) 프로젝트에 들어간다

  2) 프로젝트 개요 옆에 있는 톱니바퀴모양 클릭 => 프로젝트 설정

  3) 앱추가 누른다 (프로젝트 만들때 설정 안했으면 이때 해주면 됨)

  4) VS code의 프로젝트에 firebase를 설치해준다

yarn add @react-native-firebase/firestore
yarn add @react-native-firebase/app
yarn add @react-native-firebase/database

  5) VS code에서 내 프로젝트 안에 firebaseConfig.js 만들어 준다

  6) firebaseCongif.js 안에 firebase 앱추가로 만든 SDK를 입력해준다 (아래 형태의 코드)

import firebase from "firebase/compat/app";
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import "firebase/compat/storage";
import "firebase/compat/database";
//import "firebase/compat/firestore";
//import "firebase/compat/functions";
//import "firebase/compat/auth";
//firebase의 확장 기능중에 필요한것이 있다면 주석을 해제하고 사용합니다.

//-----------------------------------------------------------------------
//이 부분은 firebase에서 받은 npm용 코드스니펫입니다. 본인이 만든 프로젝트에서 받아서 입력하시면 됩니다.
const firebaseConfig = {
    apiKey: "본인이 발급받은 API를 입력합니다.",
    authDomain: "fatherdrum-ce9de.firebaseapp.com",
    databaseURL: "https://fatherdrum-ce9de-default-rtdb.asia-southeast1.firebasedatabase.app",
    projectId: "fatherdrum-ce9de",
    storageBucket: "fatherdrum-ce9de.appspot.com",
    messagingSenderId: "118924778760",
    appId: "1:118924778760:web:2ed50eea5a55527d1ea0bd",
    measurementId: "G-X7QX9EB1NM"
};
// ------여기까지 -------------------------------------------------------

// ---- 여기서부터는 프로젝트 내 다른 js파일에서 firebase의 database에 접근할 수 있도록 ----
// 설정해 주는 부분입니다. 즉, export하면서 기능을 부여해 주는 부분입니다. 복붙하세요 ---

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

export const firebase_db = firebase.database()
//외부 파일에서 사용할 수 있도록 firebase_db 라는 이름으로 export해준 것
//외부에서 firebase 내 database에 있는 정보를 요청하는 방법을 firebase.database() 로 정의해준것
// 다른 js 파일에서는 import { firebase_db } from './firebaseConfige.js 로 심어주심됩니다.

  7) 파이어베이스 프로젝트로 받았던 키값을 넣어준다(상단에 있는 코드를 바꿔주는 것)

 

** Realtime firebase를 이용해 실제로 어플에 구현하는 방법은 다음글로...!

https://radpro.tistory.com/38

 

 

안드로이드 또는 iOS  연동하기 : https://paullab.tistory.com/30 링크참고