0. 환경세팅

• vue create mytodo
• typescript, jest, cypress 등 기본으로 설치
• vscode 사용중

TODO 만들기

1 . todo 기본 컴포넌트 만들기

설계

• 3가지 섹터로 구분
  1. 타이틀과 router → header.vue
  2. 할일을 입력하는 부분 → item-input.vue
  3. 할일을 보여주는 부분 → item.vue
• css는 부트스트랩 기본을 사용 → index.html에 최소 css 스타일을 넣어주자
• item-input.vue 부분에서 엔터키로 입력이 되어야함

2. item-list 보여주기

설계 : 이건 내용이 길어서 페이지로 전환합니다

todo item-list 추가하기

3. item-list 보여주기 vuex 사용

설계

• interface를 만들어야한다. interface는 현재는 2가지가 필요로 하다 → item 요소 그 자체, Store에서 사용할 itemList
• Store.ts 에 해당 위에서 만든 interface를 추가한다. 수정필요
• state에 초기값을 넣어주고 mutations에 로직을 추가한다. 로직은 추가, 변경, 삭제
• getters도 만들어 주자 → 3가지 형태, 전체 / active / clear
• item-list component에서 data를 가져오는 부분을 변경해야한다
  • renderData 하는 부분은 getter에서 가져오자
  • getter로 가져오는 부분의 depth가 너무 길다. mapGetter를 사용하자 → import 부터
  • 첫번째 getter한 부분을 수정
  • 다른 로직(state)를 가져오는 부분을 모두 getter로 바꿔주자
• 이 상태로 서버를 실행하면 todo가 안나온다 → store는 비동기가 아니기에 화면이 나오고 나서 작동함. 따라서 화면이 발생할때 store가 뿌려지게 해야함
  • createhook을 사용하자