Dev.Project (29) 썸네일형 리스트형 [TodoMVC] Step 7. ECMAScript2015 Refactoring Step 7. ECMAScript 2015 로 Refactoring하기 Intro ES6 문법이 자리를 잡아가면서, 그 필요성이 증대됬습니다. 이를 연습하기 위해 VanilaJS TodoMVC를 ES6 문법에 맞게 Refactoring 해봤습니다. 이전의 포스팅 단계로 봤을 때, Step 3. RemoveItem 에 해당하는 단계까지만 진행해봤습니다. 그 다음 단계는 똑같은 refactoring의 반복이기에 생략했습니다. 기존의 코드와 비교하면서 보시면 더 이해가 잘 되실겁니다.문법적은 내용에 대한 설명은 이 포스팅에서는 생략하겠습니다.아직 ES6 문법이 익숙하지 않으신 분들은 아래 포스팅을 통해 확인하는 것도 좋을 것 같습니다.>> TodoMVC Project VanilaJS version 포스팅으로 .. [TodoMVC] Step 6. To do list Remove Item Completed / list 에서 완료된 항목 삭제하기 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.. [TodoMVC] Step 5. To do list Update Item's Content / list 내용 수정하기 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.. [TodoMVC] Step 4. To do list Update Item's Status / list 상태 수정하기 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.. [TodoMVC] Step 3. To do list Remove Item / list 제거하기 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.. [TodoMVC] Step 2. To do list Add Item / list 추가하기 Step 2. To do list에 Item 추가하기두번째 단계. 이제 본격적인 코딩에 들어간다.list에 Item 을 생성해서 input tag에 입력한 값을 넣어주자.list를 추가하는 것과 추가한 list를 포함해, 전에 포함되어있던 list까지 보여줘야 하므로,다른 Step 보다 많은 작업량과 코드량을 요구한다. 1단계 . template.js 파일을 작성한다.1-1. 우선 list에 추가될 html 코드 조각을 template화 하자.template.js code>1234567891011function Template(){ console.log('template created'); this.defaultTemplate = '' + '' + '' + '{{title}}' + '' + '' + ''.. [TodoMVC] Step 1. 각 JS 파일 모듈화하고 의존성 관계 확립하기 Step 1. 각 JS 파일 모듈화하고 의존성 관계 확립하기첫번째 단계. 코드를 작성할 모듈들을 준비하고,각각의 관계와 역할을 정리해두자. 우선, app.js 파일을 작성한다.app.js code>123456789101112(function(){ 'use strict'; function App(){ console.log('App created!'); this.storage = new app.Storage(name); this.model = new app.Model(this.storage); this.template = new app.Template(); this.view = new app.View(this.template); this.controller = new app.Controller(this.mo.. [TodoMVC] TodoList based MVC Project with VanillaJS / To do MVC 만들기 프로젝트 Intro TodoList Project based MVC with Vanilla JS 프로젝트 시작 배경 프론트엔드 분야에서 빼놓을 수 없는 자바스크립트를 중점적으로 공부하고 있는데, 무엇인가를 직접 만드는 것보다 좋은 공부는 없다고 생각하여, 무엇을 만들지 고민하던 중에, 정말 정말 유명한 Todo List를 만들어보자고 생각했습니다. 지난 포스팅에서는 html, css, javascript 를 이용하여, 아무 구조도 갖추고 있지 않은 To do list 프로젝트로 만들어봤습니다. ( >> Todo list Basic >> ) 하지만 이번에는 To do list에 MVC 구조를 적용하여 보다 유지보수성이 높고 구조를 갖춘 To do MVC를 만드는 프로젝트입니다. To do MVC 공식 홈페이지에서는 각종 프레.. 이전 1 2 3 4 다음
