toDoList - 개발 3일차(화면의 틀 잡기)

개발순서

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

화면의 틀 잡기

한 달 단위로 보는 month 컴포넌트를 생성했다. 
테이블로 달력을 그리고자 하는데, 틀은 만들었으나 들어갈 날짜는 넣지 못했다.
월마다 요일에 따른 날짜가 다르기 때문,
나는 이를 타입스크립트에서 파라미터로 날짜를 받아서 해당하는 달의 1일이 무슨 요일인지 계산한 후, td에 값을 넣는 방법으로 그리려고 한다.

라우팅 모듈 생성

처음에 기획을 잘못해서... 변동사항이 생겼다. 진행도가 낮아서 괜찮았지만 만일 엎어야 할 정도로 진행됐더라면 어땠을까. 반성하자.
todos 컴포넌트에 처음에 생각 없이 day 컴포넌트의 내용을 담았다. 그리고 week를 표현하려고 보니 여기서 todos에 라우팅을 사용해서 위의 날짜 변경, 버튼은 그대로 두고 day, week, month만 바뀌면 좋겠다는 생각이 들었고, 이렇게 계획을 변경했다.
변경하는 중에 문제가 있었는데, 이는 내가 항상 app.component.html, 즉 바깥의 html에만 라우터를 설치해보았지 자식 컴포넌트에는 사용해 본 적이 없어서 에러가 발생한 것이다. 그래서 구글링으로 routes 변수의 {path:'...',component:...}에도 child를 포함시켜서 이중으로 라우팅하는 방법을 배웠다. 그를 적용했는데도 에러가 나면서 화면이 출력되지 않았다. 문제는 굉장히 사소하게도, 라우터 모듈에서 exports를 하지않은 것이 문제였다... 앞으로는 잘 확인하자.

해야 할 일

month 컴포넌트 달력 알고리즘 구현
각 day, week, month 컴포넌트에서 날짜를 변경하는 popover 알아보기
checkbox로 여러 항목을 동시에 삭제하거나, 하나의 항목만 체크했을때 수정이 가능하도록 구현 할 것.
day, week, month 컴포넌트를 따로 생성하고 todos에서 라우팅기능으로 컴포넌트를 종합하여 보여주도록 구현하자.(완료)