> For the complete documentation index, see [llms.txt](https://simian114.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simian114.gitbook.io/blog/undefined-1/diary/2021/april/20210409.md). # 20210409(금) ## 2021-04-09 ### 1. 학습 날짜 * 2021-04-09 ### 2. 학습 시간 * 10:00 \~ 22:00 ### 3. 학습 범위 및 주제 * 바닐라 자바스크립트로 MVC 패턴으로 todo 앱 만들기 * vue 학습 ### 4. 학습 목표 * todo 앱 counter 기능 구현하기 ### 5. 학습 정리 * x ### 6. 상세 학습 내용 * todo 앱 counter 기능 구현하기 * counter 를 그냥 구현하면 쉽게 할 수 있겠지만, SPA 의 특성을 살리면서 구현하는것은 은근히 어려웠다. * 특히 filter을 움직일 때 count 의 수가 동적으로 바뀌게 구현하려고 했는데 기존의 todo가 add 가 될 때 마다 + 1을 하고, 바로 view 에 넣는 방식이 문제가 됐었다. * 왜냐하면 10개의 todo 중에 3개가 이미 completed 가 되었다면 completed 버튼을 눌렀을 때 count 가 3이 되어야하고, 이 때 todo 를 추가하면 새로 추가 된 요소는 completed 가 아닌 active 이므로 바로 active 로 가야하고, 현재 보고 있는 completed 에서는 수가 추가가 되면 안된다!!! 하지만 기존에 + 1 을 바로 하는 방식에서는 + 1 이 되므로 문제가 된다. * 이 문제를 해결하기 위해서 기존의 방식인 + 1 을 하자마자 바로 view 에 적용하는걸 바꿔야했다. * 따라서 todo가 + 1 될 때 마다 count 는 + 1 을 하지만 조건에 따라 count view가 바뀌고, 바뀌지 않게 수정했다. * 더블클릭 이벤트 구현하기 * 흠.. 크게 어려웠던 건 없다. * 다만 조금 헤맸던 부분은 더블클릭하고 값을 수정했을 때에 그 수정된 값을 어떻게 읽는지에 대한 문제였다. * 평소 같았으면 금방해결했을 텐데 이상하게 잘 되지 않았지만,,, 결국 해결했다. * 헤맸던 부분은 수정한 값이 도대체 어디에 저장이 되는지에 대한 문제였다. `input` 태그 그 어디에도 수정된 값이 전달되지 않았었기 때문이다. * 결론은 그냥 DOM 요소를 찾아서 `.value` 속성을 이용해서 가져오기만 하면 되는거였다. * 그리고 여기서 처음으로 `focusout` 이라는 이벤트를 사용했다. 이 이벤트는 말 그대로 포커스를 읽으면 발생하는 이벤트다. * 이 부분에서도 한가지 이슈가 있었는데, 구현해야하는 todo앱에서 edit 하는 도중 ESC를 누르면 그동안 썼던 값을 버리고 기존의 값을 유지해야한다. * 따라서 ESC 를 누르면 발생하는 이벤트인 focusout 이벤트를 사용했는데, enter 를 눌렀을 때 값을 적용한 이후에도 focusout이벤트가 또 발생한다는 것이었다. 따라서 이 부분을 해결하기 위해 조금은 아쉽지만, focusout이 발생할 때 호출하는 이벤트 핸들러에서 조건을 나눠서 처리를 하는 분기를 만들어야했다. * vue 학습 * vue 의 watch와 computed 를 사용하면 data 속성을 감시할 수 있게 된다. * 이 둘 모두 속성을 감지할 수 있다는데에는 공통점이 있지만 차이점이 존재해서 computed 는 주로 가벼운로직에 사용되고 watch는 fetch 등 무거운 로직에 사용된다 * vue 가이드에서는 대부분의 상황에서 computed 를 사용할것을 권장한다. ### 7. 오늘 학습 내용에 대한 개인적인 총평 * 백본이 아닌 새로운 프레임워크를 학습하는데, 아직 많이 학습을 하지 않았지만 그래도 너무 기대가 된다. * 얼른 빨리 해보고 뷰를 적용한 간단한 앱을 한번 만들어보고 싶다. ### 8. 다음 학습 계획 * vue 강의 듣기 * todo 리팩토링하기 * model과 db * view 에서 render 를 하나로 만들고 나머지를 view 안으로 넣기