Vue.js + AI 마법 11강: 자고 일어나도 그대로! 마법사의 일기장 (Persistence)

안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 모든 방이 함께 쓰는 중앙 보물 창고(Pinia)를 만들었죠? 그런데 마법의 창고라 그런지, 컴퓨터를 껐다 켜면 보물들이 감쪽같이 사라지곤 해요. 오늘은 자고 일어나도, 새로고침을 해도 내 보물을 그대로 지켜주는 마법사의 일기장, Persistent State(상태 유지) 마법을 배워볼게요!

[IMAGE_1]

1. Persistence: 지워지지 않는 마법의 잉크

우리가 창고에 넣은 정보들을 브라우저의 특별한 공간인 로컬 스토리지(Local Storage)에 적어두는 것을 말해요.

  • 마법사의 일기장: 머릿속으로만 생각하면 자고 일어났을 때 잊어버릴 수 있지만, 일기장에 적어두면 언제든 다시 읽을 수 있죠? 코딩도 똑같아요!
  • 자동 복구: 컴퓨터를 다시 켜는 순간, Vue.js가 일기장을 빠르게 읽어서 창고를 예전 모습 그대로 채워준답니다.

2. 왜 이 마법이 필요한가요?

  • 정성껏 모은 점수: 열심히 공부해서 얻은 점수가 새로고침 한 번에 0점이 된다면 너무 슬프겠죠? 이 마법은 아이들의 노력을 소중히 보관해줘요.
  • 나만의 설정: 성의 배경색이나 AI 비서의 이름처럼 내가 공들여 꾸민 설정들을 매번 다시 바꿀 필요가 없게 도와줍니다.

3. 실전 마법: 창고에 자물쇠 채우기

Pinia 창고를 만들 때 `persist: true`라는 주문 하나만 추가하면 끝! 아주 간단하죠?

// 1. 창고에 '기억 고정' 주문 걸기 (store.js)
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({ 
    level: 1,
    items: ['초보 지팡이']
  }),
  // 이 부분이 바로 기억 고정 마법이에요!
  persist: true
});

// 2. 이제 브라우저를 껐다 켜보세요!
// level과 items가 그대로 남아있을 거예요. ✨

[IMAGE_2]

4. 스마트 라이프를 위한 가족 코딩 팁

아이들에게 ‘게임 저장(Save)’ 기능에 비유해 보세요. 소중한 추억을 사진첩에 담아두듯, 데이터도 저장소에 담아두어야 영원히 우리 곁에 남는다고요. 아이와 함께 만든 ‘에듀패드’에서 ‘칭찬 배지함’을 만들어 보세요. 아이가 획득한 배지가 며칠이 지나도 그대로 남아있는 것을 보며, 아이는 자신의 성취가 가상의 세계에서도 ‘실재’한다는 믿음과 책임감을 갖게 됩니다.

마치며: 시간이 흘러도 변하지 않는 성

이제 여러분의 성은 시간이 흘러도, 컴퓨터를 꺼도 여전히 그 자리에 그대로 있는 든든한 공간이 되었습니다! 정말 대단한 발전이에요. 다음 시간에는 **’마법의 우체국(API Fetching)’**이라는 주제로, 우리 성 밖의 세상에서 새로운 소식을 가져오는 법을 배워볼게요! 내일 아침 9시에 만나요!

관련 게시물