[step2] 정인우

[nerdyinu]

2주차: Web Component 구성

• 이론
  • ES5의 Class와 ES6의 Class의 차이점에 대해 조사하기 (5가지)
  • ES6의 Class만이 가지고 있는 특징과 장점에 대해 조사하기 (3가지)
• 실습
  • Component Class 만들기
    • Vue와 React를 참고하여 자유롭게 구성해보기
    • DOM 사용 최소화화기
      • State(혹은 data)가 변할 때 만 렌더링이 되도록 구성
  • TodoList 리팩토링

step2-todo list

Vuex로 Store 만들기를 참고하여 Store를 구성하고, observe 와 observable을 등록해보았습니다.

이번에 새로 알게 된 건 Proxy API입니다.
현재 렌더링이 제대로 되지 않는 문제가 있습니다.
궁금한 점은
1.준일님의 조언을 따라 proxy에 재귀를 사용해서, 프로퍼티를 쓰는 set을 가로채서 모든 키값을 observable하게 했습니다. 제 의도는 객체의 작은 부분만을 변경할 경우, 해당 부분을 책임지는 컴포넌트만이 리렌더링 하게끔 하는 것이었는데 이 의도를 재귀를 사용해서 구현하는 게 맞는 건지 궁금합니다.
해당 부분 또한, proxy를 사용할 때는 에러가 없었지만 defineproperty로 사용해보니 too much recursions 재귀 에러가가 발생했었습니다.

2. localStorage에 저장하는 로직의 경우, 제가 재귀를 사용하기 때문에 외부의 observable 함수에서 외부의 가장 큰 state만을 저장하게 하는 것이 힘들었습니다. 그래서, Store에 state을 전달할 때 proxy를 한 번 더 사용해서 set할 때 localStorage에 setItem하게 만들었습니다. 이런식으로 덮어씌우는 것이 가능한지가 궁금합니다.

감사합니다!
근데 현재 렌더링이 되지 않는 문제가 있네요..ㅜㅜ 이 이유를 잘 모르겠습니다.