확장성있는 코드짜기

할일 리스트을 관리하는 프로그램을 만들어봅니다. 확장성을 높히는 소프트웨어 개발 원리에 대해서 배웁니다.
의존성 분리


TODO List 만들기

TODOTODO

지금까지 내용으로 모델링, 뷰와 데이터의 분리, 확장성에 집중해서 작은 프로그램을 만들어 보겠습니다. 확장성이 좋은 코드는 구조의 큰 변경 없이도 기능을 추가하고 변경 할 수 있습니다. 만들어볼 TODO List의 명세는 다음과 같습니다.

  • 항목을 입력하면 리스트에 등록한 시간과 항목이 등록됨
  • 완료한 항목을 누르면 완료되었다는 표시
  • 완료된 항목을 누르면 다시 원래 상태로 복원

코드 작성의 순서는 다음과 같습니다.

  • 명세를 바탕으로 모델링
  • 모델 작성
  • 모델과 뷰 엮기
  • 이벤트 처리
  • 뷰 꾸미기

TODO list 모델

/** Item class **/
var TodoListItem = function(text){
    this.text = text;
    this.done = false;
    this.date = new Date();
};

TodoListItem.prototype.toggle = function(){
    this.done = !this.done;
    return this;
};

/** List class **/
var TodoList = function(){
    this.items = [];
};

TodoList.prototype.addItem = function(text){
    var item = new TodoListItem(text);
    this.items.push(item);
    return this;
};

임의의 뷰(DOM Element)를 TodoItem이나 TodoListItem의 속성으로 동적으로 생성해도 문제는 없습니다. 다만 뷰와 두 모델의 의존성을 끊고, 뷰를 유연하게 하기 위해서 다른 방식으로 접근해보겠습니다.

TODO list 모델과 뷰 엮기

TODO list 이벤트 처리 및 뷰 꾸미기

이제 항목을 클릭했을 때 toggle 처리를 해보겠습니다. GUI의 이벤트는 뷰(DOM 객체)에서 발생하기 때문에, 이벤트 처리는 뷰에 의존 할 수 밖에 없습니다. 뷰와 객체간에 최소한의 참조만 유지하도록 하면서, 이벤트 처리에 위임을 적용해 보겠습니다.

TODO list 확장하기

현재 TodoList 모듈의 의존성은 TodoListItem과, 생성자에 넘기는 View가 .tl-item, .tl-text, … 같은 css 클래스를 지녀야 한다는 점입니다. 상당히 느슨한 프로그램이 됐습니다. 프로그램을 조금 확장해보겠습니다.

이 강의를 포함한 커리큘럼
저자

김동욱

개발 경력 약 10년, 전문 분야는 웹 및 각종 응용 소프트웨어 플랫폼입니다. Codeflow를 운영하고 있습니다.

2018년 07월 11일 업데이트

지원되지 않는 웹 브라우저거나 예기치 않은 오류가 발생했습니다.