안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 성의 이곳저곳을 연결하는 마법 지도(Vue Router)를 배웠죠? 그런데 가끔은 아무나 들어가면 안 되는 방이 있어요. 예를 들어, 숙제를 다 안 했는데 게임방에 들어가면 안 되겠죠? 오늘은 길목을 지키고 서서 허락된 사람만 들여보내 주는 마법 성의 문지기, Navigation Guards(네비게이션 가드)를 소개합니다!
1. Navigation Guards: 똑똑한 문지기 기사님
네비게이션 가드는 각 방의 문 앞에 서 있는 기사님과 같아요. 여러분이 어떤 방으로 가려고 할 때, 기사님이 앞을 막아서며 물어보는 거죠. “잠깐! 로그인은 하셨나요?” 혹은 “오늘 공부를 다 마쳤나요?”라고요.
기사님의 질문에 통과하면 문을 열어주고, 통과하지 못하면 원래 있던 방으로 돌려보내거나 로그인 방으로 안내해준답니다. 우리 성의 안전과 규칙을 지켜주는 아주 고마운 분들이에요!
2. 문지기 기사님의 3가지 대답
- 통과! (next()): 아무 문제 없어요. 어서 들어가세요!
- 안 돼! (next(false)): 지금은 들어갈 수 없어요. 그대로 멈추세요!
- 다른 곳으로 가! (next(‘/login’)): 여기 말고 이 방으로 먼저 가보세요!
3. 실전 마법: 게임방 지키기
공부 완료 버튼을 누르지 않으면 게임방에 못 들어가게 막는 코드를 짜볼까요?
// router/index.js
router.beforeEach((to, from, next) => {
// 1. 가려는 곳(to)이 '게임방'인지 확인해요
if (to.path === '/game') {
const isStudyDone = false; // 실제로는 공부했는지 확인하는 마법이 들어가요!
if (isStudyDone) {
next(); // 공부했으면 통과!
} else {
alert('공부를 먼저 마쳐야 게임방 문이 열려요! 📖');
next('/study'); // 공부방으로 보내버려요!
}
} else {
next(); // 다른 방은 자유롭게 다녀도 돼요!
}
});
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘약속’과 ‘보상’에 대해 이야기해 주세요. 해야 할 일을 먼저 끝내야 즐거운 일을 할 수 있다는 생활 습관을 코딩으로 직접 구현해 보는 거죠. 아이와 함께 만든 ‘에듀패드’에서 이 문지기 마법을 써보세요. 아이가 스스로 “아빠, 나 오늘 수학 문제 다 풀었으니까 이제 게임방 문지기 기사님이 통과시켜 주겠지?”라고 말하며 성취감을 느끼게 될 거예요.
마치며: 성의 질서를 세우는 마스터 마법사
이제 여러분은 단순히 방을 만드는 것을 넘어, 성의 규칙을 정하고 관리하는 멋진 성주가 되었습니다! 정말 대단해요. 다음 시간에는 **’지도의 부드러운 변신(Scroll Behavior)’**이라는 주제로, 방을 옮길 때마다 화면의 위치를 아주 편안하게 맞춰주는 세밀한 마법을 배워볼게요! 내일 아침 9시에 만나요!
