2021-03-03 TIL

fact

• 코드숨 6강 요구사항에 맞게 과제 완료
• 이력서 계획 완료
• 블로그 되살리기
• dom을 깨우치다 읽기
• 30분씩 총 3번 나가서 걷기

feelings

• 운동을 하니까 확실히 집중이 잘된다.
• 오늘도 계획을 모두 완료해서 기분이 좋다.
• 뭔가 자신감이 떨어진 느낌을 받이 받는다. 내 못난 부분만 보려고 한다는 생각이 든다.

finding

• 코드숨 6장

  • useEffect
  • action을 테스트 하는 방법을 배웠다.
  • api를 테스트 하는 방법을 배웠다.
• DOM을 깨우치다 (22p~40p)

• DOM 에서 노드를 제거하기 위해 여러 단계를 거친다.

  • 삭제할 노드 선택
  • parentNode 속성으로 부모 노드에 접근하여, removeChild()에 삭제할 노드에 대한 참조를인지값으로 넘긴다.
• 제거하거나 바꾸는 대상이 무엇인지에 따라 innerHTML, outerHTML, textContent속성에 빈 문자열을 주는게 쉽고 빠르지만 브라우저 메모리 누수가 발생할 수 있으므로 조심해야한다.
• replaceChild 및 removeChild는 각각 교체되거나 제거된 노드를 반환한다.
• cloneNode() 메서드를 사용하여 단일 노드 혹은 노드 및 모든 자식 노드를 복제할 수 있다. 매개변수로 true를 넣지 않으면 자식을 복사하지 않고 true를 넣으면 자식까지 복사한다.
• element노드를 복제할 때, 모든 특성 및 값(인라인 이벤트 포함)도 복제된다. addEventListener()나 node.onClick으로 추가된 것은 복제되지 않는다.
• 트리에서 노드 그룹을 선택 또는 사전에 정의된 노드 집합에 접근하기 위해선 해당 노드들이 NodeList나 HTMLCollection내에 있어야 한다.
• childNodes 속성을 사용하면 직계 자식 노드에 대해 배열 형태의 리스트(NodeList)가 나온다.
• childNodes가 Element 노드 뿐만 아니라 다른 노드 유형(text 및 comment 노드)도 포함한다.
• HTML Collection은 배열 형태이지만, array의 메서드를 상속하는 진정한 js 배열은 아니며, isArray()를 사용하여 프로그래밍 적으로 js 배열인지 확인 할 수 있다.

• NodeList나 HTMLCollection을 진정한 js 배열로 변환하는 것 두가지 이점이 있다. 유사배열을 진짜 js 배열로 변환하기 위해 call 또는 apply를 사용한다.

  • 둘다 라이브 리스트인데 비해 현재 DOM에 국한되지 않은 리스트 스냅샷을 만들 수 있다.
  • js 배열로 변환하면 Array 개체가 제공하는 메서드(foreach, pop, map, reduce 등)에 접근할 수 있다.

• 다음의 속성들을 사용하여 DOM을 탐색하면서 다른 노드의 탐색을 얻을 수 있다. (element 와 text, comment 노드 모두 포함된다.)

  • parentNode
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

• element만 가져올땐 밑의 속성을 사용한다.

  • firstElementChild
  • lastElementChild
  • nextElementSibling
  • previousElementSibling
  • children
  • parentElement
• 노드의 contain() 메서드를 사용하면 특정 노드가 다른 노드 내에 포함되었는지 알 수 있다.
• DOM 트리 내에서 주변 노드와 연관된 노드 위치에 대해 정확한 정보를 얻을땐 copareDocumentPosition 메서드를 사용한다.
• DOM내의 노드에 대해 isEqualNode()메서드를 호출하면, 매개변수로 전달하는 노드와 동일한지 물어보게 된다.

Future Action Plan

• 3시간 마다 걷기
• 계획을 완료하면 나는 개쩐다고 스스로 칭찬하기
• 6강 전체를 tdd로 다시 진행하기
• 이력서 준비하기
• dom 책 읽기