안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리 마법 성에 여러 개의 방이 생기다 보니, 아무나 들어가면 안 되는 ‘비밀의 방’이나 ‘보물 창고’도 생겼어요. 오늘은 특정 페이지에 들어가기 전, “잠깐! 당신은 들어올 자격이 있나요?”라고 물어보는 똑똑한 문지기 네비게이션 가드(Navigation Guards)를 배워볼게요!
1. 네비게이션 가드: 성문을 지키는 기사님
라우터가 우리 웹사이트의 ‘지도’라면, 네비게이션 가드는 그 지도를 따라 이동할 때마다 길목을 지키고 서 있는 기사님과 같아요.
사용자가 다른 방으로 이동하려고 할 때, 기사님이 가로막고 서서 “로그인을 했나요?” 혹은 “나이가 10살 이상인가요?”라고 확인한 뒤, 조건이 맞지 않으면 입구로 돌려보내거나 다른 방으로 안내해준답니다.
2. 문지기 기사님의 3가지 질문
- to: “어디로 가려고 하시나요?” (목적지 확인)
- from: “어디서 오셨나요?” (출발지 확인)
- next(): “통과하셔도 좋습니다!” (이동 허락)
3. 실전 마법: 비밀번호를 아는 사람만 입장하기
비밀의 방에 들어가기 전, 로그인이 되어 있는지 확인하는 문지기 코드를 살펴볼까요?
// 마법 지도(Router)에 문지기 세우기
router.beforeEach((to, from, next) => {
const isLoggedIn = false; // 지금은 로그인을 안 했다고 해볼게요
// 만약 가려는 곳이 '비밀의 방'인데 로그인을 안 했다면?
if (to.path === '/secret' && !isLoggedIn) {
alert('아직 견습 마법사군요! 성 입구로 돌아가세요.');
next('/'); // 입구로 쫓아내기
} else {
next(); // 통과!
}
});
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘책임감’과 ‘약속’에 대해 이야기해 주세요. 웹사이트에서도 정해진 규칙을 지켜야 안전하게 이용할 수 있다는 점을 알려주는 거예요. 가족 공용 태블릿에서 ‘아이들 전용 페이지’와 ‘부모님용 설정 페이지’를 나누어 관리하는 원리가 바로 이 문지기 마법이라는 것을 설명해 주시면 좋습니다.
마치며: 더 안전해진 우리 가족의 마법 성
이제 우리 웹사이트는 빠를 뿐만 아니라 아주 안전하기까지 합니다. 아무나 소중한 정보를 볼 수 없게 지키는 법을 배웠으니까요! 다음 시간에는 **’마법의 주문 자동 완성(V-model 심화)’**이라는 주제로, 입력창을 더 똑똑하게 만드는 고급 기술을 배워볼게요.
