안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 성의 모든 방이 함께 쓰는 중앙 창고 피니아(Pinia)를 만들었죠? 그런데 창고에 보물들이 너무 많아지면 일일이 세어보기 힘들잖아요. 오늘은 창고가 스스로 숫자를 계산하고, 보물을 예쁘게 정리까지 해주는 마법의 자동 장치, Getters(게터)와 Actions(액션)를 소개합니다!
1. Getters: 창고의 똑똑한 계산기
게터(Getters)는 창고 안에 있는 물건들을 보고 새로운 정보를 알려주는 ‘자동 계산기’와 같아요.
- 자동 합계: “지금 사과랑 포도가 총 몇 개지?”라고 물어보지 않아도, 게터가 항상 합계를 계산해서 보여줘요.
- 필터링 마법: “상한 과일 말고 싱싱한 것만 보여줘!”라고 하면 게터가 순식간에 골라내 준답니다.
2. Actions: 창고의 유능한 일꾼
액션(Actions)은 창고에서 복잡한 일을 대신 해주는 ‘로봇 일꾼’이에요.
- 복잡한 심부름: 단순히 물건을 넣는 게 아니라, “가게에 가서 우유를 사온 뒤 유통기한을 확인하고 냉장고에 넣어줘” 같은 여러 단계의 일을 척척 해내요.
- 기다림의 미학: 인터넷 저 멀리서 데이터를 가져오는 것처럼 시간이 좀 걸리는 일도 액션 일꾼에게 맡기면 끝날 때까지 잘 기다렸다가 창고를 정리해준답니다.
3. 실전 마법: 별 10개를 큰 별로 바꾸기
창고(Store)에 계산기와 일꾼을 배치하는 코드를 짜볼까요?
// 1. 창고(store/stars.js) 설정
export const useStarStore = defineStore('stars', () => {
const smallStars = ref(0);
// [Getter] 작은 별 10개당 큰 별이 몇 개인지 계산해주는 계산기
const bigStars = computed(() => Math.floor(smallStars.value / 10));
// [Action] 별을 얻었을 때 하는 복잡한 일들을 처리하는 일꾼
async function collectStar() {
// 1. 효과음을 재생하고
console.log('반짝! 소리 재생 ✨');
// 2. 서버에 별 얻었다고 보고하고
// 3. 창고의 숫자를 올려요!
smallStars.value++;
}
return { smallStars, bigStars, collectStar };
});
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘자동 동전 분류기’나 ‘도와주는 로봇’에 비유해 보세요. 내가 일일이 분류하지 않아도 기계가 척척 해주는 것처럼 코딩도 그렇게 만들 수 있다고요. 아이와 함께 만든 ‘에듀패드’에서 ‘오늘 푼 문제 수’를 게터로 계산해서 ‘오늘의 열공 지수’를 점수로 보여줘 보세요. 내가 한 행동이 자동으로 멋진 결과(데이터 가공)로 변하는 걸 보며, 아이는 효율적인 시스템 설계의 즐거움을 배우게 됩니다.
마치며: 효율적인 성의 설계자
이제 여러분은 창고를 단순히 쓰는 것을 넘어, 스스로 일하게 만드는 아주 똑똑한 설계자가 되었습니다! 정말 대단해요. 다음 시간에는 **’마법의 시간 여행(Pinia Plugin & Persistence)’**이라는 주제로, 컴퓨터를 껐다 켜도 창고의 보물이 사라지지 않게 꽉 잡아두는 비법을 배워볼게요! 내일 아침 9시에 만나요!
