개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. (이 글은 Next Step에서 진행한 js-youtube-classroom을 따라 작성되었습니다.) 목표 Youtube 재생목록 어플리케이션을 작성한다. 복잡해지는 컴포넌트 구조를 재사용 가능하도록 한다. 복합적인 상태를 효과적으로 관리할 수 있는 방법을 탐색한다. API를 활용하여 무한 스크롤 기능을 구현하도록 한다. 전체 코드는 여기에서 볼 수 있습니다. 여정 들어가기에 앞서 이번 시리즈는 지난 시간에 작성한 TodoList의 마지막 코드를 기반으로 시작한다. 당시 TodoList를 마무리하면서 부족했던 점을 개선하고, 기능을 덧대어 Youtube Playlist를 만들 것이다. 따라서, 시작 코드가 최종 코드가 아니며, 점..

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 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 태그만..