회고/TIL
TIL - 20230214
k1mwnjn
2023. 2. 15. 00:28
- 작업하기에 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 작동 하지 않을 때
git 에는 존재하는데 local 에서 바로 동기화가 되지 않아 그런 듯 하다.
1. git pull 로 새로 만든 branch 를 받아 최신화 후 스위치.
2. 3분 뒤에 해보기 ^^:: (스크린샷은 일정 시간 뒤에 같은 명령어 입력 후 동작하는 모습.)