December 22, 2021

자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있습니다.

네트워크 요청은 다음과 같은 경우에 이뤄집니다.

• 주문 전송
• 사용자 정보 읽기
• 서버에서 최신 변경분 가져오기
• 등등

그런데 이 모든 것들은 페이지 새로 고침 없이도 가능합니다.

AJAX(Asynchronous JavaScript And XML, 비동기적 JavaScript와 XML)라는 용어를 들어보신 분이 있으실 겁니다. AJAX는 서버에서 추가 정보를 비동기적으로 가져올 수 있게 해주는 포괄적인 기술을 나타내는 용어로, 만들어진 지 오래되었습니다. AJAX에 XML이 포함된 이유가 바로 이 때문이죠.

그중 이번 챕터에선 모던하고 다재다능한 fetch() 메서드에 대해 소개해드리려 합니다. fetch()는 구식 브라우저에선 지원하진 않지만(폴리필을 쓰면 사용 가능) 대부분의 모던 브라우저가 지원합니다.

fetch() 기본 문법은 다음과 같습니다.

let promise = fetch(url, [options])

• url – 접근하고자 하는 URL
• options – 선택 매개변수, method나 header 등을 지정할 수 있음

options에 아무것도 넘기지 않으면 요청은 GET 메서드로 진행되어 url로부터 콘텐츠가 다운로드 됩니다.

HTTP 상태는 응답 프로퍼티를 사용해 확인할 수 있습니다.

• status – HTTP 상태 코드(예: 200)
• ok – 불린 값. HTTP 상태 코드가 200과 299 사이일 경우 true