Vue.js 심화 2탄 41강: 새로고침해도 안 사라져요! 영원한 보물 창고 (Pinia Persist)

안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 성의 모든 방에서 함께 쓰는 공용 보물 창고 ‘Pinia’를 배웠죠? 그런데 한 가지 고민이 생겼어요. 열심히 점수를 올렸는데, 브라우저를 새로고침하거나 컴퓨터를 껐다 켜면 점수가 다시 0점이 되어버리거든요. 오늘은 이 보물들을 영원히 간직하게 해주는 기억의 자물쇠, Pinia Persist(피니아 퍼시스트)를 배워볼게요!

Vue.js 심화 2탄 41강: 새로고침해도 안 사라져요! 영원한 보물 창고 (Pinia Persist)

1. Persist: 브라우저 금고에 저장하기

Persist는 우리 창고에 ‘금고’를 설치하는 것과 같아요. 보통 코딩에서 만드는 변수들은 컴퓨터 전원을 끄면 기억이 사라지지만, 이 마법을 쓰면 브라우저의 ‘로컬 스토리지’라는 비밀 서랍에 데이터를 쏙 저장해둔답니다.

덕분에 내일 다시 웹사이트에 접속해도, 아까 모아둔 칭찬 스티커와 점수가 그대로 남아있게 되는 거죠! 정말 든든하죠?

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

  • 안전한 보관: 실수로 창을 닫아도 내가 하던 공부 기록이 사라지지 않아요.
  • 편리한 로그인: 매번 이름을 입력할 필요 없이, 한 번 저장해두면 계속 기억해줘요.

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

기존 보물 창고에 persist: true라는 짧은 주문만 추가하면 끝이랍니다!

// stores/counter.js
import { defineStore } from 'pinia';

export const useScoreStore = defineStore('score', {
  state: () => ({ 
    score: 0,
    level: 1 
  }),
  actions: {
    addScore() {
      this.score += 10;
    }
  },
  // 바로 이 주문이 보물을 금고에 저장해줘요!
  persist: true
});

Vue.js 심화 2탄 41강: 새로고침해도 안 사라져요! 영원한 보물 창고 (Pinia Persist)

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

아이들에게 ‘일기장’이나 ‘저금통’에 비유해 보세요. 머릿속으로만 생각하면 잊어버리지만, 종이에 적어두거나 저금통에 넣으면 다음 날에도 그대로 있는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 아이가 획득한 ‘마법 배지’들을 이 금고 마법으로 저장해 보세요. 며칠 뒤에 들어와도 내가 모은 배지가 그대로 반짝이는 걸 보며 아이는 성취감과 함께 데이터의 소중함을 배우게 됩니다.

마치며: 시간을 이기는 마법사가 된 여러분

이제 여러분은 시간이 지나도 변치 않는 튼튼한 마법 성을 갖게 되었습니다! 정말 축하드려요. 다음 시간에는 **’마법의 안테나(Fetching Data)’**라는 주제로, 우리 성 밖의 세상에서 새로운 소식과 데이터를 가져오는 법을 배워볼게요! 내일 아침 9시에 만나요!