TIL 18일차_DOM

Twittler 과제 수행중_ DOM

---

DOM..
너무 생소해서 아직 감도 안오는데
twittler라는 트윗창을 만드는 과제를 받았다.

처음엔 키보드에 손만 까딱까딱..
뭐부터 해야하는지 처음으로 살짝 멘붕왔다.

자바스크립트로 문제만 풀다가
DOM으로 웹페이지를 구현하려고 하니,
갑자기 너무 생소했던 것 같다.

근데
하나씩 하다보니
자바스크립트로 알고리즘을 풀면서 했던 생각의 경로를 따라가게 되는 것 같았고
어찌어찌 거의 끝낼 수 있었다.
뭐야 이거 일기아닌데..

querySelectorAll로 할당한 변수에 addEventListener 메쏘드 사용하기

const usernameAll = document.querySelectorAll(".username");

const sameUser = function (event) {

  const target = event.target;

  const selectedName = target.textContent;

  console.log(selectedName);

};


for (const username of usernameAll) {

  username.addEventListener("click", sameUser);

  }

querySelectorAll로 다수의 엘리먼트를 변수에 할당하고 addEventListener을 돌리니 오류가 나서 한참 헤맸다.
결론은
for of문으로 하나하나 돌려주니 되었다. 이걸생각못하니왜왜왜왜왜

Today's ?!

배열을 합치는 방법들
arr.push() mutable
arr.unshift 얘는 앞에. mutable
arr[arr.length+1]= () mutable
arr.concat(arr2) immutable

이중 오늘 객체를 배열에 합칠 때 push를 썼는데,
단일배열로 만들거나 immutable한 method가 필요할 때는 concat을 자주 쓰는 것 같다.