안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 페이지를 옮겨 다닐 때 위치를 잡아주는 스크롤 마법(Scroll Behavior)을 배웠죠? 이제 성이 아주 커졌어요! 그런데 공부방에서 얻은 ‘칭찬 스티커’를 거실에서도 보여주고 싶고, 게임방에서도 쓰고 싶다면 어떻게 해야 할까요? 방마다 일일이 배달하기 힘들 때 사용하는 모두의 보물 창고, Pinia(피니아)를 소개합니다!
1. Pinia: 성 한가운데 있는 커다란 바구니
Pinia는 우리 집 거실에 있는 ‘공용 간식 바구니’와 같아요. 누구든 배가 고프면 거실로 나와서 사탕을 꺼내 먹을 수 있고, 새로 사 온 초콜릿을 바구니에 채워 넣을 수도 있죠.
코딩에서도 마찬가지예요. ‘사용자 이름’이나 ‘내 점수’ 같은 중요한 보물들을 이 창고에 넣어두면, 공부방이든 상점이든 상관없이 어떤 방에서든 바로 꺼내서 보여줄 수 있답니다. 방끼리 복잡하게 선물을 주고받을 필요가 없어서 성 관리가 아주 쉬워져요!
2. 보물 창고의 3가지 마법 도구
- State (보물): 창고에 들어있는 실제 물건들이에요. (예: 내 점수 = 100점)
- Getters (돋보기): 보물을 특별하게 계산해서 보여줘요. (예: 점수가 100점이면 ‘천재’라고 보여주기)
- Actions (심부름): 보물을 바꾸는 행동이에요. (예: 점수를 10점 더하기)
3. 실전 마법: 점수 보관 창고 만들기
어디서든 내 점수를 확인하고 올릴 수 있는 창고 코드를 짜볼까요?
// stores/counter.js (보물 창고 만들기)
import { defineStore } from 'pinia';
export const useScoreStore = defineStore('score', {
// 1. 보물 (데이터)
state: () => ({ score: 0 }),
// 2. 심부름 (함수)
actions: {
addScore() {
this.score += 10;
}
}
});
<!-- 어느 방에서든 꺼내 쓰기 (App.vue) -->
<script setup>
import { useScoreStore } from './stores/counter';
const store = useScoreStore();
</script>
<template>
<p>현재 내 점수: {{ store.score }}점</p>
<button @click="store.addScore">점수 올리기!</button>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘은행 계좌’나 ‘가족 공용 통장’에 비유해 보세요. 내가 용돈을 넣으면 엄마도 볼 수 있고, 나중에 장난감을 살 때 어디서든 꺼내 쓸 수 있는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 아이의 ‘오늘의 학습 목표’를 Pinia 창고에 넣어보세요. 수학 방을 가든 영어 방을 가든 아이가 세운 목표가 항상 따라다니게 하면, 아이가 스스로 계획을 지키려는 책임감을 배우게 됩니다.
마치며: 성 전체의 정보를 다스리는 마스터
이제 여러분은 흩어져 있던 정보를 한곳에 모아 관리하는 진정한 성주 마법사가 되었습니다! 정말 대단해요. 다음 시간에는 **’창고의 내용을 기억하는 마법(Pinia Persist)’**이라는 주제로, 컴퓨터를 껐다 켜도 보물이 사라지지 않게 꽉 붙잡아두는 법을 배워볼게요! 내일 아침 9시에 만나요!
