Page tree
Skip to end of metadata
Go to start of metadata

요구사항

  • todo 리스트에서 체크 박스를 체크하면 완료 상태로 표시해 취소선을 표시한다.
  • 완료한 todo의 체크 박스를 해제하면 취소선이 사라져야 한다.
  • 수정 버튼을 클릭하면 수정 폼으로 바뀌어야 하고, 수정 폼에서 수정을 하면 값이 변경되어야 한다.
  • 수정 폼으로 이동한 후 수정을 하고 싶지 않으면 다시 원상 복구해야 한다.
  • 삭제 버튼을 클릭하면 todo를 삭제해야 한다.
  • 화면이 작은 경우를 대비해 todo 제목의 최대 글자 수는 30자까지만 보여주고 이후는 ...으로 처리한다.
  • 모든 테스트를 통과해야 한다.

데모 보기

구현 및 힌트

실습 시작

테스트 기반 개발

  • 새로운 터미널에서 "ng test" 명령을 실행하면 테스트 기반 하에서 개발할 수 있다.

task-item component 추가

  • 위 요구사항을 구현하기 위해 task list component를 task list component와 각 item을 관리하기 위한 component로 분리한다.
  • 각 todo item을 처리하기 위한 component로 task-item component를 추가한다.
    • "ng g component $component-name"
    • tasks 디렉토리 아래에 같은 레벨로 추가하고 싶다면 "ng g component tasks/item"으로 실행하면 된다.
  • <md-list-item /> 태그를 item component로 이동하고 list component에서 item component를 사용하도록 한다.
  • 화면이 깨지는 경우 css를 조정한다.

테스트 fail => pass

  • component를 분리한 결과 테스트가 깨진다. 테스트를 pass하도록 수정한다.
  • 에러 메시지를 확인하고 pass하는 spec.ts 파일을 참고해 pass하도록 수정한다.
  • 최초 테스트가 실패하는 대부분의 경우는 spec.ts에 @angular/material이 추가되지 않아 발생하는 경우가 많다.
  • item component의 경우 초기 값으로 task 값이 초기화 되어야 한다. beforEach에 다음과 같이 task 값을 초기화 해야 한다.

      beforeEach(() => {
        fixture = TestBed.createComponent(ItemComponent);
        component = fixture.componentInstance;
        component.task = '나의 할일';
        fixture.detectChanges();
      });


task를 관리하기 위한 model 추가

  • task는 title 값 이외에 완료 여부 상태(completed)를 관리할 수 있어야 한다.
  • title과 completed 상태 값을 가지는 Task class를 추가한다.

삭제 기능 힌트

click event로 처리
  • TaskService에 removeTask 함수 추가
  • task-item component에서 click event가 발생하면 삭제 함수를 호출
    • 책의 113페이지 이벤트 바인딩 활용
  • 삭제 함수는 TaskService에 removeTask 함수 추가
EventEmitter 활용해 구현

완료 기능 힌트

  • checkbox를 클릭하면 Task의 상태를 toggle한다.

  • 즉, 상태가 completed=true => completed=false, completed=false => completed=true로 변경한다.

  • 완료 상태의 경우 취소선을 만드는 css는 completed를 사용해 구현한다. (<span class="completed" title="{{task.title}}" >)

  • *ngIf를 사용해 Task의 상태 완료 여부에 따라 다른 class 적용하도록 구현한다.

  • <md-checkbox /> 태그에서 체크 상태는 How to set value checked in md-checkbox from typescript (Angular 2) 문서 참고해 적용한다.

수정 기능 힌트

  • 현재 item이 수정 상태인지를 판단하기 위한 상태 값(editing과 같은)을 추가한다.
  • 수정 버튼을 클릭했을 때 editing의 상태 값을 true로 변경한다.
  • 수정 버튼을 클릭하면 todo 제목이 입력 폼으로 바뀌고 우측의 버튼은 수정 취소 버튼으로 변경한다. 취소 버튼은 <md-icon>&#xe14c;</md-icon> 사용한다.
    • 입력 화면은 tasks form component에서 새로운 todo를 추가하는 부분을 참고해 구현한다.
  • 취소 버튼을 클릭하면 원상태로 복귀해야 한다.

제목을 30자만 보여주기

  • custom pipe를 추가한다.
    • 책의 125페이지 파이프 내용을 참고한다.
  • custom pipe를 module의 declarations에 추가한 후 사용한다.

테스트 pass 확인

  • 구현을 완료한 후 모든 테스트가 통과하는지 확인한다.
  • No labels