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);
});
}
