클로저
클로저는 외부 함수를 참조해야지만 클로저다?
사실 이론적으로 모든 것이 클로저가 될 수 있다.
왜냐하면 상위 스코프를 기억하는 것이 클로저이기 때문에..
하지만, 브라우저 성능을 위해서 모던 브라우저는 말 그대로 중첩 함수가 외부 요소를 중첩해서 사용 해야지만, 클로저로 기억한다.
클로저가 무조건 좋은것은 아님..
사실 브라우저가 판단하기에는 이것이 클로저인지 아닌지를 판단하기 어려운 경우가 있다고 한다..
때문에 쌓이고 쌓이다 보면 메모리 누수가 일어날 수 있음..
Fetch
왜? reponse를 반환할 때 json으로 반환해줄까?
fetch의 response의 body는 스트림 형태이다..
때문에
json() 으로 변환해줘야 함.Element.remove()
요소를 삭제할 때 remove를 사용하자!
예전에는 특정 노드를 삭제하기 위해서는 반복문을 사용했던 것 같다.
하지만,
Element.remove()를 사용해서 간단하게 처리할 수 있다.<div id="div-01">Here is div-01</div> <div id="div-02">Here is div-02</div> <div id="div-03">Here is div-03</div> const element = document.getElementById('div-02'); element.remove(); // Removes the div with the 'div-02' id
코딩
관심사는 가까이 두는 것이 좋다.
예전에는 분리가능한 모듈이면
utils 안에 두었던 것 같다.하지만, 생각해보니 한 곳에서만 사용 되는 모듈의 경우에는 굳이
import 를 사용하면서 까지 사용할 필요 없다고 생각한다..각 컴포넌트의 의존도는 필요하지 않으면 최대한 낮추자
Todo 과제를 하면서 느낀것..
처음에는 TodoList를 추가할 때마다 TodoCount를 반영하는 로직이었으나,
너무 마음에 들지 않았음..
그래서 나름 2가지 방법을 생각해봤다.
- MutationObserber를 사용하자?
- Todo의 변경사항이 발생할 때마다 변경을 감지해 이를 반영하는 방법..
- 하지만, 이를 위해서 MutationObserber를 사용하는 것이 괜히 일을 크게 키우는 것 같다는 생각이 들었음..
- 모든 상태값을 상위 컴포넌트에서 관리하도록하자!
- TodoInput, TodoList, TodoForm 각각의 컴포넌트는 서로의 존재를 모르는 상태로 두는 것이 좋겠다!
- 따라서, 상태 관리는 전역으로 빼서 뿌려주는 패턴이 더 좋은 것 같다.