p169.md

메모 애플리케이션 내의 예제코드 누락

p.168 내의 [코드 5-8] 내의 코드 수정

<!-- src/components/MemoApp.vue -->
<template>
  <div class="memo-app">
    <memo-form />
    <memo />
  </div>
</template>
<script>
  import MemoForm from './MemoForm';
  import Memo from './Memo';
  export default {
    name: 'MemoApp',
    data () {
      return {
        memos: [],
      };
    },
    created () {
      // 1. 만약 기존에 추가된 localStorage에 데이터가 있다면 created 훅에서
      // localStorage의 데이터를 컴포넌트 내의 memos 데이터에 넣어주고, 그렇지 않다면 그대로
      // 빈 배열로 초기화한다.
      this.memos = localStorage.memos ? JSON.parse(localStorage.memos) : [];
    }
  }
</script>

위의 코드 중 주입된 MemoForm 컴포넌트와 Memo 컴포넌트가 components에 추가되지 않았습니다. 이에 따라 코드는 아래와 같이 수정됩니다.

<!-- src/components/MemoApp.vue -->
<template>
  <div class="memo-app">
    <memo-form />
    <memo />
  </div>
</template>
<script>
  import MemoForm from './MemoForm';
  import Memo from './Memo';
  export default {
    name: 'MemoApp',
    components: {
      MemoForm,
      Memo,
    },
    data () {
      return {
        memos: [],
      };
    },
    created () {
      // 1. 만약 기존에 추가된 localStorage에 데이터가 있다면 created 훅에서
      // localStorage의 데이터를 컴포넌트 내의 memos 데이터에 넣어주고, 그렇지 않다면 그대로
      // 빈 배열로 초기화한다.
      this.memos = localStorage.memos ? JSON.parse(localStorage.memos) : [];
    }
  }
</script>