toggleOneItem > 안티패턴에 대해
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
안녕하세요. Vue.js 중급편을 듣고 있는 수강생입니다. 다름이 아니라, App.vue > toggleOneItem의 이벤트로 넘어온 todoItem 을 수정하는 것이 안티패턴이라고 하신 것은 이해가 되었는데, localStorage.setItem(todoItem.item, JSON.stringify(todoItem)); 에서는 todoItem 을 그대로 사용하여, localStorage에 저장하는 방식은 조금 이해가 되지 않습니다. 위 문단의 안티패턴과는 상관없지만 this.todoItems[index] 의 필드 수정된 것이 todoItem 이 참조하고 있기 때문에 변경 처리되었으니 localStorage에 저장한다는 의미가 되는데, 굳이 그렇게 하는 것보다는 명확하게 하기 위해서 이벤트로 index 만 받고, toggleOneItem: function (index) { let todoItem = this.todoItems[index] todoItem.completed = !todoItem.completed localStorage.removeItem(todoItem.item) localStorage.setItem(todoItem.item, JSON.stringify(todoItem)); }, 이렇게 했을 때, App 컴포넌트의 todoItems 를 핸들링하는 것을 명확하게 알 수 있지않을까 했습니다. 이렇게 구현했을 때의 구현상의 안좋은 패턴이 되는 요소가 있는지 궁금합니다.
- 안티패턴
- 이벤트
- vuejs
- es6
- javascript
- vuex