22-05-17 | to do list

Moon Hee·2022년 5월 18일
0

간단한 to do list 기능 구현해보기

  1. 해야할 일 Todo 클래스(내용, 상태 두 가지 프로퍼티를 가집니다.)
  2. Todo 클래스는 상태를 변경하는 changeState 메서드를 가집니다.
  3. 할일의 목록을 관리하는 관리자를 추상화한 TodoManager 클래스 (할일 목록을 프로퍼티로 가집니다.)
  4. 할 일을 저장하고(addItem), 할 일의 목록을 보여주며(getItems), 할 일의 남은 갯수를 반환하는(getLeftTodoCount) 세 가지 메소드를 가집니다.

class Todo {
    constructor(내용, 상태) {
        this.내용 = 내용;
        this.상태 = 상태;
    }

    changeState() {
        this.상태 = !this.상태;
    }
}


class TodoManager {
    constructor() {
        this.todoList = [];
    }

    addItem(내용, 상태 = false) {
        this.todoList.push(new Todo(내용, 상태));
    }

    getItems() {
        return this.todoList;
    }

    getLeftTodoCount() {
        return this.todoList.reduce((total, current) => {
            if (current.상태 === false) {
                return ++total;
            } else {
                return total;
            }
        }, 0);
    }
}


const todoManager = new TodoManager();

class, 생성자 함수, reduce가 사용되었습니다.

profile
프론트엔드 개발하는 사람

0개의 댓글