TIL) 스파르타 개발일지 23-02-14 API크롤링

firestore database에 금융감독원의 api 크롤링 하는법.

꼭 금융 감독원의 API 뿐만아니라 다른 것도 가능하다.

 

import { useState } from "react";
import firebase from "firebase/app";
import "firebase/firestore";

const firebaseConfig = {
  // Firebase 프로젝트의 구성 정보를 입력합니다.
};

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

function App() {
  const [loading, setLoading] = useState(false);

  const handleButtonClick = async () => {
    setLoading(true);
    // 금융감독원 API를 통해 예금상품 정보를 가져옵니다.
    const response = await fetch("https://www.fss.or.kr/opendata" +
      "/api/1310.json?auth={API 인증키넣어주세요.}&topRowCount=10");
    const data = await response.json();
    
    // 가져온 예금상품 정보를 Firestore에 저장합니다.
    const depositProducts = data.PD_D.ROW;
    const depositProductsRef = db.collection("depositProducts");
    depositProductsRef.doc("list").set({ list: depositProducts })
      .then(() => {
        console.log("예금상품 정보를 Firestore에 저장했습니다.");
      })
      .catch((error) => {
        console.error("예금상품 정보 저장 중 오류 발생:", error);
      })
      .finally(() => {
        setLoading(false);
      });
  };

  return (
    <div>
      <button onClick={handleButtonClick} disabled={loading}>
        {loading ? "로딩 중..." : "예금상품 정보 가져오기"}
      </button>
    </div>
  );
}

export default App;