안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 마법 도구들을 주머니에 쏙 넣어두는 컴포저블(Composables)을 배웠죠? 이제 우리 성에는 멋진 방들이 아주 많아졌어요. 하지만 방들이 어디에 있는지 모르면 길을 잃기 쉽겠죠? 오늘은 여러 페이지를 연결해주는 마법 성의 전체 지도, Vue Router(뷰 라우터)를 소개합니다!
1. Vue Router: 방과 방을 잇는 복도
Vue Router는 웹사이트라는 큰 성의 ‘복도’와 ‘이정표’ 역할을 해요. 주소창에 `/study`라고 치면 공부방으로 가고, `/game`이라고 치면 게임방으로 안내해주는 아주 똑똑한 지도랍니다.
보통 웹사이트는 페이지를 바꿀 때마다 화면이 깜빡거리며 새로고침되지만, 우리 뷰 라우터 마법을 쓰면 깜빡임 없이 부드럽게 방만 슥~ 하고 바뀌어서 훨씬 기분이 좋아져요!
2. 지도를 보는 법: Route와 Link
- Route (길): “이 주소로 오면 이 방을 보여줘!”라고 미리 약속해둔 지도 정보예요.
- RouterLink (이동 버튼): 클릭하면 다른 방으로 순간 이동시켜주는 마법 문이에요.
- RouterView (나타나는 곳): 지금 우리가 들어가 있는 방의 모습이 실제로 보이는 거울 같은 곳이에요.
3. 실전 마법: 우리 성의 지도 그리기
간단한 지도를 만들고 방을 이동하는 코드를 짜볼까요?
<!-- 1. 지도를 만들어요 (router.js) -->
const routes = [
{ path: '/', component: HomeRoom },
{ path: '/study', component: StudyRoom }
]
<!-- 2. 성의 메인 입구 (App.vue) -->
<template>
<nav>
<!-- 마법의 문을 만들어요 -->
<router-link to="/">거실로 가기</router-link> |
<router-link to="/study">공부방으로 가기</router-link>
</nav>
<!-- 여기에 선택한 방의 모습이 짠! 하고 나타나요 -->
<router-view></router-view>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘팝업북’이나 ‘종이 인형 집’에 비유해 보세요. 배경은 그대로인데 페이지만 넘기면 새로운 방이 나타나는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 메인 화면, 국어 공부방, 수학 공부방을 이 라우터 지도로 연결해 보세요. 아이가 직접 메뉴를 누르며 방을 옮겨 다니는 과정을 보며, 웹사이트가 하나의 커다란 성처럼 연결되어 있다는 구조를 이해하게 됩니다.
마치며: 성 전체를 다스리는 마법사가 된 여러분
이제 여러분은 단일 페이지를 넘어 거대한 웹사이트 성을 자유자재로 설계할 수 있게 되었습니다! 다음 시간에는 **’지도의 문지기(Navigation Guards)’**라는 주제로, 공부를 다 마쳐야만 게임방에 들어갈 수 있게 막아주는 똑똑한 문지기 마법을 배워볼게요! 내일 아침 9시에 만나요!
