RestAPI를 사용하여 공공데이터를 가져오려고 한다.
다음과 같은 방법을 참조하여, 공공데이터를 가져와 본다.
공공데이터의 모습)
상기 링크에서 설명하는 방식은 4가지가 있다.
상기 4가지 방법 중 2가지는 기본적으로 사용하지 않고 시작한다.
그 외의 방법 중 fetch(...)함수를 적용하여 시도해본다.
그 이유는 다음과 같다.
다음 링크(1) 혹은 다음 링크(2)에서 샘플 코드를 제공한다.
다만, 샘플코드에서 제공하는
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