[용어정리] Part4 JavaScript | fetch API / Ajax(XHR)배우기 - 느리지만, 깊이있는 'MI개발자'

Front-end 로드맵 따라하기

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

(요약) 키워드로 알아보기

fetch API(Application Programming Interfaces)란?
- api를 불러오고, 정보를 내보내주는 함수라고한다.
- Ajax를 구현한 여러 방법중 최신 방법잉 fetch API이다.
- fatch는 서버와 비동기 요청방식중에 하나인데, 대표적인 비동기 요청방식중에 하나인 Ajax의 방식 중 하나이다.
- fetch함수에 쓰여지는 method는 get과 post가 있는데 설정을 따로 안해주면 기본적으로 get으로 설정된다.

AJAX() XHR이란?
- XMLHttpRequestAPI는 Ajax(Asynchronous JavaScript and XML)의 핵심
(X가 XML라고는 하지만 현재 많이 사용하고 있는 JSON 데이터도 포함한다.)
- XHR(XMLHttpRequest) 는 Ajax요청을 생성하는 JavaScriptAPI이다. XHR의 메서드로 브라우저와 서버간의 네트워크 요청을 전송할 수 있다.
- 비동기 JavaScript 및 XML 은 그 자체가 기술은 아니지만 2005년 Jesse James Garrett이 만든 용어로 HTML또는XHTML, XML, CSS, JavaScript, DOM 및 가장 중요한 XMLHttpRequest 객체(개체). 이러한 기술이 Ajax모델에 결합되면 웹 어플리케이션은 전체 브라우저 페이지를 다시 로드하지 않고, 사용자 인터페이스를 빠르고 점진적으로 업데이트할 수 있다. 이렇게 하면 더 빠르고 응답성이 높아진다.
즉, AJAX를 사용하는 가장 큰 목적은 전체 페이지가 다시 로드되지 않고, 일부분만 업데이트하기 위해서이다.

더 알아보기

AJAX를 사용하면 웹페이지 일부가 리로드되는 동안에도 코드가 계속 실행되어 비동기식으로 작업 할 수 있다.

(동기적으로 움직이는 코드와 비교하자면 웹페이지가 로딩이 끝날 때까지 다음의 코드는 움직이지 않는다.)

이제 본격적으로 Fetch API에 대해서 알아보자. 간단한 코드를 보면서 더 알아보자.

if(url) {
	fetch(url).then(function(response){return response.text();}).then(function(html){
    	document.getElementById('info').innerHTML = html;
    });
}

여기서의 then의 역할은 함수 실행이 끝나면 그 다음으로 할 일을 정해주는 것이다.

fetch(서버주소)는 웹에서 '이 서버주소로 요청 좀' 의미를 가지고 있고, then이 붙는다면 '이 요청 끝나면 이것 좀 해주라!' 라는 뜻 같다.

즉, 정리를 해본다면 then은 API를 이용하여 백엔드 서버로부터 받아온 정보를 사용할 때 .then()함수를 이용하고

fetch를 다시 정리해본다면, API를 사용하여 백엔드 서버와 비동기 요청을 하는 방식 중 하나!

비동기 방식으로 요청하기 때문에 API호출하는 과정이 끝나지 않더라도 다음 코드로 넘어가는 방식!

이 과정에서 (받아온)필요한 정보를 사용할때는 .then() 사용하여 이어서 로직을 구현하면된다.