TIL - 3주차

TIL 19일차

트위틀러 페어프로그래밍과 DOM 이벤트 객체 이해하기, 비동기는 맛만 봤다우

Today’s Key 🔑

• 페어프로그래밍을 통해서 트위틀러의 필터링 코드를 고칠 수 있었다. (이 부분은 아래에서 다시 설명!)
• 언더바 문제의 reduce, every를 어느정도 이해하면서 해결했지만, 완전히 내것으로 만들지 못해서 아쉽다.
• 아직 페어와 함께 무언가를 해가는 것에 어려움이 있다. 설명하는 능력이 조금 더 길러졌으면 좋겠다.
• 비동기와 동기의 차이에 대해서 알고, setTimeout 내장 함수에 대해서 공부했다.
  

추가로 공부하자 🔥

• 북마크에 걸어뒀던 javascript 링크들을 열심히 공부해야 할 필요를 느꼈다.. 우물안의 개구리가 되고 싶지 않다.
  

자꾸자꾸 보고 적고 직접 치면서 늘어나는 javascript 상식! (의싸!)

어제의 TIL에서 복습했던 트위틀러 필터링 코드 는 사실상 완전하게 내것이라고 할 수 없었다. 하지만 오늘 페어분께서 넌지시 알려주신 DOM 이벤트 함수의 event 객체 를 구글링을 통해 알게 되고, 그로 인해 비로소 나 만의 코드를 작성할 수 있었다. (물론 나만 이렇게 작성할 수 있다는 말은 아니지만 😆)

이벤트 객체로는 아무런 글자가 들어와도 된다. 다만 이벤트 핸들러 함수의 첫 인자로 무조건 와야 한다는 것! 또한 해당 함수를 선언 형태로 부여할 경우 (e) 이렇게 표현할 필요는 없다. 이벤트 객체는 이벤트 실행 그 자체를 의미했다. 내가 어제까지 짰던 코드의 this와 사뭇 비슷하다. 다른 점은 ` target ` 이라는 기본적인 내장 메소드가 있다는 점.

function filter (e) {
   let nameTxt = e.target.textContent // -> 이 부분을 통해서 클릭한 곳의 내부 text에 접근할 수 있다.
   let twitli = document.querySelectorAll('#twit-contents');

   for (let i = 0; i < twitli.length; i += 1) {  // -> for ~ of 대신으로 기본적인 for loop 를 사용할 수 있었다!
      if (twitli[i].firstElementChild.textContent !== nameTxt) {
         twitli[i].style.display = 'none';
      }
   }
}

코드를 짠다는 것에서 희열을 여러번 느꼈지만, 트위틀러는 정말 남다른 과제였다. 필터링이 되는 SNS를 작게나마 구현하다니…