안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 성의 방들을 연결하는 마법 지도(Vue Router)를 만들었죠? 그런데 우리 성에 공부하는 친구가 100명이라면, 방을 100개나 따로 만들어야 할까요? 그건 너무 힘들겠죠! 오늘은 주소창에 누구의 이름을 쓰느냐에 따라 방이 자동으로 변신하는 마법의 주소 암호, Dynamic Routing(동적 라우팅)을 소개합니다!
[IMAGE_1]
1. Dynamic Routing: 하나로 다 통하는 만능 방
동적 라우팅은 문 앞에 끼워 넣는 ‘가변 이름표’와 같아요.
- 비밀 암호 (:id): 지도에 주소를 적을 때
/user/:name이라고 적으면,:name부분이 비밀 암호 칸이 돼요. - 자동 변신: 주소창에
/user/sarah라고 치면 세라의 방이 되고,/user/kevin이라고 치면 케빈의 방으로 화면 내용이 쏙 바뀐답니다.
2. 왜 이 마법이 필요한가요?
- 무한한 확장: 방을 하나만 설계해두면, 수천 명의 친구들에게 각각 자기 이름이 적힌 특별한 방을 보여줄 수 있어요.
- 똑똑한 연결: “내 방 주소는 이거야!”라고 친구에게 링크를 보내기가 아주 쉬워진답니다.
3. 실전 마법: 주소에서 이름 가져오기
주소창에 적힌 암호를 읽어서 화면에 보여주는 코드를 짜볼까요?
// 1. 지도(router.js)에 암호 칸 만들기
const routes = [
{
path: '/student/:id', // ':id'가 바로 변하는 암호 칸이에요!
component: StudentDetail
}
];
// 2. 방 안에서 암호 읽기 (StudentDetail.vue)
<script setup lang="ts">
import { useRoute } from 'vue-router';
const route = useRoute();
// 주소창의 :id 자리에 써진 글자를 가져와요!
const studentId = route.params.id;
</script>
<template>
<div class="student-room">
<h1>🌟 {{ studentId }} 학생의 공부방</h1>
<p>오늘도 열공해봐요!</p>
</div>
</template>[IMAGE_2]
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘사물함 이름표’에 비유해 보세요. 똑같이 생긴 사물함이지만 이름표만 갈아 끼우면 주인이 바뀌는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 수학 문제 번호에 따라 주소를 /quiz/1, /quiz/2처럼 만들어보세요. 주소창의 숫자만 바꿔도 다음 문제로 슝슝 넘어가는 걸 보며 아이는 데이터가 주소를 통해 어떻게 전달되는지 그 원리를 자연스럽게 깨닫게 됩니다.
마치며: 무한한 방을 다스리는 마법사
이제 여러분은 방 하나로 수천 개의 방을 만들어내는 효율적인 대마법사가 되었습니다! 정말 대단해요. 내일 시간에는 **’지도의 경비원(Navigation Guards)’**이라는 주제로, 허락받지 않은 사람은 비밀의 방에 들어오지 못하게 막는 든든한 경비 마법을 배워볼게요! 내일 아침 9시에 만나요!
