데이터를 불러오고 화면에 보여주는 작업에서 짚고 넘어가야 할 개념인 데이터 불러오기를 araboza
API라고 제목에 표시했지만 보통 open API를 사용한다. open API는 공공 기관이 이용자에게 정보를 재활용하거나 상업적, 비영리적으로 이용할 권리를 부여함으로써 다양한 서비스와 데이터를 보다 쉽게 이용할 수 있도록 공개한 표준화된 인터페이스. 간이 객체 접속 프로토콜, 자바스크립트 따위가 대표적이다. - 네이버 사전
이 데이터를 그럼 어떻게 불러올까? 대표적인 방법은 두 가지다. fetch와 axios
1. fetch
Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수도 있습니다.
fetch('http://example.com/movies.json')
.then((response) => response.json())
.then((data) => console.log(data));위 코드는 네트워크에서 JSON 파일을 가져와서 콘솔에 출력합니다. 가장 단순한 형태의 fetch()는 가져오고자 하는 리소스의 경로를 나타내는 하나의 인수만 받습니다. 응답은 Response 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없습니다.
Response 객체 역시 JSON 응답 본문을 그대로 포함하지는 않습니다. Response는 HTTP 응답 전체를 나타내는 객체로, JSON 본문 콘텐츠를 추출하기 위해서는 json() (en-US) 메서드를 호출해야 합니다. json()은 응답 본문 텍스트를 JSON으로 파싱한 결과로 이행하는, 또 다른 프로미스를 반환합니다. 또한, 형태에 따라 여러가지 옵션들을 제공해야합니다.
async function postData(url = '', data = {}) {
// 옵션 기본 값은 *로 강조
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE 등
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json',
// 'Content-Type': 'application/x-www-form-urlencoded',
}출처 : mdn
2.axios
Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.
출처 : Axios Docs
fetch와의 차이점은 JSON 요청을 하지 않아도 된다는 점이다. 대부분 axios를 사용한다.
