Fetch API - 이미지 fetching하기

웹 개발시에 API를 호출하기 위해서 제일 먼저 떠오르는 것이 request, axios, jQuery 같은 라이브러리이다. 하지만 이제 브라우저가 fetch() 함수를 지원하기 때문에 이러한 라이브러리를 사용해서 자바스크립트 번들(bundle)파일의 크기를 늘리는 낭비를 하지 않아도 된다. 물론 나는 주로 reactJs, nextJs 로 작업하기 때문에 axios를 써서 호출한다. 그러다 이번에 이미지 url에서 파일을 추출하기 위해서 fetch 함수를 써서 response를 받아올 일이 있었다. 방법을 찾아서 알아보다가 fetch함수를 이렇게 쓸 수 있다는 것도 알게 되었다. 겸사겸사- fetch에 대해 알아보고 공부하려고 한다. 

 

 

📢 Fetch 를 알자!

fetch() 함수는 네트워크 요청하고 응답을 받을 수가 있다. (Request / Response) 캐시, 웹 서비스 핸들링 등 Response를 프로그래밍 언어로 조작하는 것도 허용한다!  fetch()는 매개변수를 두 개 받는데, 첫 번째 인자로 url를, 두 번째 인자로 옵션 객체를 받고 Promise 타입의 객체를 반환한다. 반환된 객체는 API 호출이 성공했을 경우 응답(response) 객체를 resolve 하고 실패했을 경우에는 예외(error) 객체를 reject 한다.

 

 

Fetch interface 

4가지의 인터페이스가 존재한다. 

 

▪ Headers - 요청 / 응답의 헤더로, 그에 따른 instance를 생성할 수 있고, 다양한 액션(메소드)을 가지고 있다. 이것에 따라서 결과가 달라진다. ex)  append(), delete(), entries(), forEach(), get(), has(), keys(), set(), values(), getAll() 

const myHeaders = new Headers();

myHeaders.append('Content-Type', 'text/xml');
myHeaders.get('Content-Type') // should return 'text/xml'

 

▪ Requests - 요청 헤더스의 프로퍼티를 가진다.

const request = new Request('https://www.mozilla.org/favicon.ico');

const url = request.url;
const method = request.method;
const credentials = request.credentials;

fetch(request)
  .then((response) => response.blob())
  .then((blob) => {
    image.src = URL.createObjectURL(blob);
  });

 

 

▪ Response - fetch()가 Promise를 리턴하는데, 그때 결과 값에서 Response를 얻을 수 있다. 

const image = document.querySelector('.my-image');
fetch('flowers.jpg')
.then((response) => response.blob())
.then((blob) => {
  const objectURL = URL.createObjectURL(blob);
  image.src = objectURL;
});

 

▪ fetch() - 리소스 페치를 위한 메소드

 

디폴트로 GET 방식으로 작동을 하고, GET방식은 요청 전문을 받지 않기 때문에 옵션 인자가 필요 없다. 

fetch('url')
.then((response) => console.log(response))

 

대부분의 API들은 JSON형태로 응답하기 때문에 Response 객체 역시 json() 메서드를 제공한다

 

 

 

 

 

왜 fetch에 대해 정리할 마음을 먹었느냐?

업무를 하다가 이미지 url에서 데이터를 받아와서 file로 변환해줘야 하는 상황이 발생했다. 이때 썼던 것이 fetch였다. 맨날 json 데이터를 받거나, 주기만 했지, 이미지 파일 url에 담기 어떠한 정보를 가공한다던가 해볼 생각을 못했기에 과장을 하자면 쇼킹 그 자체였다. fetch를 이용해서 FormData()를 사용해 파일을 업로드할 수가 있는데, 마찬가지로 response로 이미지 url에 담겨있는 정보를 받을 수도 있다. 

 

fetch를 사용해서 이미지 리소스를 가져올 수 있다는 이야기이다. 이때 blob이라는 것이 등장하는데, blob은 바이너리 형태로 큰 객체를 저장할 때 많이 쓰인다. 이를 테면 비디오, 이미지, 사운드 같은 멀티미디어 객체에 말이다. 

 

response = fetch(url)
response.blob()

을 하면 response에는 해당 url , type 등을 확인할 수 있고, 해당 이미지의 blob을 붙이면 type, size를 확인할 수 있다. 

이때 여기서 나오는 리소스를 발라내서 내가 필요한 정보만 쏙! 뽑아내서 작업을 진행했다. 

 

▶ https://developer.mozilla.org/en-US/docs/Web/API/Response

 

 

 

 

 

 

 

 

 

 

📚 참고자료

▪ https://velog.io/@prayme/Fetch-API

▪ https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch