안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 성의 입구를 지키는 든든한 문지기 기사님(Navigation Guards)을 만났죠? 오늘은 우리 성을 여행하는 손님들을 위한 아주 세심한 서비스를 준비했어요. 긴 복도를 지나 다른 방으로 갔을 때, 화면이 맨 아래에 멈춰 있으면 당황스럽겠죠? 자동으로 화면을 맨 위로 올려주거나, 이전에 보던 위치로 되돌려주는 스크롤 동작(Scroll Behavior) 마법을 배워볼게요!
1. Scroll Behavior: 알아서 움직이는 마법 돋보기
Scroll Behavior는 우리가 책을 읽을 때 자동으로 다음 페이지의 맨 윗부분을 펼쳐주는 똑똑한 안경과 같아요.
보통 웹사이트는 긴 페이지를 보다가 다른 페이지로 이동해도 스크롤 위치가 그대로 남아있는 경우가 있어요. 하지만 우리 마법 성에서는 새로운 방에 들어가면 자동으로 화면을 맨 위로 ‘슝~’ 하고 올려주어 손님이 바로 내용을 읽을 수 있게 도와준답니다.
2. 왜 이 마법이 필요한가요?
- 친절한 안내: 새로운 방에 들어왔을 때 가장 중요한 제목부터 볼 수 있게 해줘요.
- 기억력 대장: ‘뒤로 가기’ 버튼을 눌러 이전 방으로 돌아갔을 때, 아까 읽고 있던 위치를 정확히 기억해서 보여줄 수도 있어요!
3. 실전 마법: 항상 맨 위에서 시작하기
방을 옮길 때마다 화면을 맨 위로 고정하는 주문을 지도(Router)에 적어볼까요?
// router/index.js
const router = createRouter({
history: createWebHistory(),
routes: [...],
// 바로 이 마법 주문이 스크롤을 조절해요!
scrollBehavior(to, from, savedPosition) {
// 만약 이전에 보던 위치가 있다면 그리로 가고,
// 처음 가는 방이라면 맨 위(left: 0, top: 0)로 보내줘요!
if (savedPosition) {
return savedPosition;
} else {
return { top: 0 };
}
}
});
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘친절한 배려’에 대해 이야기해 주세요. 친구가 우리 집에 놀러 왔을 때, 다음 놀잇감이 어디 있는지 미리 준비해두는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 수학 문제를 풀다가 정답 확인 페이지로 갔을 때, 화면이 엉뚱한 곳에 있지 않고 딱 제목부터 보이게 설정해 보세요. 이런 작은 디테일이 모여 우리 아이가 쓰는 앱을 더 명품으로 만든답니다.
마치며: 손님의 마음을 읽는 마법 성주
이제 여러분은 사용자의 움직임 하나하나를 배려하는 아주 섬세한 마법사가 되었습니다! 정말 대단해요. 다음 시간에는 **’마법 성의 보물 창고(Pinia 기초)’**라는 주제로, 성 안의 모든 방이 함께 나눠 쓰는 커다란 보물 상자를 만드는 법을 배워볼게요! 내일 아침 9시에 만나요!
