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 안으로 넣기
Last updated