🐾 Cat Image Viewer

λ²„νŠΌμ„ 눌러 μƒˆλ‘œμš΄ 고양이 사진을 λ§Œλ‚˜λ³΄μ„Έμš”!

Cat Image

πŸ“˜ 고양이 사진이 λ‚˜μ˜€λŠ” κ³Όμ •


1️⃣ onMounted()λž€?

onMounted()λŠ” Vue μ»΄ν¬λ„ŒνŠΈκ°€ 화면에 μ™„μ „νžˆ λ‚˜νƒ€λ‚œ 직후 μ‹€ν–‰λ˜λŠ” 라이프사이클 ν›…μž…λ‹ˆλ‹€. 이 μ˜ˆμ œμ—μ„œλŠ” 앱이 λ‘œλ“œλ˜μžλ§ˆμž 고양이 이미지λ₯Ό μžλ™μœΌλ‘œ λΆˆλŸ¬μ˜€λŠ” 역할을 ν•©λ‹ˆλ‹€.

2️⃣ ref() β€” λ°˜μ‘ν˜• μƒνƒœ

ref()λŠ” Vue의 λ°˜μ‘ν˜• λ°μ΄ν„°μž…λ‹ˆλ‹€. imgUrl.value 값을 λ°”κΎΈλ©΄ 화면에 ν‘œμ‹œλ˜λŠ” 이미지가 μžλ™μœΌλ‘œ κ°±μ‹ λ©λ‹ˆλ‹€.

3️⃣ Axios둜 API μš”μ²­

AxiosλŠ” HTTP μš”μ²­μ„ μ‰½κ²Œ 보낼 수 μžˆλŠ” λΌμ΄λΈŒλŸ¬λ¦¬μž…λ‹ˆλ‹€. μ—¬κΈ°μ„œλŠ” TheCatAPI둜 GET μš”μ²­μ„ 보내 고양이 사진 URL을 λ°›μ•„μ˜΅λ‹ˆλ‹€.

4️⃣ λ²„νŠΌ 클릭 μ‹œ μƒˆ 고양이 이미지 μš”μ²­

@click="getCatImage"λŠ” λ²„νŠΌ 클릭 이벀트λ₯Ό Vue λ°©μ‹μœΌλ‘œ μ²˜λ¦¬ν•˜λŠ” λ¬Έλ²•μž…λ‹ˆλ‹€. 클릭할 λ•Œλ§ˆλ‹€ μƒˆλ‘œμš΄ 고양이 이미지λ₯Ό λΆˆλŸ¬μ˜΅λ‹ˆλ‹€.