공공데이터 포탈의 REST API 사용하기

FGPRJS·2022년 1월 11일
0

RestAPI를 사용하여 공공데이터를 가져오려고 한다.

다음과 같은 방법을 참조하여, 공공데이터를 가져와 본다.

공공데이터의 모습)

  • EndPoint와 인증키로 이루어져 있다.


상기 링크에서 설명하는 방식은 4가지가 있다.

  • XMLHttpRequest를 사용하기
    • ES6부터 사용하지 않는다고 하므로, 폐기한다.
  • fetch
  • Axios
  • jQueryAJAX
    • jQuery는 앞으로 전혀 사용하지 않을 계획이므로, 폐기한다.

상기 4가지 방법 중 2가지는 기본적으로 사용하지 않고 시작한다.

그 외의 방법 중 fetch(...)함수를 적용하여 시도해본다.

그 이유는 다음과 같다.

  • 즉시 사용할 수 있다.
    • fetch는 그 어떤 사전 작업 없이도 즉시 사용할 수 있다.
  • 라이브러리가 당장 필요 없음.
    • 라이브러리가 아직 필요한 이유를 파악하지 못했다.

data.go.kr에서 제공하는 예시

다음 링크(1) 혹은 다음 링크(2)에서 샘플 코드를 제공한다.

다만, 샘플코드에서 제공하는

  • 양식(1)은 상기 방법 중 XMLHttpRequest를 사용하는 방식이다.
  • 양식(2)는 상기 방법 중 jQueryAJAX를 사용하는 방식이다.

fetch에서 data객체를 사용할 수 있는지 아직 알지 못하므로, 양식(1)의 url방식을 빌려온다.

다음과 같은 방식으로 fetch 시도는 성공할 수 있었다.

constructor(props){
  super(props);

  let url = 'http://api.data.go.kr/openapi/tn_pubr_public_weighted_envlp_api'; /*URL*/

  var queryParams = '?' + encodeURIComponent('serviceKey') + '='+'{나의 서비스 키}'; /*Service Key*/
  queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('0'); /**/
  queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('100'); /**/
  queryParams += '&' + encodeURIComponent('type') + '=' + encodeURIComponent('json'); /**/

  fetch(url + queryParams)
    .then(response => response.json())
    .then(data => {
    console.log(data);
  })
}

위 코드로 받아온 결과 예시는 다음과 같다.

{response: {…}}
response:
body:
items: Array(100)
0: {ctprvnNm: '인천광역시', signguNm: '남동구', weightedEnvlpType: '규격봉투', weightedEnvlpMthd: '소각용', weightedEnvlpPrpos: '생활쓰레기', …}
1: {ctprvnNm: '인천광역시', signguNm: '남동구', weightedEnvlpType: '재사용규격봉투', weightedEnvlpMthd: '매립용', weightedEnvlpPrpos: '생활쓰레기', …}

//...중략

length: 100
[[Prototype]]: Array(0)
numOfRows: "100"
pageNo: "1"
totalCount: "756"
[[Prototype]]: Object
header:
resultCode: "00"
resultMsg: "NORMAL_SERVICE"
type: "json"
[[Prototype]]: Object
[[Prototype]]: Object
[[Prototype]]: Object
  • Body/items : 실제 데이터가 있다.
  • header : 결과가 있다.
profile
FGPRJS

0개의 댓글