안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 우리 성의 보물을 안전하게 지키는 금고(Persistence)를 설치했죠? 이제 우리 성은 완벽해졌지만, 성 밖의 소식도 궁금하지 않나요? 오늘은 먼 나라의 날씨나 재미있는 퀴즈 정보를 가져다주는 마법 우체부, Axios(엑시오스)와 API를 소개합니다!
1. API: 구름 위의 도서관
API는 인터넷 구름 위에 있는 ‘거대한 도서관’과 같아요.
- 정보 창구: 도서관 사서 선생님께 “오늘 서울 날씨 알려주세요!”라고 적힌 종이를 전달하면, 선생님이 정보를 찾아서 대답해주는 것과 같답니다.
- 정해진 약속: 정보를 달라고 할 때 쓰는 특별한 양식(주소)이 있어서, 그 약속만 지키면 누구나 정보를 받을 수 있어요.
2. Axios: 빗자루를 탄 우체부
Axios는 도서관까지 빗자루를 타고 슝~ 날아가서 편지를 전달하고 답장을 가져오는 ‘우체부’예요.
- 대신 심부름: 우리는 우체부에게 “이 주소로 가서 정보를 좀 가져와줘!”라고 부탁만 하면 돼요.
- 안전한 배달: 가는 길에 소중한 정보가 잃어버리지 않게 안전하게 배달해주고, 답장이 올 때까지 얌전하게 기다려준답니다.
3. 실전 마법: 구름 너머에서 정보 가져오기
우체부(Axios)에게 심부름을 시키는 코드를 짜볼까요?
<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
const weather = ref('');
// 1. 우체부에게 심부름 시키기 (Action 마법과 함께 써요!)
async function fetchWeather() {
try {
// 2. 구름 도서관(API 주소)으로 빗자루 타고 출발!
const response = await axios.get('https://api.weather.com/seoul');
// 3. 우체부가 가져온 답장을 가방에서 꺼내요
weather.value = response.data.status;
} catch (error) {
console.log('우체부가 길을 잃었어요! 😢');
}
}
</script>
<template>
<div class="weather-room">
<button @click="fetchWeather">오늘 날씨 물어보기 🌤️</button>
<p>구름 도서관의 대답: {{ weather }}</p>
</div>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘편지 주고받기’나 ‘배달 음식 주문’에 비유해 보세요. 내가 직접 요리(데이터 생성)하지 않아도, 주문(API 요청)만 하면 맛있는 음식(데이터)이 도착하는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 ‘오늘의 명언’이나 ‘무작위 수학 문제’를 API로 가져와 보세요. 내 성 안에 없는 새로운 정보가 실시간으로 나타나는 것을 보며, 아이는 전 세계가 네트워크로 연결되어 있다는 놀라운 사실을 체감하게 됩니다.
마치며: 세상과 소통하는 글로벌 마법사
이제 여러분은 성 문을 활짝 열고 세상의 모든 정보와 소통하는 멋진 마법사가 되었습니다! 정말 넓은 세상을 보게 되었네요. 다음 시간에는 **’마법의 돋보기(Search & Filter)’**라는 주제로, 가져온 수많은 정보 중에서 내가 원하는 것만 쏙쏙 골라내는 검색 마법을 배워볼게요! 내일 아침 9시에 만나요!
