Fetch API
네트워크 통신의 새로운 표준 (Fetch API)
Fetch API는 기존의 낡은 XMLHttpRequest(XHR)를 대체하기 위해 등장한 강력하고 현대적인 웹 네트워크 통신 API입니다.기본적으로 Promise 기반으로 설계되어 비동기 처리가 훨씬 간결하며,
async/await 문법과 찰떡궁합을 자랑합니다. 최신 웹 브라우저에 내장되어 있어 별도의 라이브러리(axios 등) 설치 없이도 즉시 서버와 데이터를 주고받을 수 있습니다.
1. 택배 기사와 수령 확인 (비유)
서버에 데이터를 요청하고, 성공적으로 받았는지 확인하는 과정입니다.
🚚
fetch('주소')
서버라는 멀리 있는 창고에 택배 기사를 보냅니다. 기사가 왕복하는 데 시간이 걸리므로 비동기(Promise)로 동작하며 다른 작업을 멈추지 않습니다.
📦
response.json()
택배가 무사히 도착했는지 상태(response.ok)를 확인한 후, 택배 상자를 열어 내용물(JSON 데이터)을 우리가 쓸 수 있는 자바스크립트 객체로 파싱합니다.
2. Fetch API 통신 흐름도
3. Fetch API의 주요 특징
| 특징 | 상세 설명 |
|---|---|
| Promise 기반 설계 | 콜백(Callback) 지옥을 유발하던 과거 방식과 달리, .then()이나 async/await를 통해 비동기 코드를 동기 코드처럼 매우 깔끔하게 작성할 수 있습니다. |
| HTTP 에러 처리 주의 | axios와 달리, fetch는 HTTP 404나 500 에러가 발생해도 네트워크 자체가 끊기지 않았다면 에러(catch)로 빠지지 않습니다. 반드시 response.ok로 성공 여부를 따로 검사해야 합니다. |
| 내장 표준 (Native) | React, Vue, 바닐라 JS 어디서든 무거운 외부 라이브러리 설치 없이 즉시 사용할 수 있는 모던 브라우저의 글로벌 표준 규격입니다. |
<div class="fetch-demo">
<h2>사용자 데이터 로더 (Fetch API)</h2>
<p class="desc">버튼을 누르면 외부 서버(JSONPlaceholder)에서 데이터를 가져옵니다.</p>
<button id="fetchBtn" class="action-btn">
<span class="icon">🚀</span> 데이터 가져오기
</button>
<!-- 데이터가 표시될 영역 -->
<div id="resultCard" class="result-card hidden">
<div class="loader" id="loader">로딩 중...</div>
<div id="userData" class="user-data hidden">
<div class="avatar">👤</div>
<div class="info">
<h3 id="userName">이름</h3>
<p id="userEmail" class="email">이메일</p>
<p id="userCompany" class="company">회사</p>
</div>
</div>
<div id="errorMsg" class="error-msg hidden">
데이터를 불러오는데 실패했습니다.
</div>
</div>
</div>