20210408(목)

2021-04-08

1. 학습 날짜

• 2021-04-08

2. 학습 시간

• 10:00 ~ 20:00

3. 학습 범위 및 주제

• 바닐라 자바스크립트로 MVC 패턴으로 todo 앱 만들기

4. 학습 목표

• localStorage 사용법 익히기

• 뼈대 잡기

5. 학습 정리

• x

6. 상세 학습 내용

• 새로운 아이템이 추가될 때 문자열 로 넣는게 아닌 DOM 요소를 만들고 appendChild 하는 방식으로 수정했다.

  • 이렇게 수정한 이유는.... 이렇게 만드는게 더 효율이 좋을거란 생각때문이었는데, 막상 바꾸고 나서 지금 생각해보니 성능이 좋아지키는 커녕 성능이 더 나빠져버렸다....

  • 왜냐하면 이전에는 그냥 문자열을 추가하는 연산만 있었는데 이제는 DOM 요소를 create 하고 세팅하고.. 넣어주는 과정이 추가되었기 때문이다.

  • 이후에 이 부분은 이전처럼 돌려야겠다.

• 아이템 삭제를 완전 삭제가 논리삭제 를 하도록 수정했다. 수정한 이유로는 두 가지가 있다. 1. 완전삭제를 하면 지금 코드에 구현되어있는 count 를 제대로 사용할 수가 없었다. 왜냐하면 count 는 마지막에 추가된 값을 기준으로 + 1 해나가면서 세팅하는데, 지금 10개를 만들어놓고 새로고침을 하면 todo 리스트에는 10개가 남아있는데 count 가 다시 0으로 세팅되어 버린다. 2. 서비스를 운영하는 측면에서는 이 또한 데이터가 될 수 있다는 관점이 있었기 때문이다. 이전에 프로젝트를 진행했을 때에도 왠만한 데이터를 삭제할 때도 완전삭제가 아닌 논리삭제로 했었다.

• 필터링하기

  • 필터링은 display 속성을 사용했다. display 속성을 사용하면 렌더링트리에서 성능 측면에서 이슈가 생긴다는 단점이 있는데 지금 프로젝트는 그런 성능상의 이슈를 생각할 필요가 없는 과제라는 생각에 간단하게 display 로 코드를 구현했다.

7. 오늘 학습 내용에 대한 개인적인 총평

• 여러 사람들이랑 이야기를 하다보니 코드를 많이 작성하지 못했다... 역시 집이 최고다.

8. 다음 학습 계획

• TODO 앱 더블클릭 이벤트

• count 수정

• 리팩토링