안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 성문을 지키는 든든한 파수꾼(Navigation Guards) 마법을 배워 성을 안전하게 보호했죠? 그런데 우리 성에 놀러 오는 손님이 매일매일 늘어나거나, 새로운 공부방이 계속 생겨난다면 어떡해야 할까요? 그때마다 마법 지도를 새로 그리는 건 너무 힘든 일이에요. 오늘은 필요할 때 즉석에서 주소와 방을 만들어내는 마법의 비밀 문, Dynamic Routing(동적 라우팅) 마법을 소개합니다!
[IMAGE_1]
1. Dynamic Routing: 주소창에 숨겨진 요술 주머니
동적 라우팅은 주소창에 고정된 이름 대신, 변하는 숫자가 글자를 넣어서 하나의 지도로 수많은 방을 연결하는 마법이에요.
- 콜론(:)의 비밀: 지도에 주소를 적을 때
/study/:subject처럼 이름 앞에 콜론(:)을 붙여두면, 이 자리는 무엇이든 들어갈 수 있는 요술 주머니가 됩니다. - 즉석 방 생성: 친구가 주소창에
/study/math라고 치면 수학 방이,/study/english라고 치면 영어 방이 그 자리에서 펑! 하고 만들어져요.
2. 왜 이 마법이 필요한가요?
- 지도 다이어트: 방이 100개라고 해서 주소를 100개나 만들 필요가 없어요. 딱 하나의 주문서만 있으면 100개, 1000개의 방도 주소창 하나로 다 안내할 수 있답니다.
- 손님 맞춤형 방: 주소창에 적힌 단어(Params)를 AI 비서가 돋보기로 읽어서, 수학 방에는 칠판을, 음악 방에는 피아노를 알아서 척척 배치해 줘요.
3. 실전 마법: 주소를 읽어내는 $route.params 주문
주소창에 들어온 단어를 알아채고 방의 모습을 바꾸는 useRoute 마법을 부려볼까요?
<!-- StudyRoom.vue (변신하는 만능 공부방) -->
<script setup>
import { useRoute } from 'vue-router';
// 1. 현재 주소창을 살펴보는 마법 돋보기를 가져와요
const route = useRoute();
// 2. 주소창의 요술 주머니(:subject)에 무엇이 들어있는지 꺼내봐요!
const currentSubject = route.params.subject;
</script>
<template>
<div class="magic-classroom">
<h2>🏫 만능 마법 교실</h2>
<!-- 3. 주소창에 친 이름에 따라 교실 간판이 저절로 바뀌어요! -->
<p>지금은 <strong>{{ currentSubject }}</strong> 공부를 하는 시간입니다! ✨</p>
</div>
</template>[IMAGE_2]
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘호텔 방 번호’에 비유해 보세요. 호텔 건물을 지을 때 101호, 102호 방을 다 다르게 짓는 게 아니라, 똑같은 구조의 방을 만들어두고 문 앞에 방 번호판만 다르게 붙이는 것과 같다고요. 아이와 함께 성장하는 ‘에듀패드’에 이 마법을 적용해 보세요. /quiz/:level 구조를 만들어서 주소창에 1을 넣으면 1학년 문제, 2를 넣으면 2학년 문제가 나오게 짜보는 거죠. 아이는 코드 몇 줄로 수많은 페이지가 저절로 만들어지는 복사기 같은 효율성을 경험하며 거시적인 아키텍처 눈을 뜨게 됩니다.
마치며: 무한히 확장되는 마법 왕국
이제 여러분의 성은 방이 아무리 많아져도 지도가 복잡해지지 않는, 무한 확장이 가능한 지혜로운 영토가 되었습니다! 라우터의 심화 마법까지 배우다니 정말 대단합니다. 내일 이 시간에는 **’라우터 마법의 데이터 메신저(Query String & Navigation)’**라는 주제로, 주소창 뒤에 비밀 쪽지(?page=2&sort=easy)를 붙여서 방에 들어갈 때 더 세부적인 옵션을 전달하는 고급 마법을 배워볼게요! 내일 아침 9시에 만나요!