TIL

fetch

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능합니다.

기본 개념과 사용 방법
Fetch에는 일반적인 오브젝트로로 Request 와 Response가 포함되어 있습니다. 이것들은 service worker이나 Cache API같이 Response와 Request객체를 다루는 API나 독자적으로 리스폰스를 발생시키는 경우에도 사용 가능합니다.

또한 CORS나 HTTP 오리진 헤더의 행동에 관련한 개념에 대해서도 정의되어 있습니다. 이 정의는 여러곳에 분산되어있는 갖가지 행동에대한 정의들을 한곳에 고쳐 쓴 것입니다.

Fetch API로 리소스를 취득하기 위해서 GlobalFetch.fetch 메소드를 불러들여야 합니다. 이 메소드는 Window나 WorkerGlobalScope와 같은 인터페이스로부터 구현되었습니다.

fetch()를 불러들이는 경우, 취득할 리소스를 반드시 인수로 지정하지 않으면 안됩니다. 읽어들인 뒤, fetch()는 Promise객체를 반환합니다. 리퀘스트가 성공하든 실패하든 해당 리퀘스트 통신에 대한 Response객체가 취득됩니다. fetch()의 두번째 인수는 초기화에 사용되는 객체를 정의하고 있습니다. 이 인수는 기입하지 않아도 함수의 동작에 문제가 없습니다. 이 인수에 대한 상세한 정보는 Request)를 참고해주시기 바랍니다.

Response를 가져온 후에, 콜백함수의 매개변수로 담긴 response 객체에는 리스폰스에 포함되어있는 컨텐츠와 그에대한 처리방법이 담긴 메소드들이 담겨있습니다. 자세한 사항은 Body를 참고해주시기 바랍니다.

Request()와 Response()를 사용하는 것으로, Request와 Response를 직접 작성할 수 있습니다. 하지만 이러한 추가 옵션들은 FetchEvent.respondWith와 같은 또다른 API를 불러 들이는 작업이 수행되어야 하므로 필요하지 않다면 굳이 작성하지 않는 편이 좋습니다.

fetch 의 활용

A basic fetch request is really simple to set up. Have a look at the following code:

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

오늘은...

fetch를 활용한, 즉, 외부의 자료를 받아서 기동하는 어플을 처음으로 제작해보는 스프린트를 진행하였다. 기존의 스프린트들은 자료가 필요가 없거나 입력 값이거나 내부에서 전달하는 자료들이 대부분이었지만 처음으로 외부에서 자료를 요청하여 요청한 자료를 받고 그것을 내가 구상한 앱에서 표현하는 스프린트를 진행한 것이었다.

그리고 페어를 진행하여도 별다른 이점을 구하지 못한 결과의 페어분을 처음으로 보게 된 때이기도 하다. 이전의 스프린트중의 하나를 온전히 진행하지 못하였다고 하신 그분은 즈금의 스프린트진행이 원할치는 않은 모습을 보이셨다. 개인적으로는 밤중에 계속 줌방에 밖혀있고 부족하지만 대답드릴수 있는 질문에 대답을 하며 그간의 기간을 지내왔던터라 더 많은걸 챙겨 가실수 있었을지도 모른다는 생각이 들었다. 여하튼 이래저래 스프린트는 빠르게 마무리 하였지만 도와드린게 정말 도움이 될지는 확신하지 못하겠다.

그리고 내일의 HA에 대한 간단한 설명이 있었다. 하루 동안 수행하는 문제풀이라.. 코플릿을 풀이하면 풀수 있을정도의 난이도라고 하고 그동안 이런저런 문제 풀이를 해보았던 경험을 바탕으로 잘 풀수 있으리라 생각 해보자.