axios를 통한 오픈 API 연결하기

나이가 연차가 몇 년인데, 아직도 api 연결할 때 세팅을 까먹어서 url이 문구로 그냥 나오면 당황해버린다... 허허... 실무에만 신경쓰고 개인 포트폴리오를 잘 안 하다보니 할 때마다 매 번 새롭다. 짜릿해.

 

나를 반성하는 마음으로 또 나와같이 할 때마다 검색을 해보시는 분들을 위하여 정리해보도록 한다. 심지어 이 글은 내가 예전에 만들었던 코드들을 기반으로 작성한다. 과거의 나는 오늘의 내가 다시 헤맬줄은 몰랐겠찌 ㅎ.ㅎ... (사실 진짜 별거 없어서 쓰기 부끄럽..)

 

* 오픈 api를 사용하려면 회원가입을 통하여 각자에게 맞는 발급키를 받아야 한다. 해당 포스팅은 키를 발급받았다는 가정하에 진행한다.

* 보통 발급 key값은 필수일테고, 이외의 것은 사용하고자 하는 api의 필수값에 따라 다르다. 해당 포스팅은 각자에게 맞는 필수값을 확인하였다고 가정하고 진행한다. 필수값 미 오기에 따라 에러가 발생할 수 있으니 참고하자.

* 해당 포스팅은 npm으로 진행한다. yarn을 쓰시는 분들은 yarn으로 변경하여 설치하시길 바란다. ( yarn add axios ) 이런 식으로

* api를 연결하는데에는 다양한 방법이 있다. 이 포스팅은 상단에 명시한 것 처럼 axios를 기준으로 한다.

 

---

npm i axios

프로젝트에 axios를 설치하여 준다.

 

https://www.npmjs.com/package/axios

axios

axios란 공식문서에 따르면 브라우저, Nod.js를 위해서 만들어진 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 설치를 완료하였다면 반 이상은 세팅을 완료한 셈이다.

 

이제 불러오고자 하는 js 파일 상단에 axios를 임포트 시켜준다.

import axios from 'axios'

그다음은 사용하기만 하면 끝~

axios.get(url).then((response) => {  // url은 본인이 불러오고자 하는 api 주소이다.
	console.log('response', response);
})

이렇게 하면 reponse에서 원하는 데이터를 보여주는 것을 확인 할 수 있다. 더불어 url은 자신이 불러오고자 하는 api 주소인데, 가령

yuniel.tistory.com?key=발급키&필수값=어떠한값

과 같은 느낌의 url을 의미하는 것이다. 발급키는 상단에 언급한 것 처럼 개인적으로 발급받는 것이며, 보통은 환경변수를 통하여 관리한다.

 

과거의 나는 많은 삽질을 그나마 기록해두어 관련 포스팅을 첨부한다. 그럼 모두 즐코~

https://yuniel.tistory.com/34

webpack-server로 설치 후, 환경변수 설정하기