안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지금까지 우리는 성 안의 방들을 옮겨 다닐 때 기본적인 지도를 사용했어요. 하지만 성이 커지면서 ‘비밀의 방 안의 또 다른 방’이 생기기도 하고, 길을 잃어버릴 때도 있죠? 오늘은 어떤 복잡한 길도 한눈에 찾아주는 업그레이드 마법 지도, Vue Router(뷰 라우터) 심화를 배워볼게요!
1. 중첩된 방 (Nested Routes): 방 안의 작은 방
우리가 ‘내 방’에 들어갔을 때, 그 안에 ‘공부 책상’ 영역과 ‘침대’ 영역이 따로 나뉘어 있는 것과 같아요. 전체 주소는 /my-room이지만, 그 안에서 /my-room/desk나 /my-room/bed로 세밀하게 이동할 수 있는 마법이죠.
이 마법을 쓰면 웹사이트의 큰 틀은 그대로 두면서 알맹이만 쏙쏙 바꿔 보여줄 수 있어 아주 효율적이랍니다.
2. 마법의 쉼표: 동적 경로와 매개변수
수천 명의 마법사에게 각각 다른 방을 만들어줄 순 없겠죠? /user/:id라는 마법 주소를 쓰면, 들어오는 마법사의 이름표(id)에 따라 자동으로 그 사람의 방을 보여줄 수 있어요. 하나의 지도 파일로 수천 가지 길을 관리하는 고수의 비법이랍니다.
3. 실전 마법: 우리 집 캐릭터 전용 방 만들기
캐릭터의 이름을 주소에 넣어 각자의 방으로 안내하는 코드를 짜볼까요?
// 1. 마법 지도 설정 (router/index.js)
const routes = [
{
path: '/character/:name', // :name이 이름표 역할을 해요
component: CharacterRoom,
children: [ // 방 안의 작은 방들
{ path: 'profile', component: CharProfile },
{ path: 'gallery', component: CharGallery }
]
}
];
// 2. 방 안에서 이름표 확인하기 (CharacterRoom.vue)
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
// 주소가 /character/jinu 라면 name은 'jinu'가 돼요!
const playerName = route.params.name;
</script>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘주소’의 개념을 우체국 주소에 비유해 보세요. ‘서울특별시(메인 주소) – 강남구(상세 주소) – OO아파트(방 주소)’처럼 체계적으로 나뉘어 있어야 우편물이 정확히 배달되는 것과 같다고요. 아이와 함께 우리 집 지도를 그려보고 각 구역마다 어떤 주소를 붙여줄지(예: /living-room/sofa) 정해보는 놀이를 하면 논리적인 구조를 짜는 힘이 쑥쑥 자라납니다.
마치며: 어떤 미로도 두렵지 않은 마법사
이제 여러분은 웹사이트라는 거대한 미로를 설계하고 관리하는 최고 지도 제작자가 되었습니다! 정말 대단해요. 다음 시간에는 **’마법의 공용 창고(Pinia 심화)’**라는 주제로, 우리 성의 모든 마법사가 공통으로 쓰는 보물들을 더 안전하게 보관하는 법을 배워볼게요! 내일 아침 9시에 만나요!
