minstudio

Fetch API (실제 서버와 통신하기)

자바스크립트가 세상과 소통하는 창구입니다. 브라우저에 내장된 fetch() 함수와 async/await를 결합하면 단 3~4줄의 코드만으로 공공 데이터나 백엔드 서버의 데이터(JSON)를 가져와서 내 웹사이트 화면에 뿌려줄 수 있습니다.

우체국 택배 통신 (Fetch API)

내 브라우저
1. GET 요청 ✉️
➡➡➡
⬅⬅⬅
2. JSON 응답 📦
백엔드 서버 
<!-- 버튼을 누르면 무료 강아지 사진 API를 호출하여 화면에 띄웁니다 -->
<button id="get-dog">강아지 사진 보기</button>
<div id="dog-container" style="margin-top: 10px;"></div>

<script>
// async 함수를 클릭 이벤트에 바로 연결
document.getElementById("get-dog").addEventListener("click", async () => {
    const container = document.getElementById("dog-container");
    container.textContent = "귀여운 강아지를 찾는 중... 🐶";
    
    try {
        // 1. fetch() 함수로 외부 서버에 요청을 보냄 (await로 응답을 기다림)
        const response = await fetch("https://dog.ceo/api/breeds/image/random");
        
        // 2. 서버의 응답을 우리가 쓸 수 있는 JSON 객체로 파싱 (await로 기다림)
        const data = await response.json();
        
        // 3. 응답받은 이미지 URL로 화면 즉시 업데이트
        container.innerHTML = `<img src="${data.message}" style="width:100%; max-width:400px; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.1);">`;
    } catch (error) {
        container.textContent = "통신에 실패했습니다 😢";
    }
});
</script>
실행 결과
Fetch API (실제 서버와 통신하기) | Minstudio