toDoList - 개발 11일차(post, changeModel, important)

개발순서

1. 화면의 틀 잡기(간단한 디자인, Bootstrap)
2. 컴포넌트 구체화, 라우팅 모듈 생성(Angular)
3. 백엔드 구축(NodeJs)
4. DB 생성
5. 세부적인 사항 수정

router.post 에러 해결

• todo.service 에서 비슷하다고 복붙을 했다가 addTodo에 http.get 메서드를 썻었다. http.post가 되야했는데. 사소한 실수를 조심하자.
• post를 고쳤음에도 다른 에러가 발생했다.
• todoForm에서 todo객체를 생성해서 service, db로 던져줬는데, todo객체의 date의 데이터형이 number가 아니라 ngbDateStruct(객체) 였다.
• req.body.date 는 객체가 되었고, sql문을 디버깅했더니 values(‘test’,3,[object Object]); 가 되었다.
• todo-add컴포넌트에서 todo객체를 생성하지 않고, date:string, todo, importance 항목을 갖춘 객체를 생성하여 db에 전송함으로 문제 해결

changeModel

• ngbDateStruct 형태의 변수를 string 형태로 변환해야하는일이 반복되었다.
• todo.service에 changeModel 메서드를 생성하여 필요한 경우 사용하도록 만들었다.

importance -> important

• 기존에 기획했던 todo의 요소 중 importance를 important로 바꾸었다.
• 중요도에 따라 색을 다르게하려 했으나, 색에 따른 단계를 구분하는 것보다는 중요하거나, 안중요하거나 둘 중 하나만 고르게하는 것이 직관적이라고 생각했기때문이다.
• important 가 true일 때, class binding을 이용하여 important 클래스를 추가하여 색을 변경하자.
• 별표를 만드는 방법도 생각해보자.
• 체크박스를 항상 보일것이 아니라, 수정모드 선택시 보이게 하는 방법도 생각해보자.

해야 할 일

라우팅(get, post 완료, put delete 남음)
ngFor을 이용하여 그 날의 todo를 bootstrap으로 구현. checkbox, deleteButton 포함.
todo의 우측에 별표 생성
체크박스를 항상 보일것이 아니라, 수정모드 선택시 보이게 하기checkbox로 여러 항목을 동시에 삭제하거나, 하나의 항목만 체크했을때 수정이 가능하도록 구현 할 것.
month 컴포넌트 달력은 내가 스스로 만들어 보자. (date-picker 참고)