공공 데이터 포털 open API활용 코로나 확진 수 테이블 만들기 (Covid19 dashboard - React)

공공 데이터 포털 open API 이란?

아무래도 아직 백엔드 공부를 못해서 혼자 프로젝트를 할 때 모든 정보를 클라이언트에 담아서 해야하는 불편함이 있다.

아무리 토이프로젝트지만 API를 활용하고 싶어서 구글에 open API를 검색해봤는데 꽤나 쓸만한 open API를 갖고있는 사이트가 있었다.

공공 데이터 포털 이라는 사이트다.

정말 갖가지 open API가 다 있었다. 앞으로 꽤나 자주 이용하게 될 것 같다.

우선 유행이 지나긴 했지만 만만한게 코로나 확진수에 대한 api를 제공해준다는게 눈에 들어와 한번 사용해봤다.

 

그러나.. 테스트 하던 도중 잘 되다가.. 알고보니 일일 요청 횟수라는게 있었다.. 그래서 우선 하다 말았지만..

리팩토링도 못하게 되었다.. 우선 부끄럽지만..  대충 짠 코드다.

사실 어차피 대충 안짜도 부끄러운건 마찬가지지만..

 

App.js

import { useEffect, useState } from "react";
import "antd/dist/antd.min.css";
import { Button, DatePicker, Table } from "antd";
import { getDatas } from "./apis/coivdDatas";
import moment from "moment";

function App() {
  const [coivdDatas, setCovidDatas] = useState([]);
  const [covidDatasParams, setCovidDatasParams] = useState({
    params: {
      serviceKey:
        "개인인증키",
      numOfRows: 1000,
      pageNo: 1,
      startCreateDt: 20200310,
      endCreateDt: 20211229,
    },
  });

  const { RangePicker } = DatePicker;

  const columns = [
    {
      title: "날짜",
      dataIndex: "createDt",
      width: '15%',
      filters: [
        {
          text: "Joe",
          value: "Joe",
        },
        {
          text: "Jim",
          value: "Jim",
        },
      ],
      onFilter: (value, record) => record.name.indexOf(value) === 0,
      sorter: (a, b) => {
        a = new Date(a.createDt);
        b = new Date(b.createDt);
        return a > b ? -1 : a < b ? 1 : 0;
      },
    },
    {
      title: "누적 확진자 수",
      dataIndex: "decideCnt",
      defaultSortOrder: "decideCnt",
      sorter: (a, b) => a.decideCnt - b.decideCnt,
    },
    {
      title: "누적 사망자 수",
      dataIndex: "deathCnt",
      sorter: (a, b) => a.decideCnt - b.decideCnt,
    },
  ];


  useEffect(() => {
    getDatas(covidDatasParams).then((res) => setCovidDatas(res));
  }, []);

  const onChangeForDate = (e) => {
    setCovidDatasParams({
      ...covidDatasParams,
      startCreateDt: moment(e[0]).format('YYYYMMDD'),
      endCreateDt: moment(e[0]).format('YYYYMMDD'),
      })
  }

  return (
    <div className="App">
      <RangePicker onChange={onChangeForDate}/> <Button onClick={() => getDatas(covidDatasParams).then((res) => setCovidDatas(res))}>클릭</Button>
      <h1 style={{ textAlign: 'center'}}>확진자 정보</h1>
      <Table columns={columns} dataSource={coivdDatas} size="large"/>
    </div>
  );
}

export default App;

 

api/covidDatas.js

import axios from "axios";

export const getDatas = async (params) => {
  try {
    const response = await axios.get("http://openapi.data.go.kr/openapi/service/rest/Covid19/getCovid19InfStateJson",
    params
    );
    return response.data.response.body.items.item;
  } catch (e) {
    console.log("실패", e);
  }
};

 

우선 공공데이터 open api를 활용하기 위해서는 인증키를 발급받아야 한다.

과정이야 매우 쉬웠고 또 신청하자마자 바로 승인이 되길래 바로 사용할 수 있을 줄 알았다.. (이게.. 함정이였다!!..)

 

당연히 승인이 되었다고 하니 바로 프로젝트를 만들어 적용을 시켰는데 암만해도 존재하지 않는 인증키 에러인 

SERVICE KEY IS NOT REGISTERED ERROR.  메세지만 주구장창 뜨는것이다. 그래서 오타검사도 해보고.. 헤더도 보고.. 하다가 한참뒤에 구글링을 하게 됐고 승인 후 한시간 뒤에 하라고 분명히 공식 사이트 답변에 관리자가 적어놓았다.

 

그래서 한시간 뒤에 시도를 해보고 또 안되길래 다시 구글링과 코드를 꼼꼼히 쳐다봤는데 이 과정이 무려 2시간이나 삽질한것이다.. 하..

 

알고보니 나만 이런 삽질을 하는게 아니라 1시간이라고 굳게 믿은 사람들도 여러번 시도했다가 다음날 시도했더니 됐다고 한다.. 당연히 본인도 5 ~ 7 시간 정도 뒤에 시도해보니 정상적으로 작동됐다.. 공공기관 일 안하지? 

아무튼.. 많은 open API를 제공하고있고 이제 이런 과정이 좀 복잡하긴 하지만 아직 백엔드에 대해서 무지한 나로써는 자주 이용하게 될 것 같다!