안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 우리는 Composition API로 마법 지팡이를 강화하는 법을 배웠죠? 오늘은 내가 만든 멋진 마법 주문 하나를 다른 성이나 다른 방에서도 똑같이 쓸 수 있게 빌려주는 마법 도구 상자, Composables(컴포저블)을 배워볼게요!
1. Composables: 언제 어디서든 꺼내는 마법 도구
여러분, 아주 맛있는 라면을 끓이는 비법 양념을 만들었다고 생각해보세요. 그 양념만 있으면 캠핑장에 가서도, 친구네 집에서도 똑같이 맛있는 라면을 끓일 수 있겠죠?
코딩에서도 마찬가지예요. ‘숫자를 세는 마법’이나 ‘마우스 위치를 찾는 마법’을 한 번 잘 만들어두면, 다른 웹사이트를 만들 때도 복사해서 붙여넣을 필요 없이 양념통(Composable)만 쏙 가져와서 바로 쓸 수 있답니다.
2. 왜 빌려 쓰는 마법이 좋을까요?
- 똑똑한 재사용: 같은 코드를 두 번 쓸 필요가 없어서 웹사이트가 가벼워져요.
- 깔끔한 정리: 복잡한 마법 주문들을 별도의 비밀 상자에 보관하니까 메인 지팡이가 훨씬 가벼워진답니다.
- 쉬운 공유: 친구 마법사에게 내 마법 양념통을 선물로 줄 수도 있어요!
3. 실전 마법: 마우스 좌표를 쫓는 마법 눈
마우스가 어디 있는지 알려주는 기능을 상자에 담아 빌려 쓰는 법을 살펴볼까요?
// 1. 비밀 상자(useMouse.js)에 마법을 담아요
function useMouse() {
const x = ref(0);
const y = ref(0);
// 마우스가 움직일 때마다 좌표를 바꿔주는 마법
window.addEventListener('mousemove', (event) => {
x.value = event.pageX;
y.value = event.pageY;
});
return { x, y };
}
// 2. 이제 우리 성(App.vue)에서 상자를 열어요!
setup() {
const { x, y } = useMouse(); // 상자에서 x와 y 마법을 꺼내요
return { x, y };
}
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 이 개념을 ‘공유 주방’이나 ‘도서관’에 비유해보세요. 물건을 각자 다 가지고 있을 필요 없이, 잘 만들어진 것을 함께 나누어 쓰면 모두가 행복해질 수 있다는 ‘나눔의 가치’를 코딩을 통해 배울 수 있습니다. 가족이 함께 쓰는 공용 코드를 하나씩 늘려가는 것도 즐거운 프로젝트가 될 거예요.
마치며: 나누며 성장하는 마법사
혼자서 모든 마법을 부리는 것보다, 잘 만들어진 도구를 나누고 활용하는 법을 아는 것이 진정한 고수 마법사의 비결입니다. 다음 시간에는 **’마법의 속도 올리기(성능 최적화)’**라는 주제로, 우리 웹사이트를 번개처럼 빠르게 만드는 법을 배워볼게요.
