[JS] Fetch API(1)

🐳

요즘 리액트 쿼리 공식문서를 조금씩 읽어보고 있는데 fetch 라는 단어가 나올 때마다 약간 모호하게 이해되어서 mdn사이트에서 의미를 찾아보게 되었다. 이해한 내용을 바탕으로 정리해두려고 글을 남긴다. 

----

 

최신 웹에서 전체 페이지 로드 없이 웹 페이지 섹션을 업뎃하는 것이 일반적이다. 이걸 가능케하는 건 fetch api 때문임.
웹에서 페이지를 로드하는데(브라우저가 페이지를 화면에 나타내는데) 는 필요한 파일에 대해 서버에 하나 이상의 http 요청을 하고 서버가 요청된 파일로 응답하게 된다. 

사용자가  다른 페이지를 방문하면 브라우저는 새 파일을 요청하고 서버는 이에 대해 응답한다. 

위 그림의 의미는 => 데이터 요청을 하면, 모든 데이터를 응답한다는 뜻인거 같음 

이건 많은 사이트에서 완벽하게 동작하지만 웹사이트는 데이터 중심적이라는 것을 고려해야한다
예, Vancouver Public Library와 같은 도서관 웹사이트. 이건 데이터베이스에 대한 사용자 *인터페이스로 생각할 수 있음 
(= 데이터베이스를 사용자가 쉽게 사용할 수 있게 만들어 둔 사이트라고 생각할 수 있다는 의미 )
* 서로 다른 두개 시스템, 장치 사이에 정보나 신호를 주고받는 경우의 접점이나 경계면 
사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템을 의미 

도서관 웹페이지에서 원하는 정보를 얻기위해서 검색이나 필요한 동작을 할 때 
동작이 실행될 때마다 페이지가 업데이트 되어야 한다. 하지만 사이드바, 헤더, 푸터 등은
그럴 필요가 없음.항상 같은 정보를 출력하고 있기 때문에 

과거 모델은 한부분만 업데이트해야하는 경우 전체 페이지를 로드해야한다는 비효율적 방법을 
사용하고 있어서 사용자에게 좋은 경험을 줄 수 없었음.

과거 모델을 대신해서 많은 웹사이트들은 JavaScript API를 사용하여 서버에 데이터를 요청하고 
페이지 로드 없이 페이지 콘텐츠를 업데이트합니다.
사용자가 새 항목에 대해 검색할 때 브라우저는 페이지 업뎃에 필요한 정보만을 요청한다.

위 그림의 의미는 => 데이터 요청시 요청한 정보만을 응답하고 페이지의 필요한 부분을 업뎃한다. 

그 메인 api 는 fetch api 이다. 
이를 통해서 페이지에서 실행되는 js가 특정 리소스를 검색하기 위해 서버에 http 요청을 할 수 있음
서버가 요청 정보를 제공했을 때 js는 페이지 데이터를 업뎃 할 수 있다. 
일반적으로 DOM mainpulation APIs를 사용할다. 요청된 데이터 대부분은 JSON이다.
이건 구조화된 데이터를 보내는데 좋은 포맷임. HTML, 반드시 text로만 가능함
데이터 기반 사이트를 위한 흔한 패턴임.

페이지를 빠르게 업뎃 가능함. 그리고 페이지 업데이트가 훨씬 빨라지고 페이지가 새로 고쳐질 때까지 기다릴 필요가 없음.
업데이트 할 때마다 다운로드 되는 데이터가 줄어들어서 *대역폭 낭비가 줄어듦

*일정시간 내에 데이터 연결을 통과할 수 있는 정보량의 척도 

광대역 연결의 데스크탑에서는 큰 문제가 아닐 수 있는데 모바일 장치 또는 유비쿼터스 고속 인터넷 
서비스가 없는 국가에서는 중요한 문제이다. 

작업속도를 높이기 위해 일부 사이트는 리소스와 데이터가 처음 요청될 때 사용자 컴퓨터에 
저장하기도 함. 즉, 이후 방문시 페이지가 처음 로드 될 때마다 새 복사본을 다운로드 하는 대신
로컬 버전을 사용한다. 콘텐츠가 업뎃 될 시 서버에서 다시 로드 됨 

 

출처: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data#the_fetch_api

Fetching data from the server - Learn web development | MDN