4 할 일 관리 앱 - 삭제 기능 구현

source: categories/study/vue-beginner-lv5/vue-beginner-lv5_4.md

vue training lv5

4.1 삭제 기능 마크업 및 이벤트 연동

4.1.1 이벤트 연동시 주의할 점

props, event emit 통신방법
- 가급적 유지
- vuex 또는 mixins를 사용하시다보면 나중에 데이터 흐름 파악하기 어려워질 수 있음
- 몇 단계를 거치더라도 event emit으로 단계 거치게하는 것이 데이터 흐름 파악에 보다 더 직관적임
- 그렇다면 component 깊이가 깊어질 수록 중간에 event emit을 여러번 거쳐야되는데 그거 너무 귀찮지않음?
  - 그래서 vuex를 넣을거임
  - 이런 문제에 대한 TIP을 드리자면..



<template>
  <li>
    <span>{{ todoItem }}</span>
    <button @click="$emit()">삭제</button>
  </li>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "TodoListItem",
  props: {
    todoItem: {
      type: String,
    },
  },
});
</script>

<style scoped></style>

위와 같이 바로 $emit()으로 올릴 수 있습니다.
실무에서 위와 같은 코딩 방식은 허용가능한 범위의 코딩 방식이다.
하지만 위와 같이 html 내부에 js 코드가 들어가면 나중에 테스트 코딩을 짜기 매우 어렵습니다.

기본적으로 테스트 코드를 작성할 때, 위 컴포넌트를 모킹하게되는데, 모킹할 때 각각의 테스트 범주에 해당하지 않는 것들은 건드리지 않아야되거든요?
그런데 위와 같이 작성하면 다 건드리게 되어있음.
그래서 가급적이면 테스트 가능한 코드를 위해서 html 내엔 js 코드 작성을 안하는 방식으로 해야된다.
아래와 같은 방식으로



<template>
  <li>
    <span>{{ todoItem }}</span>
    <button @click="removeItem">삭제</button>
  </li>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "TodoListItem",
  props: {
    todoItem: {
      type: String,
    },
    index: {
      type: Number,
    },
  },
  methods: {
    removeItem() {
      this.$emit("delete", this.index);
    },
  },
});
</script>

<style scoped></style>

Note

git diff

git code diff

4.2 할 일 삭제 API 연동 및 구현

Note

git diff

git code diff