안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 복잡한 길도 찾아주는 마법 지도를 배웠죠? 그런데 성이 아주 커지다 보니, 1번 방에서 얻은 금화나 10번 방에서 얻은 마법 열쇠를 다른 방에서도 쓰고 싶을 때가 생겼어요. 오늘은 우리 성의 모든 방에서 함께 쓸 수 있는 마법 공용 창고, Pinia(피니아)를 배워볼게요!
1. Pinia: 모든 방이 연결된 마법 금고
Pinia는 우리 웹사이트의 한가운데에 있는 커다란 금고예요. 예전에는 데이터(보물)를 옆 방에 전달하려면 복도를 지나 직접 배달해야 했지만, 이제는 금고에 보물을 넣어두기만 하면 돼요.
그러면 거실에 있든, 주방에 있든, 비밀의 방에 있든 누구나 금고를 열어 필요한 보물을 바로 꺼내 쓸 수 있답니다. 정말 편리하죠?
2. 창고의 세 가지 구성 요소
- State (보물들): 창고에 들어있는 실제 물건들(사용자 이름, 현재 점수 등)이에요.
- Getters (돋보기): 보물을 꺼내기 전에 미리 확인하는 거예요. “금화가 10개 이상인가?”처럼요.
- Actions (일꾼): 보물을 넣거나 빼는 구체적인 행동을 하는 일꾼들이에요.
3. 실전 마법: 우리 가족 공용 점수판 만들기
모든 페이지에서 똑같이 보이는 점수판을 만들어 볼까요?
// 1. 공용 창고 열기 (stores/counter.js)
import { defineStore } from 'pinia';
export const useGameStore = defineStore('game', {
state: () => ({ score: 0 }),
actions: {
addScore() {
this.score++; // 점수를 1점 올려요!
}
}
});
// 2. 방 안에서 창고 이용하기 (GameView.vue)
<script setup>
import { useGameStore } from './stores/counter';
const gameStore = useGameStore();
</script>
<template>
<div>
<p>지금 우리 성의 공용 점수: {{ gameStore.score }}점</p>
<button @click="gameStore.addScore">함께 점수 올리기!</button>
</div>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘공유’의 가치를 알려주세요. 거실에 있는 TV나 냉장고처럼, 가족 모두가 함께 쓰는 물건은 한 곳에 두어야 모두가 편하게 쓸 수 있다는 걸요. 아이와 함께 ‘우리 가족 행복 저장소’를 만들어 보세요. 엄마가 행복 포인트를 올리면 아이의 화면에서도 실시간으로 점수가 올라가는 걸 보며, 코딩이 사람과 사람을 연결해준다는 것을 직접 느낄 수 있습니다.
마치며: 협동하는 마법사가 된 여러분
이제 여러분은 혼자만 쓰는 마법을 넘어, 성 전체가 소통하고 데이터를 나누는 거대한 시스템을 관리하게 되었습니다! 다음 시간에는 **’마법의 방패(Navigation Guards)’**라는 주제로, 허락된 사람만 비밀의 방에 들어오게 하는 보안 마법을 배워볼게요. 내일 아침 9시에 만나요!
