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

todo 앱 구현 실습 1단계

요구사항

  • todo 앱 구현을 위한 뼈대를 만든다.
  • app의 header를 처리하는 component와 메인 기능을 구현하는 component를 추가한다.
  • 메인 기능은 to do list 값을 입력받는 입력 component와 입력 받은 데이터의 목록을 출력하는 component로 분리해 데이터를 교환하도록 구현한다.
    • 데이터 교환은 service를 통해 처리하는 것으로 구현한다.
    • 입력받은 데이터는 임시로 배열에 저장한다.

프로젝트 최초 생성 후 시작하는 경우

  • angular material 기반 작업을 하는 것이 어려운 사람은 https://github.com/danielzen/material-todo 문서와 소스 코드 참고해 html 작업 진행
  • material icon이 나타나지 않는 경우 src/styles.css에 다음 구문 추가

    @import url(//fonts.googleapis.com/icon?family=Material+Icons);

프로젝트 fork 후 시작하는 방법

  • 프로젝트를 처음부터 생성하지 않고 https://github.com/javajigi/slipp-todo fork 한 후 step0-getting-started 브랜치에서 실습 시작
  • 실습한 결과물을 firebase로 배포하려면 firebase key를 src/environments/environment.ts 에 설정하면 된다.

힌트

  • component를 어떻게 분리할 것인지 설계한다.
  • component를 생성해 html을 분리하고 component를 사용하는 경험을 한다.
    • "ng g component $component-name" 으로 필요한 component 생성
    • component 생성시 폴더 하위에 생성하고 싶으면 "ng g component tasks/$component-name"과 같이 생성 가능
    • css는 component 단위로 적용되기 때문에 이에 대한 분리도 필요함.
  • angular2에서 form submit 처리는 ngSubmit 활용해 component function 호출 가능함.
  • 입력하는 task는 ngModel을 통해 해결 가능함. 데이터 바인딩 참고
  • "ng g service $service-name"으로 필요한 서비스를 추가한다.
    • module에 자동으로 추가되지 않는다. app.module.ts 파일을 열어 수동으로 추가해야 한다.
    • service에 task 목록을 가지는 배열을 추가하고 배열에 task를 추가, 조회하는 function을 구현한다.
  • service의 task 목록을 task list component에서 사용하도록 구현한다.
  • No labels