[1단계 - todo list] 배럴(김나은) 미션 제출합니다.

[knae11]

안녕하세요 :) 배럴입니다. 하나하나 확인해가며 하다보니 생각보다 오래걸렸네요. 그래도 재미있었습니다 :)

정리 및 알게된 점

Date 클래스

• id 값을 Date.now()로 해줄 수 있는데, new Date.getTime() 과 같다. 후자와 같이 사용하려면 new 를 매번 해주어야 한다.
• const date = new Date; const id = date.getTime()으로 사용하였더니 시간이 똑같이 떠서 버그가 발생하였다.

이벤트의 currentTarget, target

• currentTarget : 이벤트를 등록한 그것! (이벤트가 등록되어 있는 부모요소라고도 할 수 있다)
• target : 이벤트가 발생한 바로 그것! (내가 클릭한 바로 그것!)
• ✨두가지를 적절하게 사용하면 이벤트 위임을 효과적으로 사용가능하다!

적절한 querySelector

• 적절하게 querySelector를 활용하여 DOM 조작이 가능하다!
• 범위 설정에 유의하자!

구조분해할당, 스프레드 연산자

• {} : 구조분해 할당
• {... } : 스프레드 연산자

Object.keys(객체)

• 객체들의 keys를 가져온다
• 객체의 keys를 순회하며 객체내부 접근 가능하다

object[런타임결정]

• key 값이 런타임에 결정할 때 접근하는 방식이다.

템플릿 리터럴 ``

• 내부에 변수를 사용하려면 ${변수}

value

• 해당 노드의 값에 접근하려면 .value로 가능하다.

innerHTML, insertAdjacentHTML

• innerHTML은 선택된 범위 내의 모든 HTML을 의미하며 전체가 조작된다.
• insertAdjacentHTML은 선택부분만 조작된다.

Node.children, Node.childNodes

• children : text를 제외하고 li등의 필요한 것들만 나온다. 반환타입이 HTMLCollections라고 한다.
• childeNodes : text, li등 모든 자식 노드가 포함된 것이 나온다.