미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
toggleOneItem > 안티패턴에 대해
안녕하세요. 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를 핸들링하는 것을 명확하게 알 수 있지않을까 했습니다.이렇게 구현했을 때의 구현상의 안좋은 패턴이 되는 요소가 있는지 궁금합니다.