Fetch()의 탄생 배경
fetch는 보다 쉽게 서버통신을 하기 위해서 탄생한 서버통신이 추상화된 API다. 초기에 웹은 서버에 웹페이지 전체를 POST해서 결과로 페이지를 돌려받는 식으로 통신을 했다. 이렇게 통신하게되면, 필요한 리소스이외에 모든 페이지가 리로딩되는 상황이 발생해서 페이지가 깜빡이는 현상이 일어났다. 전체 페이지를 response로 받았기 때문에 새로 rendering하는 상황이 벌어졌기 때문이다.
이후 이러한 문제를 해결하기위해 XMLHttpRequest(XHR) 방식을 이용한 서버통신방식과 JavaScript+DOM을 조작해서 필요한 리소스를 받아서 웹의 일부만 수정을 하는 방식으로 발전하게 되었다.
Asynchronous + JavaScript DOM + XMLHttpRequest(XHR)
= 통칭 AJAX가 탄생
XML을 이용해서 서버와 비동기적으로 통신하면서, JavaScript의 DOM 조작 능력을 이용해서 Danamic web page(동적 웹페이지)가 등장하게 된다. 단순히 웹페이지 문서처럼 정보만을 전달하는 것이 아니라, 행위나 이벤트에 의해서 변위적으로 상호작용(interaction)이 가능한 형태의 웹페이지다.
- 서버와 자유롭게 통신할 수 있다.(XML)
- 페이지의 깜빡임없이 부분적으로 페이지를 조작한다.(JS + DOM)
초기 XMLHttpRequest를 이용한 서버통신
var xhr = new XMLHttpRequest(); xhr.open('get', 'http://52.78.213.9:3000/messages'); // 요청의 상태 변화를 추적합니다 xhr.onreadystatechange = function(){ if(xhr.readyState !== 4) return; // readyState 4: 완료 if(xhr.status === 200) { // status 200: 성공 console.log(xhr.responseText); // 서버로부터 온 응답 } else { console.log('에러: ' + xhr.status); // 요청 도중 에러 발생 } } xhr.send(); // 요청 전송
초기의 XML을 통한 서버통신을 보게되면, 굉장히 복잡하다. 코드를 봐도 한눈에 동작이 읽히기가 어렵고, 직관적이지 않아 사용하는 것에도 굉장히 불편함을 느꼈다. 위에서 보면 서버통신 요청객체 xhr의 상태까지 일일히 추적해서 상태가 에러상황인지 아닌지까지 확인을 끝마쳐야 send()로 get요청을 할 수 있는 상태가 된다.
이후, 이러한 XMLHttpRequest를 추상화해서 만든 라이브러리인 JQuery가 나오게 되서 이전보다 추상화된 형태로 서버통신을 사용할 수 있게 되었다.
JQuery를 이용한 XMLHttpRequest 서버통신
$.get('http://52.78.213.9:3000/messages', function(response) { // response: 서버로부터 온 응답 });
그럼에도 불구하고 여전히 받아온 리소스를 처리하는 과정들이 직관적이지 않다는 판단하에 이를 훨씬 더 쉽게 핸들링할 수 있는 표준API로서 Fetch API가 등장하게 되었다.
Fetch API를 이용한 서버통신
FetchAPI를 이용한 서버통신 fetch('http://52.78.213.9:3000/messages') .then(function(response) { return response.json(); }) .then(function(json) { // json 형태로 전달받은 서버로부터의 응답 });
간단하다 WOOWW
Fetch API 예제코드
//리소스를 가지고올 URL(API)를 인자로 넣습니다. 2번째 인자는 fetch 초기화를 위한 객체인데, 없으면 default로 GET method를 사용합니다. fetch('http://naver.com/userdata/') //가지고 온 response의 json을 풀어줍니다.(javascript 일반객체로 변경) .then(res => res.json()) //javascript 일반 객체에 필터를 통해서, 데이터를 조작합니다. .then(data => data.filter(item => item.isRequired));
Fetch API의 Interface 객체
Headers 객체
Headers 객체는 HTTP Header과 대응되는 객체다.
const requestHeader = new Header(); const content = "HI"; requestHeader.append("Content-Type", "application/json"); requestHeader.append("Content-Length", content.length.toString());
위와 같은 방식으로 Header 객체를 만들고 append method를 이용해서 HTTP Request Header 정보를 추가할 수 있다.
Request 객체
Request는 HTTP 요청을 통해 자원을 가져오는 인터페이스다. Request는 URL, Header, Body가 필요하다. 그리고 Request에 대한 verb 제한(GET,POST,PUT ...)과 인증관련 설정도 추가할 수 있다.
기본적으로 Request객체는 어떤 HTTP Request에 대한 기본 스펙을 정의하고 있는 객체라고 생각하면 된다.
Response 객체
Response는 fetch를 call하면 가져올 수 있는 객체인데, 딱히 생성해서 쓸 필요는 없다.
window.fetch() vs. fetch()
node.js 환경에서는 fetch()가 전역 객체로 존재하지만, *.js파일이 웹 브라우저에 script로 올라가면 node.js환경이 아니라 javascript 환경이 되므로, fetch메소드를 사용하려면 window에 정의되어있기 때문에 window.fetch로 써줘야한다.
Fetch API 의 HTTP 요청 메소드
GET - 서버에 데이터 달라고 요청하기. (fetch default값)
Fetch API 의 에러 번호
나중에 정리할거임
