toDoList - 개발 5일차(popover, ng-bootstrap)

개발순서

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

popover

popover 기능을 넣었다. 구글링은 엄청나다. 하지만 구글링을 해서 정보를 얻었을 때, 이를 생각하고 적용해야겠다. 너무 따라하기만 했다가 어제 오늘같은 결과가 나오지 않았는가 싶다.
어제는 popover를 검색해놓고, 나온 결과가 jquery로 추가하는 것이었는데, index.html에 jquery 구문을 써놓고 CDN으로도 jquery를 추가하지않았다. 그러고도 오늘이 될 때까지 아무런 의심이 없었다. 바보가 따로없지.
오늘은 angular popover라고 검색했더니 <.ngb-datepicker>를 사용하는 방법이 나왔다. 그냥 아무런 생각 없이 html에 넣고 왜 안될까? 이러고 있었다. ngb라는 이름부터 angular에서 그냥 쓸 수 있는 모듈이 아니란 것을 왜 눈치채지 못했을까… 그래도 계속 생각하다 보니 다른 모듈이 필요하겠구나 싶어서 좀 더 알아보니 아니나 다를까 ng-bootstrap모듈을 설치하고 app.module.ts에 추가해야 사용할 수 있었다. 앞으로는 주의하자.

angular전용 bootstrap 테마

https://ng-bootstrap.github.io
angular2를 사용할 때 bootstrap 을 사용하는 방법을 예시를 들어 설명해주는 곳이다. 굉장히 고마운 곳.
ngModel을 이용하면 훨씬 더 편리하게 웹 애플리케이션을 작성할 수 있다는 것을 다시 한 번 깨달았다. 잘 활용하자.
하지만 너무 의존하다가는 내 실력을 키우지 못할 것이다. 사용할 때는 코드를 살펴보고 이해한 후에 사용하자. 시간이 많이 걸려도 된다. 나는 배우는 중이니까.

해야 할 일

month 컴포넌트 달력 크기 키우기 -> ng-bootstrap 모듈 뜯어보기
각 day, week, month 컴포넌트에서 날짜를 변경하는 popover 알아보기
checkbox로 여러 항목을 동시에 삭제하거나, 하나의 항목만 체크했을때 수정이 가능하도록 구현 할 것.