객체를 사용한 함수형 프로그래밍, Todo 만들기

기능 정의

• Todo 입력
• Todo 수정
• Todo 삭제
• Todo Total 갯수 체크
• Todo 완료 갯수 체크
• Todo 미완료 갯수 체크

객체 형식으로 만들어서 객체의 메서드만 실행하면 내부적으로 모든 이벤트가 바인딩 되고, 실행하도록 만들었다.

handlebars.js를 사용하여 html을 템플릿으로 빼서 사용하였다.

정말 필요한 부분만 변수에 담고, 가능한 event 객체를 이용해 이벤트를 코딩했다.

Object.assign을 사용해 템플릿에, 이벤트에 따라 항상 변화하는 갯수 값을 바인딩했다.

새로운 메서드들을 사용하니 코드의 양과 중복된 코드가 확연히 줄어들었다.

가독성도 높아졌다.

HTML

        

            
Todo
            

                
                
            
            

            

        

CSS

@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);

.todo_wrap{width:300px; margin:0 auto;}
.todo_wrap h1{text-align:center;}
.input_wrap{background:red;}
.input_wrap:after{content:""; display:block; clear:both;}
.input_wrap input{box-sizing:border-box; float:left; width:231px; height:40px; outline:0 none; border:1px solid #999; text-indent:5px;}
.input_wrap input:focus{border-color:#03cf5d;}
.input_wrap button{box-sizing:border-box; float:left; width:70px; height:40px; margin-left:-1px; outline:0 none; border:1px solid #03cf5d; background:#03cf5d; color:#fff;}
.input_wrap button:hover{cursor:pointer;}

.todo_list{list-style-type:none; margin:0; padding:30px 0;}
.todo_list li{line-height:30px; font-family:'Noto Sans KR', sans-serif; font-size:13px;}
.todo_list li input{vertical-align:middle;}
.todo_list li label{vertical-align:middle; cursor:pointer;}
.todo_list li button{box-sizing:border-box; width:20px; height:20px; outline:0 none; border:0 none; background:#ffffff; line-height:20px; color:red; vertical-align:middle; cursor:pointer; transition:background-color 0.5s ease;}
.todo_list li button:hover{background:#03cf5d;}
.todo_list .complete{text-decoration:line-through;}

.todo_count{}
.todo_count>span{position:relative; display:inline-block; width:30%; font-size:12px; text-align:center;}
.todo_count>span>strong{position:relative; top:1px; display:inline-block; color:#1aaf5c;}

JAVASCRIPT

const src   = `
    
Todo
    

        
        
    
    

        {{#each todoArray}}
            

                
                {{title}}
                
            
        {{/each}}
    
    

        
            총 {{totalCnt}}건
        
        
            완료 {{comCnt}}건
        
        
            미완료 {{incomCnt}}건
        
    
`;

let template = Handlebars.compile(src);

let Todo = {
    todoArray: [],
    init(){
        this.container = document.querySelector('#todoWrap');
        this.container.addEventListener("click", this.onCreateItem.bind(this));
        this.container.addEventListener("keypress", this.onCreateItem.bind(this));
        this.container.addEventListener('change', this.onChangeStatus.bind(this));
        this.container.addEventListener('click', this.onDeleteItem.bind(this));
       this.updateView();
    },
    addArray(title){
        this.todoArray.push({
          title: title,
          id: Date.now(),
          chkState: false
        });
    },
    onCreateItem(e){
        if(e.target.id === 'btnAdd' || e.which === 13){
            let txtInput = document.querySelector('#txtInput');
            if( txtInput.value ){
                this.addArray(txtInput.value);
                this.updateView();
            }else{
                alert('할 일을 입력해주세요.');
            }
        }
    },
    onChangeStatus(e){
        if (e.target.type === 'checkbox') {
            let id = +e.target.id;
            this.todoArray.find(todo => todo.id === id).chkState = e.target.checked;
            this.updateView();
        }
    },
    onDeleteItem(e){
        if(e.target.name === 'btnDelete'){
            let id = +e.target.dataset.id;
            this.todoArray = this.todoArray.filter(todo => todo.id != id);
            this.updateView();
        }
    },
    updateStatusBar(){
        let totalCnt = this.todoArray.length;
        let comCnt = this.todoArray.filter(todo => todo.chkState).length;
        let incomCnt = this.todoArray.filter(todo => !todo.chkState).length;
        return {
            totalCnt,
            comCnt,
            incomCnt
        };
    },
    updateView(){
        this.container.innerHTML = template(Object.assign({ todoArray: this.todoArray }, this.updateStatusBar() ));
    }
};
Todo.init();

CODEPEN 확인

https://codepen.io/bread_gee/pen/KEWwPx