02.08 코딩일기

오늘은 공공 API 호출 공부를 위해 공공 데이터 API를 이용해 보았다.

프론트 라이브러리 : react (react 공부를 위해)
비동기 통신 라이브러리 : axios

폴더 구조는 간략하게

src > components / main , train
src > context / useContext (여기는 아직 비어있음)
src > App.js

간단한 구조로 잡았고 , 현재는 App.js 에서 axios를 호출 하였다.

APIKEY 를 숨기기 위해 .env 에 REACT_APP_API_KEY 라는 환경변수를 통해 저장하였고

axios 호출은 form 태그에 onSubmit 이벤트를 걸어

<호출 submit 코드 />
 const submitDate = (e) => {
    e.preventDefault();
    const response = axios.get(getURL);
    response
      .then((res) => {
        setItems(res.data.response.body.items.item);
      })
      .catch((err) => console.log(err));
    setLocal(!local);
  };

const [items, setItems] = useState([]); - 기본 빈 배열
호출이 완료되면 setItems(data) 를 담아 화면에 출력

++ 추가해야 할 것 , 앞으로 진행 할 부분
1) 현재 date 날짜 이외에는 input value로 담지 못함
2) citycode & cityname 을 변수에 담아 호출 할때 input value로 사용 하기
3) UI / UX 생각해서 화면 만들어보기
4) useContext를 통해 전역적으로 관리할 state값 빼놓기
5) ... 계속 진행하기..

출처 : 공공데이터포털