🐾 Cat Image Viewer

📘 고양이 사진이 나오는 과정

---

1️⃣ onMounted()란?

onMounted()는 Vue 컴포넌트가 화면에 완전히 나타난 직후 실행되는 라이프사이클 훅입니다. 이 예제에서는 앱이 로드되자마자 고양이 이미지를 자동으로 불러오는 역할을 합니다.

2️⃣ ref() — 반응형 상태

ref()는 Vue의 반응형 데이터입니다. imgUrl.value 값을 바꾸면 화면에 표시되는 이미지가 자동으로 갱신됩니다.

3️⃣ Axios로 API 요청

Axios는 HTTP 요청을 쉽게 보낼 수 있는 라이브러리입니다. 여기서는 TheCatAPI로 GET 요청을 보내 고양이 사진 URL을 받아옵니다.

4️⃣ 버튼 클릭 시 새 고양이 이미지 요청

@click="getCatImage"는 버튼 클릭 이벤트를 Vue 방식으로 처리하는 문법입니다. 클릭할 때마다 새로운 고양이 이미지를 불러옵니다.