[React] 공공데이터 포털 Open API 사용하기

Axios로 Spring과 연동 연습을 한 후 새로운 api 사용 방법에 대해 공부해 보았다.

2023.07.18 - [코딩/React] - [React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip

[React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip

이번 글에서는 공공데이터 포털에 있는 국가 Open Api를 사용하는 방법을 적어보고자 한다.

https://www.data.go.kr/index.do

1. 원하는 공공 API 검색

공공데이터 포털에 회원 가입을 한 후, 우측 상단의 검색창을 통해 사용하고자 하는 데이터를 검색한다.

2.  오픈 API 신청하기

활용하고 싶은 데이터의 데이터 상세에 들어간 후 오픈API라는 버튼을 클릭 후 활용신청을 통해 데이터 사용을 위한 인증 키를 발급 받는다.

api 사용에 있어 key 값이 필요하기 때문에 꼭 활용신청을 해야한다. 활용 신청에 대한 응답은 대부분 자동 승인이 되어 바로 사용할 수 있습니다.

3.  Key값 복사하기 

개발계정 상세보기에 들어가서 key 값을 복사한 후 데이터 명 옆에 있는 상세설명에 들어가 open api url을 발급받으면 된다.

이때 key 값은 Decoding 인증키를 가져와야한다.

4.  사용하고자 하는 URL 발급받기

사용하고자 하는 데이터를 클릭한 후 해당 api에서 필요로 하는 데이터를 입력한 후 데이터를 발급받으면 된다.

 이때 key는 위에서 말한 것과 같이 Decoding key를 사용해야하며, OS 구분 같은 경우 웹의 경우 ETC, 서비스명은 아무거나 적으면 된다. 또한 React의 원활한 사용을 위해 응답 메세지 형태에 대해 json 이라고 적어주면 된다.

5.  Axios를 활용하여 데이터 읽어오기.

api 결과를 가져오고 불러오는 값을 확인할 수 있는 코드를 아래 적어두었습니다!

웹 실행 후 개발자 도구 콘솔창을 통해 값들을 확인할 수 있습니다.

 const ServiceInfo = 서비스 url
 
    axios
      .get(ServiceInfo)
      .then((response) => {
        console.log("소개 정보 데이터 :", response.data);
      })
      .catch((error) => {
        console.error("API 호출 중 오류 발생:", error);
      });

 

 

*clientId가 없으면 data를 불러오기가 어려운 경우가 있는데 어떻게 알아내는지 아래 포스트에 적어두겠습니다. 

2023.10.16 - [코딩/React] - [React] Open api clientId 값 알아내기 (공공 데이터 포털)

[React] Open api clientId 값 알아내기 (공공 데이터 포털)