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