개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 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을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 들어갈 자리 확인하기 기존에 작성되어 있던 index.html에서 TodoList의 자리를 한번 확인해보자. ... ... ... 위와 같이 크게 3가지 항목으로 구성되어 있다. 우리는 이 부분을 각각 컴포넌트로 작성할 것이다. 먼저, 기본 기능인 2가지 컴포넌트를 먼저 작성해보도록 하자. Todo를 생성해주는 Todo Input 목록을 보여주는 Todo List 일단 먼저, html에서 section 태그만..
개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 버튼을 누르면 이벤트 호출 버튼을 누르면 이벤트가 발생해야 한다. 잊고 있었겠지만 Component.js에는 이벤트 관련 함수가 두개나 작성되어 있다. 이벤트를 추가하는 addEvent()와 모든 이벤트를 등록하는 setEvent()다. // Component.js 중 addEvent (eventType, selector, callback) { // 컴포넌트의 이벤트를 추가한다. this.$target.add..
개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 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 ..
개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 환경 구축 초기 상태를 만들어둔 init 브랜치에서 진행한다. # 로컬 터미널에서 git clone https://github.com/junwork123/js-todo-list.git git checkout init # 실행을 위한 live-server 설치 npm install -g live-server 아래의 명령어를 통해 실시간으로 웹페이지를 테스트해볼 수 있다. live-server . 윈도우에서 실행..