TIL-73 공공데이터API-> Firebase

PRB·2022년 9월 15일
0

WEB

목록 보기
14/15
post-thumbnail

지난번에 작업했던 내일전시를 getServerSideProps을 이용해서 ssr로 구현을 하려고 했는데
공공api에서는 각 객체의 유니크한 값이 없었다.(쿼리로 title을 받아서 구현하려고 했으나 공공데이터쪽에서 검색이 안된다.)

그래서 문의를 했고 개인 DB에 커스텀을 하라고 답변을 받았다. 그래서 고민을 하다가 결국 파이어 베이스를 도입하였다. Firebase SDK는 공식 문서하고 블로그 참고하면 금방 할 수 있다.(next는 조금 처리해야 하는 게 있는 거 같음)

import { initializeApp, getApp } from "firebase/app";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FB_API_KEY,
  authDomain: process.env.REACT_APP_FB_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FB_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FB_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FB_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FB_API_ID,
};

const createFirebaseApp = (config = {}) => {
  try {
    return getApp();
  } catch {
    return initializeApp(config);
  }
};

export const firebaseInstance = createFirebaseApp(firebaseConfig);

이렇게 초기화를 하고

const fetchCulturalEvent = (Events) => {
    const result = Promise.all(
      Events.map((id, index) => {
        return axios
          .get(
            `http://openapi.seoul.go.kr:8088/key/json/culturalEventInfo/${
              index === 0 ? index + 1 : index * 1000 + 1
            }/${id}`,
          )
          .then((res) => res.data.culturalEventInfo.row);
      }),
    );

    return result;
  };

공공데이터는 한번 호출 시 최대 1,000개만 불러올 수 있어서 저렇게 처리했다.

원래 계획은 문화행사 데이터 약 3,000개를 받고 파이어 베이스에 저장을 한 후 Firebase에서 꺼내서 사용하려고 했다.(netlify functions으로 매일 한번 DB를 새로고침하려 함) 근데 useEffect로 무한 호출한 적도 없고 onClick에 함수를 걸고 테스트를 몇 번 했는데 금방 무료가 끝나갔다.

다시 해결법을 고민하고있다..🥲

profile
사용자 입장에서 사용자가 원하는 것을 개발하는 프론트엔드 개발자입니다.

0개의 댓글