안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 주소창 뒤에 매단 비밀 쪽지(Query String)로 방의 세부 스타일을 바꾸는 마법을 배웠죠? 오늘은 우리가 늘 보던 주소창의 형태를 바꾸고, 브라우저의 과거와 미래를 자유롭게 넘나드는 주소창의 시간 여행, History vs Hash Mode 마법을 소개합니다!
[IMAGE_1]
1. 두 가지 시간 여행 모드의 비밀
Vue Router 지도를 처음 만들 때, 주소창이 작동하는 방식을 크게 두 가지 모드 중 하나로 고를 수 있어요.
- 해시 모드 (Hash Mode): 주소창 중간에 못생긴 샵 기호(
#)가 붙는 모방 마법이에요. 예전 방식이지만 아주 안전해서, 샵 기호 뒷부분은 서버 우체국에 보내지 않고 브라우저 안에서만 비밀스럽게 방을 바꿀 때 써요. 주소창 형태:magic.com/#/study - 히스토리 모드 (History Mode): 샵 기호 없이 우리가 아는 진짜 주소처럼 깔끔하게 보여주는 현대 마법이에요. 브라우저가 다녀간 발자국(History)을 똑똑하게 이용하는 방식이랍니다. 주소창 형태:
magic.com/study
2. 왜 이 마법이 필요한가요?
- 깔끔한 성벽 (URL 디자인): 히스토리 모드를 쓰면 주소창에 샵(
#) 기호가 사라져서, 우리 성의 주소가 훨씬 예쁘고 전문적인 사이트처럼 보여요. - 자유로운 과거 여행: 사용자가 브라우저의 ‘뒤로 가기(←)’나 ‘앞으로 가기(→)’ 버튼을 누를 때, 뷰 라우터가 그 발자국을 기억하고 있다가 새로고침 없이 부드럽게 이전 방으로 순간이동 시켜줍니다.
3. 실전 마법: 시간 여행 모드 설정하기
Vue Router 지도를 펼칠 때 어떤 마법 모드를 쓸지 정하는 주문은 아주 간단해요.
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
import HomeView from './HomeView.vue';
const router = createRouter({
// 1. 깔끔한 현대 마법(History Mode)을 쓰려면 createWebHistory()를 선택해요!
// 만약 샵 기호가 있는 안전 모드를 쓰고 싶다면 createWebHashHistory()를 씁니다.
history: createWebHistory(),
routes: [
{ path: '/', component: HomeView }
]
});[IMAGE_2]
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘타임머신 발자국’에 비유해 보세요. 우리가 걸어온 길을 모래밭에 발자국(History)으로 남겨두면, 길을 잃었을 때 뒤로 한 걸음씩 돌아가기 편한 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 여러 퀴즈방을 돌아다니다가 브라우저의 뒤로 가기 버튼을 눌러보게 하세요. 새로고침 마법(새로고침 뱅글뱅글 로딩) 없이 휙휙 이전 화면으로 돌아가는 모습을 보며, 아이는 브라우저 내부의 ‘기록 저장소’와 웹 앱의 연결 고리를 논리적으로 깨닫게 됩니다.
마치며: 브라우저의 흐름을 다스리는 시간 마법사
이제 여러분은 주소창을 예쁘게 꾸밀 뿐만 아니라 사용자의 발자국까지 완벽하게 제어하는 시간의 마스터가 되었습니다! 정말 훌륭한 발전입니다. 내일 이 시간에는 **’라우터 마법의 3가지 문지기 훅 (Route Lifecycle Hooks)’**이라는 주제로, 어떤 방에 들어오고 나갈 때 펑! 하고 터지는 특수 마법 효과를 주는 생명주기 훅의 마지막 심화 비법을 배워볼게요! 내일 아침 9시에 만나요!