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