<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>