[JavaScript] TWIL : DOM을 이용한 동적Web 만들기 마무리 (20/09.05~09.11)

HTML, CSS, Javascript, DOM을 이용한 동적 Web Twitter 클론을 마무리 했다.

1. template 태그를 이용해 코드는 짜는 동기분들을 봤다. 생각도 못한 방법이었는데,
   importNode( ... ,content, true)이런 식으로 미리 작성해 놓은 템플릿을 가져다 쓸 수 있는 방법이었다. 다음에 리팩토링 해보면 좋을 것 같다.
   
   

2. 최소 요구사항 : MVP(Minimum Viable Product).
   평생 MVP는 Most Valuable Person이라고만 알고 살았던 나는, 새로운 다른 뜻을 알게되었다.. ㅎㅎ
   
   

3. label 태그는 사용시 그 라벨의 해당 텍스트를 클릭하면 포인터가 텍스트 박스로 이동된다는 특징이 있다!
   
   

4. 이벤트 종류 중 "onfocus/onblur(focus해제)", "onkeyup/onkeydown", "onmousedown/onmouseup(drag&drop)" 이렇게 짝으로 동작을 주면 더 다양한 동적 이벤트를 줄 수 있다.
   
   

5. 크게 약 3가지의 동적 함수를 만드는 과제에서,
   (1. 로드 시 랜덤한 트윗 5개 타임라인에 뿌리기 / 2. 새로운 트윗을 작성해서 타임라인에 추가하기 / 3. username 클릭 시 해당 user의 트윗만 filter하기)
   나는 하나의 함수 안에서 모든 것을 해결할 수 있게 큼직큼직하게 함수를 작성했는데, 앞으로 배울 고차함수를 이용해 함수를 잘게잘게 쪼개는 연습을 해보라는 엔지니어님의 조언이 있었다. 이것도 후에 리팩토링 할 때 유념할 부분이어야 할 것이다.
   
   

6. 메소드(함수)는 중첩으로 사용 가능하다는 것을 한번 더 상기할 수 있었다.

const thread = document.querySelector('#thread');
const ulOfThread = thread.querySelectorAll('ul');