안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리가 만든 마법 성이 이제 아주 똑똑해졌지만, 성 안의 정보만 보여주기엔 세상에 재미있는 일이 너무 많죠? 오늘은 성 밖의 날씨, 뉴스, 맛집 정보를 실시간으로 배달해주는 마법 우체국, Axios(엑시오스)를 배워볼게요!
1. API와 Axios: 세상과 연결되는 통로
API는 다른 성(서버)에서 정보를 나눠주기 위해 만든 ‘창구’예요. 그리고 Axios는 그 창구까지 달려가서 우리가 필요한 정보를 받아오는 ‘우편 배달부’랍니다.
예를 들어, 우리가 “오늘 서울 날씨 알려주세요!”라고 편지를 써서 Axios 배달부에게 주면, 배달부가 기상청 API 성으로 달려가서 날씨 정보를 받아 우리에게 전해주는 원리예요.
2. 마법 우체국 사용법 (GET 마법)
가장 많이 쓰는 마법은 정보를 가져오는 GET 마법이에요. 우편 배달부에게 주소만 알려주면 된답니다!
- 주소(URL): 정보를 가진 성의 위치예요.
- 응답(Response): 배달부가 가져온 보물 상자(데이터)예요.
3. 실전 마법: 오늘의 응원 한마디 가져오기
인터넷 어딘가에 있는 ‘응원 마법 성’에서 메시지를 가져오는 코드를 짜볼까요?
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios'; // 우편 배달부 소환!
const message = ref('소식을 기다리는 중...');
const getMagicMessage = async () => {
try {
// 배달부야, 이 주소에 가서 소식을 가져와줘!
const response = await axios.get('https://api.magic.com/today-quote');
message.value = response.data.text;
} catch (error) {
message.value = '우체국에 문제가 생겼나 봐요! 😥';
}
};
// 성 문이 열리자마자 배달을 시켜요
onMounted(() => {
getMagicMessage();
});
</script>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들과 함께 ‘공공데이터포털’ 같은 곳을 구경해 보세요. 우리 동네 미세먼지 수치나 버스가 언제 오는지 같은 정보들이 모두 이런 API 창구를 통해 제공된다는 걸 알려주면, 아이들이 코딩으로 세상의 문제를 해결할 수 있다는 걸 깨닫게 됩니다. 직접 날씨 API를 연결해서 우리 집 스마트 패드에 ‘우산 챙기기’ 알림을 띄우는 상상을 해보세요!
마치며: 무한한 인터넷 세상으로!
이제 여러분의 마법 성은 인터넷이라는 거대한 세상과 연결되었습니다. 이제 못 가져올 정보가 없죠! 다음 시간에는 **’마법의 양념 치기(전역 설정과 인터셉터)’**라는 주제로, 배달부에게 똑같은 유니폼을 입히고 더 똑똑하게 관리하는 법을 배워볼게요.
