TIL - 20230214

- 작업하기에 api 할당량이 충분치 않으니 금융감독원의 정기예금상품과 적금상품 API를 파이어베이스 컬렉션에 넣어보자.

- 1. api 를 받아와서

- 2. 파이어베이스 컬렉션에 넣어주고

- 3. data 가 필요할 때 마다, 필요한 페이지 마다 파이어베이스에서 getDocs 하면 된다.

- 막상 끝내보니 어렵지 않았는데 파이어베이스가 익숙치 않아 api 할당량 소진으로 인한 대기 시간과 에러 핸들링 등에 적지 않은 시간을 쓰게 되어 시간이 꽤나 걸렸음.

// data page

import axios from "axios";
import { addDoc, collection } from "firebase/firestore";
import React, { useEffect, useState } from "react";
import { db } from "../config/firebase";
const InsertData = () => {
  const [savingBaseList, setSavingBaseList] = useState([]);
  const [savingOptionList, setSavingOptionList] = useState([]);
  const [depositBaseList, setDepositBaseList] = useState([]);
  const [depositOptionList, setDepositOptionList] = useState([]);

  // saving = 적금
  // deposit = 예금

  // saving products data
  // saving products data
  // saving products data

  // const getSavingBaseListHandler = async () => {
  //   const { data } = await axios.get(
  //     ` https://cors-anywhere.herokuapp.com/https://finlife.fss.or.kr/finlifeapi/savingProductsSearch.json?auth={API_KEY}&topFinGrpNo=020000&pageNo=1`
  //   );
  //   setSavingBaseList(data?.result.baseList); // base list = 기본 정보
  //   console.log("savingBaseList", savingBaseList);
  //   {
  //     savingBaseList.map((item) => {
  //       addDoc(collection(db, "SAVING_BASE_LIST"), {
  //         category: "적금 기본 정보",
  //         dcls_month: item?.dcls_month,
  //         fin_co_no: item?.fin_co_no,
  //         fin_prdt_cd: item?.fin_prdt_cd,
  //         kor_co_nm: item?.kor_co_nm,
  //         fin_prdt_nm: item?.fin_prdt_nm,
  //         join_way: item?.join_way,
  //         mtrt_int: item?.mtrt_int,
  //         spcl_cnd: item?.spcl_cnd,
  //         join_deny: item?.join_deny,
  //         join_member: item?.join_member,
  //         etc_note: item?.etc_note,
  //         max_limit: item?.max_limit,
  //         dcls_strt_day: item?.dcls_strt_day,
  //         dcls_end_day: item?.dcls_end_day,
  //         fin_co_subm_day: item?.fin_co_subm_day,
  //       });
  //     });
  //   }
  // };
  // const getSavingOptionListHandler = async () => {
  //   const { data } = await axios.get(
  //     ` https://cors-anywhere.herokuapp.com/https://finlife.fss.or.kr/finlifeapi/savingProductsSearch.json?auth={API_KEY}&topFinGrpNo=020000&pageNo=1`
  //   );
  //   setSavingOptionList(data?.result.optionList); // option list = 옵션 목록
  //   console.log("savingOptionList", savingOptionList);
  //   {
  //     savingOptionList.map((item) => {
  //       addDoc(collection(db, "SAVING_OPTION_LIST"), {
  //         category: "적금 옵션 목록",
  //         dcls_month: item?.dcls_month,
  //         fin_co_no: item?.fin_co_no,
  //         fin_prdt_cd: item?.fin_prdt_cd,
  //         intr_rate_type: item?.intr_rate_type,
  //         intr_rate_type_nm: item?.intr_rate_type_nm,
  //         save_trm: item?.save_trm,
  //         intr_rate: item?.intr_rate,
  //         intr_rate2: item?.intr_rate2,
  //       });
  //     });
  //   }
  // };

  // deposit products data
  // deposit products data
  // deposit products data

  // const getDepositBaseListHandler = async () => {
  //   const { data } = await axios.get(
  //     ` https://cors-anywhere.herokuapp.com/https://finlife.fss.or.kr/finlifeapi/depositProductsSearch.json?auth={API_KEY}&topFinGrpNo=020000&pageNo=1`
  //   );
  //   setDepositBaseList(data?.result.baseList); // base list = 기본 정보
  //   console.log("depositBaseList", depositBaseList);
  //   {
  //     depositBaseList.map((item) => {
  //       addDoc(collection(db, "DEPOSIT_BASE_LIST"), {
  //         category: "예금 기본 정보",
  //         dcls_month: item?.dcls_month,
  //         fin_co_no: item?.fin_co_no,
  //         fin_prdt_cd: item?.fin_prdt_cd,
  //         kor_co_nm: item?.kor_co_nm,
  //         fin_prdt_nm: item?.fin_prdt_nm,
  //         join_way: item?.join_way,
  //         mtrt_int: item?.mtrt_int,
  //         spcl_cnd: item?.spcl_cnd,
  //         join_deny: item?.join_deny,
  //         join_member: item?.join_member,
  //         etc_note: item?.etc_note,
  //         max_limit: item?.max_limit,
  //         dcls_strt_day: item?.dcls_strt_day,
  //         dcls_end_day: item?.dcls_end_day,
  //         fin_co_subm_day: item?.fin_co_subm_day,
  //       });
  //     });
  //   }
  // };
  // const getDepositOptionListHandler = async () => {
  //   const { data } = await axios.get(
  //     ` https://cors-anywhere.herokuapp.com/https://finlife.fss.or.kr/finlifeapi/depositProductsSearch.json?auth={API_KEY}&topFinGrpNo=020000&pageNo=1`
  //   );
  //   setDepositOptionList(data?.result.optionList); // option list = 옵션 목록
  //   console.log("depositOptionList", depositOptionList);
  //   {
  //     depositOptionList.map((item) => {
  //       addDoc(collection(db, "DEPOSIT_OPTION_LIST"), {
  //         category: "예금 옵션 목록",
  //         dcls_month: item?.dcls_month,
  //         fin_co_no: item?.fin_co_no,
  //         fin_prdt_cd: item?.fin_prdt_cd,
  //         intr_rate_type: item?.intr_rate_type,
  //         intr_rate_type_nm: item?.intr_rate_type_nm,
  //         save_trm: item?.save_trm,
  //         intr_rate: item?.intr_rate,
  //         intr_rate2: item?.intr_rate2,
  //       });
  //     });
  //   }
  // };

  useEffect(() => {
    // getSavingBaseListHandler();
    // getSavingOptionListHandler();
    // getDepositBaseListHandler();
    // getDepositOptionListHandler();
  }, []);

  return (
    <div>
      <h1>버튼 누르면 안돼요</h1>
      <br />
      <br />
      <br />
      <h3>적금 기본 정보</h3>
      {/* <button onClick={getSavingBaseListHandler}>누르지 마세요.</button> */}
      <br />
      <br />
      <br />
      <h3>적금 옵션 목록</h3>
      {/* <button onClick={getSavingOptionListHandler}>누르지마세요</button> */}
      <br />
      <br />
      <br />
      <h3>예금 기본 정보</h3>
      {/* <button onClick={getDepositBaseListHandler}>누르지마세요</button> */}
      <br />
      <br />
      <br />
      <h3>예금 옵션 목록</h3>
      {/* <button onClick={getDepositOptionListHandler}>누르지마세요</button> */}
    </div>
  );
};

export default InsertData;

- 현재 환경변수 설정이 되어 있지 않아 {API_KEY} 로 대체해 작성.

- 2개 api를 항목에 따라 또 둘로 나눠 총 4개의 함수를 만들어 각 버튼 온클릭에 삽입. 파베에 저장하는 과정에도 생각보다 api 할당량이 금세 사라지므로 4번에 걸쳐 api 를 db 저장.

- 현재 기준 2개 api 를 모두 받아 파이어베이스에 저장한 상태이므로 getDocs 로 필요한 곳에 뿌리기만 하면 된다. 고로 건들 일이 없어 특별한 일이 없다면 함수들을 호출할 일이 없기에 전부 주석 처리.

- git switch 작동 하지 않을 때