::Devlog::

Step 7. ECMAScript 2015 로 Refactoring하기 Intro ES6 문법이 자리를 잡아가면서, 그 필요성이 증대됬습니다. 이를 연습하기 위해 VanilaJS TodoMVC를 ES6 문법에 맞게 Refactoring 해봤습니다. 이전의 포스팅 단계로 봤을 때, Step 3. RemoveItem 에 해당하는 단계까지만 진행해봤습니다. 그 다음 단계는 똑같은 refactoring의 반복이기에 생략했습니다. 기존의 코드와 비교하면서 보시면 더 이해가 잘 되실겁니다.문법적은 내용에 대한 설명은 이 포스팅에서는 생략하겠습니다.아직 ES6 문법이 익숙하지 않으신 분들은 아래 포스팅을 통해 확인하는 것도 좋을 것 같습니다.>> TodoMVC Project VanilaJS version 포스팅으로 ..

Step 6. To do list에서 Completed Item 제거하기남은 Step 들은 UX를 고려한 기능추가이다.이번 Step 에서는 완료된 항목들을 선택해서 삭제해주는 step이다. 1단계 . View.js 파일을 작성한다.1-1. 우선 bind에 removeCompleted 이벤트를 등록해준다.view.js code>12345678//event: removeCompleted//handler: controller.removeCompletedItems} else if(event === 'removeCompleted'){ console.log('View.prototype.bind.removecompleted execute!'); self.$clearCompleted.addEventListener('c..

Step 5. To do list의 Item 내용 수정하기다섯번째 단계. 거의 다왔다. 큰 산은 이게 마지막 산이다.이번에는 추가해줬던 list 내용을 수정해보자.수정하기 위해서 선택을 하고 입력을 받기 위해 태그를 생성하고입력을 마치면 다시 생성했던 태그를 지우고 간단해보이지만 의외로 코드가 정말 많이 들어간다. 1단계 . View.js 파일을 작성한다.1-1. bind에 itemEdit을 추가한다.view.js code>12345678} else if(event === 'itemEdit'){ console.log('View.prototype.bind.itemEdit execute'); todo.addEventListener('dblclick', function(event){ var target = e..

Step 4. To do list에서 Item 상태 수정하기네번째 단계.이제는 리스트에서 완료, 미완료를 설정할 수 있도록 하자.점점 설명할 것도 적어지고, 코드량도 적어진다! 1단계 . View.js 파일을 작성한다.1-1. bind에 itemToggle을 추가한다.view.js code>1234567891011//event: itemToggle//handler: controller.toggleComplete} else if(event === 'itemToggle'){ console.log('View.prototype.bind.itemToggle execute'); todo.addEventListener('click', function(event){ var target = event.target; if..

Step 3. To do list에서 Item 제거하기세번째 단계. 큰 산 하나 넘었다.실제로 해보면서 늘어난 To do list 목록을 완료, 미완료에 상관없이 일단 삭제부터 해야겠다.이미 TodoMVC 공식 홈페이지로 부터 HTML 코드를 받았기 때문에 X 버튼이 준비되어 있다.우리는 event를 걸어 list를 삭제시키자. 1단계 . View.js 파일을 작성한다.1-1. bind에 event 분기를 추가한다.view.js code>1234567891011//event: itemRemove//handler: controller.removeItem} else if(event === 'itemRemove'){ var todo = self.$todoList; todo.addEventListener('cl..