빵 입니다.

기능 정의Todo 입력Todo 수정Todo 삭제Todo Total 갯수 체크Todo 완료 갯수 체크Todo 미완료 갯수 체크 ES2015 버전에 class가 도입되었다.이름은 클래스(Class)이지만나 다른 OOP 언어의 클래스와는 다르다.자바스크립트의 class 는 함수의 prototype을 기반으로 동작한다.그렇지만 함수로 작성하기에 번거로운 문법적 요소들이 많은 부분 개선되었다. 함수에서 함수 자체가 new 연산자와 결합했을때 생성자 역할을 하지만, class는 명시적인 constructor가 존재한다.함수로 상속을 구현시 상위 함수의 prototype 을 직접 연결해줘야 하지만, class 는 extends 를 사용함으로써 보다 편리하게 상속을 지원한다.클래스에서 인스턴스를 생성하려면 반드시 ne..

기능 정의Todo 입력Todo 수정Todo 삭제Todo Total 갯수 체크Todo 완료 갯수 체크Todo 미완료 갯수 체크 자바스크립트는 프로토타입(Prototype) 기반의 언어라고 한다.자바스크립트는 원형 객체를 복사하여 새로운 객체를 생성한다.프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해줍니다. 자바스크립트에서 프로토타입은 두 가지로 해석된다.1. 객체 멤버인 __proto__ 속성이 참조하는 숨은 링크어떠한 객체가 만들어지기 위해 그 객체의 모태가 되는 것으로 객체원형이 어떤 객체인지 가리키는 연결이다.prototype에 대한 link는 상위에서 물려받은 객체의 프로토타입에 대한 정보이다.빈객체의 원형은 자바스크립트의 최상위 객체인 Object이다. 2. 프로토타입 객체..

기능 정의Todo 입력Todo 수정Todo 삭제Todo Total 갯수 체크Todo 완료 갯수 체크Todo 미완료 갯수 체크 객체 형식으로 만들어서 객체의 메서드만 실행하면 내부적으로 모든 이벤트가 바인딩 되고, 실행하도록 만들었다. handlebars.js를 사용하여 html을 템플릿으로 빼서 사용하였다. 정말 필요한 부분만 변수에 담고, 가능한 event 객체를 이용해 이벤트를 코딩했다. Object.assign을 사용해 템플릿에, 이벤트에 따라 항상 변화하는 갯수 값을 바인딩했다. 새로운 메서드들을 사용하니 코드의 양과 중복된 코드가 확연히 줄어들었다. 가독성도 높아졌다. HTML Todo 추가 CSS @charset "UTF-8"; @import url(//fonts.googleapis.com/e..

기능 정의 Todo 입력 Todo 수정 Todo 삭제 Todo Total 갯수 체크 Todo 완료 갯수 체크 Todo 미완료 갯수 체크 시각적으로 보이는 리스트들을 todo들 관리를 쉽게하기 위해 배열에 넣었다. 배열을 관리하면 되기 때문에 상태 체크가 훨씬 쉽고 안정적이었다.초기 실행함수를 만들어서 todo 추가하는 기능을 바인딩했다. (최초의 이벤트 바인딩)부분적으로 스트링 템플릿을 사용해서 html에 있던 코드들을 많이 생략할 수 있었다.ES6의 let, const, map, filter 등을 사용해서 코드를 더 간결하게 만들었다.Todo 가 간단한 구조이기 때문에 변경될 때마다 화면을 새로 그리도록 만들었다. HTML Todo 추가 CSS @charset "UTF-8"; @import url(//..

기능 정의 Todo 입력 Todo 수정 Todo 삭제 Todo Total 갯수 체크 Todo 완료 갯수 체크 Todo 미완료 갯수 체크 어떻게 해야하는지 감이 잡히지 않아서 dom api만 가지고 개발을 했다.우선, 코드가 매우 비효율적이다.재사용할 수 있는 코드가 매우 적고, ES5, ES6 섞어 쓴 부분도 많다.자바스크립트보단 html, css 단에 더 집중을 많이 한 느낌이 든다. HTML Todo 추가 완료 0건 미완료 0건 총 0건 CSS .todo_wrap{width:300px; margin:0 auto;} .todo_wrap h1{text-align:center;} .input_wrap{background:red;} .input_wrap:after{content:""; display:bloc..