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

Previous20210408(목)Next20210410(토)

Last updated