FireBase 란?

Firebase는 구글에서 개발한 클라우드 기반의 백엔드 서비스를 제공하는 모바일 및 웹 애플리케이션 개발 플랫폼이다.
Firebase는 데이터베이스, 인증, 스토리지, 호스팅, 애널리틱스 등의 다양한 기능을 제공하며, Realtime Database와 Cloud Firestore, Authentication, Cloud Storage, Hosting, Cloud Messaging 등의 기능을 포함한다.
Firebase는 다양한 프로그래밍 언어와 플랫폼을 지원하며, 개발자들은 빠르게 애플리케이션을 개발하고 배포할 수 있다.

이미지 파일 스토리지에 저장

각 배너 이미지 목록들을 스토리지에 저장
배너 종류에 따라 파일을 나누어 저장하는게 관리 하는데 용이함

remote config에 배너 설정을 json 파일로 저장

프로젝트에 현재일 기준으로 시작일 종료일을 비교하는 로직 및 콜백 함수는 따로 구현해야함
ga 데이터를 쌓기 위한 event parameter 도 별도 설정

  "homeMainBanner": [
    {
      "startShowDate": "2023-12-18", // 시작일
      "lastShowDate": "2024-01-16", // 종료일
      "image": "https://firebasestorage/" // 이미지 경로
      "functionName": "openBrowser", // 배너 클릭시 실행시킬 함수 이름
      // google analytics 로 전송할 파라미터 및 이벤트 페이지 url
      "parameters": {
        "event": "",
        "eventCategory": "",
        "eventLabel": "",
        "targetUrl": ""
      }
    }
  ]

프로젝트에서 remoteConfig 에 저장되어 있는 data 가져오기

import firebase from "firebase/app";  
import "firebase/remote-config";

function getEventBanner() {  
    const firebaseConfig = {  
        apiKey: "",  
        authDomain: "",  
        projectId: "",  
        appId: "",  
    };

    // 이미 config가 설정되어 있는 경우 다시 초기화 하지 않도록 하기 위한 코드  
    const app = !firebase.apps.length  
        ? firebase.initializeApp(firebaseConfig)  
        : firebase.app();

    const remoteConfig = app.remoteConfig();

    remoteConfig.settings = {  
        minimumFetchIntervalMillis: 60000 * 60, // 최소 1시간마다 서버에서 가져오기  
    };

// 원격 구성 가져오기  
    remoteConfig.fetchAndActivate()  
    .then(() => {  
        // 운영환경 별 json file 다르게 설정  
         const jsonfileName = ENV === "production" ? "prodBanners" : "devBanners";  
          // Remote Config에서 JSON 값 가져오기  
          const jsonValue = remoteConfig.getString(jsonfileName);  
          const jsonObject = JSON.parse(jsonValue);  
          this.eventBanner = jsonObject; // 배너 목록을 담을 변수  
          })  
    .catch((error) => {  
        console.error("Error fetching remote config:", error);  
    });  
}