개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 현재 store는 아래와 같은 문제점이 있다. store를 사용하기 위해 컴포넌트들이 알아야할 정보가 너무 많다. (store 변경에 취약하다, 의존적이다) store를 호출하면서 중복되는 코드를 재사용할 수 없다. 어플리케이션을 재시작하면 정보가 초기화된다(휘발성이 있다, 실제 DB를 이용하고 있지 않다.) 하나씩 문제를 해결해보도록 하자. Store 의존성 감소 기존 컴포넌트에서는 아래와 같은 형태로 St..

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 User는 TodoList를 가져야한다 TodoList는 사람이 해야할 일을 작성한 것이다. 즉, User는 TodoList를 소유해야 한다. 마침내, 처음 작성했던 User 관련 컴포넌트와 Todo 컴포넌트를 연결하는 순간이다. 먼저 유저를 선택할 수 있도록 기능을 추가하자. UserList에 User 선택기능 추가 User를 선택하려면 User 목록을 가지고 있는 UserList에 이벤트를 붙여야한다. /..

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 TodoCount 기본 뼈대 작성 TodoCount 컴포넌트는 3가지 기능을 가지고 있어야 한다. 필터링 : 3가지 필터를 설정할 수 있다(전체보기, 해야할 일, 완료한 일) 할 일 카운트 : 현재 표시된 할 일의 갯수를 표시한다 전체 삭제 : 할 일 전체를 삭제한다. 일단 컴포넌트 뼈대부터 잡으면 아래와 같다. // TodoCount.js import Component from "../core/Compone..

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 삭제 기능 만들기 조회 기능과 다르게 삭제 기능은 버튼을 눌렀을 때 이벤트로 동작한다. 아래와 같이 이벤트를 정의해주고 Reducer를 호출해준다. // TodoList.js setEvent () { this.onClickDeleteButton(); } onDoubleClickTodoItem() { this.addEvent('dblclick', 'li', (event) => { const todoItem = ..

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 유저를 담당하는 컴포넌트 작성 유저를 생성/삭제/조회하는 컴포넌트 UserList를 작성할 것이다. 저번 포스팅에서 작성했던 Component를 바탕으로 작성해야할 메소드만 나열하면 아래와 같아진다. // UserList.js import Component from "../core/Component"; export default class UserList extends Component { initState ..