<div id="readability-page-1" class="page"><div tabindex="-1" id="___gatsby"><main><div itemscope="" itemtype="http://schema.org/BlogPosting"><section><main><article><div id="post-content" itemprop="articleBody"><p><em>3편 소개</em></p>
<ul>
<li>직접 만들 수 있는 HTTP 요청</li>
<li><strong>6장. AJAX 요청과 응답</strong>: fetch 함수로 AJAX 요청과 응답을 다루는 법에 대해</li>
<li><strong>7장. AJAX 진행율과 취소</strong>: AJAX 진행율을 계산하는 방법과 요청을 취소하는 방법에 대해</li>
<li><strong>8장. AJAX 라이브러리</strong>: fetch와 XHR 객체 기반의 주요 AJAX 라이브러리</li>
</ul>
<h2 id="6장-업로드와-응답"><a href="#6%EC%9E%A5-%EC%97%85%EB%A1%9C%EB%93%9C%EC%99%80-%EC%9D%91%EB%8B%B5" aria-label="6장 업로드와 응답 permalink"></a>6장. 업로드와 응답</h2>
<h2 id="61-ajax"><a href="#61-ajax" aria-label="61 ajax permalink"></a>6.1 AJAX</h2>
<ul>
<li>From 요청은 비교적 느림</li>
<li>AJAX, Asynchronous JavaScript and XML</li>
<li>XMLHttpRequest(XHR), fetch</li>
</ul>
<h2 id="62-fetch-api"><a href="#62-fetch-api" aria-label="62 fetch api permalink"></a>6.2 Fetch API</h2>
<ul>
<li>fetch(url, [options]) 함수</li>
<li>Request 객체</li>
<li>로그인 POST 요청 제작</li>
<li>JSON 형식</li>
</ul>
<h2 id="63-response-객체"><a href="#63-response-%EA%B0%9D%EC%B2%B4" aria-label="63 response 객체 permalink"></a>6.3 Response 객체</h2>
<ul>
<li>fetch()는 응답 객체로 이행하는 프라미스를 반환</li>
<li>응답 헤더</li>
<li>응답 본문</li>
</ul>
<h2 id="64-중간정리"><a href="#64-%EC%A4%91%EA%B0%84%EC%A0%95%EB%A6%AC" aria-label="64 중간정리 permalink"></a>6.4 중간정리</h2>
<ul>
<li>Form은 화면을 갱신하는 반면 AJAX는 화면을 유지한 채 HTTP 요청을 만들수 있습니다.</li>
<li>fetch() 함수는 url과 옵션을 지정해 HTP 요청을 만듭니다.</li>
<li>fetch는 Response 객체로 이행하는 프라미스를 반환합니다.</li>
<li>Response 객체는 응답 본문을 조회하는 메소드를 제공합니다.</li>
</ul>
<h3 id="참고"><a href="#%EC%B0%B8%EA%B3%A0" aria-label="참고 permalink"></a>참고</h3>
<ul>
<li><a href="https://developer.mozilla.org/ko/docs/Web/API/Fetch_API">Fetch API | MDN</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Status">HTTP 상태 코드 | MDN</a></li>
<li><a href="https://ko.javascript.info/fetch">Fetch | 모던 자바스크립트 튜토리얼</a></li>
</ul>
<h2 id="7장-진행율과-취소"><a href="#7%EC%9E%A5-%EC%A7%84%ED%96%89%EC%9C%A8%EA%B3%BC-%EC%B7%A8%EC%86%8C" aria-label="7장 진행율과 취소 permalink"></a>7장. 진행율과 취소</h2>
<h2 id="71-응답-진행율"><a href="#71-%EC%9D%91%EB%8B%B5-%EC%A7%84%ED%96%89%EC%9C%A8" aria-label="71 응답 진행율 permalink"></a>7.1 응답 진행율</h2>
<ul>
<li>Response: body 속성</li>
<li>서버 준비</li>
<li>응답 진행율 계산</li>
</ul>
<h2 id="72-응답-취소"><a href="#72-%EC%9D%91%EB%8B%B5-%EC%B7%A8%EC%86%8C" aria-label="72 응답 취소 permalink"></a>7.2 응답 취소</h2>
<ul>
<li>AbortController</li>
<li>AbortSignal</li>
<li>Request: signal 속성</li>
<li>응답 취소 구현</li>
</ul>
<h2 id="73-요청-진행율"><a href="#73-%EC%9A%94%EC%B2%AD-%EC%A7%84%ED%96%89%EC%9C%A8" aria-label="73 요청 진행율 permalink"></a>7.3 요청 진행율</h2>
<ul>
<li>XHR 객체로 요청 진행율 계산</li>
<li>progress 이벤트 활용</li>
</ul>
<h2 id="74-중간정리"><a href="#74-%EC%A4%91%EA%B0%84%EC%A0%95%EB%A6%AC" aria-label="74 중간정리 permalink"></a>7.4 중간정리</h2>
<ul>
<li>fetch로 응답 진행율을 계산할 수 있다.</li>
<li>fetch로 응답을 취소할 수 있다.</li>
<li>XHR 객체로 요청 진행율을 계산할 수 있다.</li>
</ul>
<h3 id="참고-1"><a href="#%EC%B0%B8%EA%B3%A0-1" aria-label="참고 1 permalink"></a>참고</h3>
<ul>
<li><a href="https://ko.javascript.info/fetch-progress">Fetch Progress | JAVASCRIPT.INFO</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/API/ReadableStream">ReadableStream | MDN</a></li>
<li><a href="https://ko.javascript.info/fetch-abort">Fetch Abort | MDN</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/API/AbortController">AbortController | MDN</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal">AbortSignal | MDN</a></li>
<li><a href="https://ko.javascript.info/xmlhttprequest">XMLHttpRequst | JAVASCRIPT.INFO</a></li>
</ul>
<h2 id="8장-라이브러리"><a href="#8%EC%9E%A5-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC" aria-label="8장 라이브러리 permalink"></a>8장. 라이브러리</h2>
<h2 id="81-superagent"><a href="#81-superagent" aria-label="81 superagent permalink"></a>8.1 SuperAgent</h2>
<ul>
<li>XHR 기반. 2011년 출시. 콜백 스타일</li>
<li>HTTP 메소드별 전용 함수</li>
<li>Error 클래스를 확장한 오류 객체</li>
<li>플러그인으로 확장</li>
</ul>
<h2 id="82-axios"><a href="#82-axios" aria-label="82 axios permalink"></a>8.2 Axios</h2>
<ul>
<li>XHR 기반. 2014년 출시. 프라미스 기반</li>
<li>HTTP 메소드별 전용 함수</li>
<li>AxiosError</li>
<li>인터셉터로 확장</li>
</ul>
<h2 id="83-ky"><a href="#83-ky" aria-label="83 ky permalink"></a>8.3 Ky</h2>
<ul>
<li>fetch 기반. 2018년 출시. 타입스크립트</li>
<li>HTTP 메소드별 전용 함수</li>
<li>프라미스 사용을 간소화</li>
<li>Error 클래스를 확장한 HTTPError</li>
<li>훅으로 확장</li>
</ul>
<h2 id="84-wretch"><a href="#84-wretch" aria-label="84 wretch permalink"></a>8.4 Wretch</h2>
<ul>
<li>fetch 기반. 2017년 출시. 타입스크립트</li>
<li>HTTP 메소드별 전용 함수</li>
<li>Error 클래스 확장한 WrechError</li>
<li>미들웨어, 애드온으로 확장</li>
</ul>
<h2 id="85-중간정리"><a href="#85-%EC%A4%91%EA%B0%84%EC%A0%95%EB%A6%AC" aria-label="85 중간정리 permalink"></a>8.5 중간정리</h2>
<ul>
<li>비슷한 점
<ul>
<li>HTTP 메소드별로 함수를 제공한다.</li>
<li>일관된 응답 객체를 제공한다.</li>
<li>일관된 오류 객체를 제공한다.</li>
<li>구조와 이름만 다를 뿐 확장하는 인터페이스를 제공한다.</li>
</ul>
</li>
<li>다른 점
<ul>
<li>SuperAgent: 가장 오래됨. 크로스브라우져</li>
<li>Axios: xhr 기반. 프라이스 인터페이스 제공</li>
<li>Ky: fetch 기반. 프라미스 사용 간소화</li>
<li>Wretch: 오류 전용 캐처, 미들웨어, 애드온 등 편의 제공</li>
</ul>
</li>
</ul>
<h3 id="참고-2"><a href="#%EC%B0%B8%EA%B3%A0-2" aria-label="참고 2 permalink"></a>참고</h3>
<ul>
<li><a href="https://github.com/ladjs/superagent">SuperAgent | Github</a></li>
<li><a href="https://github.com/axios/axios">Axios | Github</a></li>
<li><a href="https://github.com/sindresorhus/ky">Ky | Github</a></li>
<li><a href="https://github.com/elbywan/wretch">Wretch | Github</a></li>
</ul></div></article></main></section></div></main></div></div>

김정환 블로그 RSS Feed

김정환

3편 소개 직접 만들 수 있는 HTTP 요청 6장. AJAX 요청과 응답: fetch 함수로 AJAX 요청과 응답을 다루는 법에 대해 7장. AJAX 진행율과 취소: AJAX 진행율을 계산하는 방법과 요청을 취소하는 방법에 대해 8장. AJAX…

[HTTP] 3편. AJAX

댓글