TIL - 3주차

TIL 18일차

트위틀러 페어프로그래밍과 알고리즘, 자바스크립트 페이지 만들기

Today’s Key 🔑

• twittler 문제의 필터링 기능을 만들면서 for~of에 대해서 공부했다. (아직 부족)
• template 태그를 이해하는 것에 기분이 퍽 좋았다.
• underbar 문제를 풀고 있는데 정말 쉽지 않다.
• 알고리즘 문제를 다수 풀었다. 잘 풀려서 기분이 좋았다.
  

추가로 공부하자 🔥

• iterable한 객체의 성질을 아직 잘 모르겠다. > 더욱 찾아보고 공부해야 할 것 같다.
• this에 대해서…
  

블로그에 기록하면서 복습하자 🚀

트위틀러의 DOM을 조작하면서 원하는 방향대로 움직이도록 설계하는 작업이 정말 쉽지 않았다. Jquery를 2018년에 처음 코드잇 강좌를 들으며 다뤘었고, 그 이후로 DOM 자체를 다룬 건 이번이 처음이다. 정말 새롭게만 느껴졌다. 그래서 나를 힘들게 했던 필터링 코드에 대해서 이야기 해보고자 한다.

필터링 조건 1. 작성된 트윗이 보여지는 UI에서 유저 이름을 클릭하여 특정한 값을 가지고 와야 한다.

그래서 document.querySelector('#user-name').textContent를 아무리해도 내가 원하는 값을 가지고 오지 않았다. (콘솔에 찍어보았을 때는 잘 나왔는데…) 그래서 구글링을 시작했다.

function filter() {
   let nameTxt = this.textContent;
   let twitli = document.querySelectorAll('#twit-contents');
}

• 클릭 이벤트가 발생하고, 해당 이벤트가 발생한 요소의 내부 값 (innerText or textContent 등)을 조회해야 했다. 여기서 this를 사용한 이유는 filter() 라는 함수가 그 선택된(클릭된) 요소에 할당되었음을 의미하기 때문이다. this로 가지고 온 값을 변수에 할당했다.
• twitli에 할당된 돔 요소는 각각의 트윗 내용을 담고 있는 <li> 태그다. 모든 값을 조회해야 했기 때문에 querySelectorAll을 사용했다. > 배열처럼 사용하려고!

필터링 조건 2. 가지고 온 값이 다른 곳에도 일치하게 있는지 조사해야 한다.

for ~ in 구문을 활용해서 요소들의 내부 값을 비교하여 실행했다. 계속 ‘iterator ~’ 를 담은 오류가 터져나왔다. (물론 다른 이벤트 함수에 적용을 안해서 그럴 수 도 있다.) 그래서 iterable한 것을 검색했고, 무진장 많고 어려운 정보에 당황하여 for ~ of 구문만을 간신히 구출할 수 있었다.

   for (let twit of twitUl) {
      if (twit.firstElementChild.textContent !== nameTxt) {
         
         twit.style.display = 'none';
      }
   }

• 클릭한 요소의 내부 데이터(nameTxt)와 트윗 요소의 반복되는 값이 서로 일치하는지 조사한다.
• for ~ of 구문내에서 twit의 첫번째 자식의 textContent와 비교해서 값이 다르면 스타일의 display 요소를 숨기게 만들었다.
• 이 부분을 찾는데 까지 하루가 걸린 것 같다.

필터링 조건 3. 언제 어느 상황이든 잘 작동해야 한다.

그렇다. 이제 관건은 트위터가 브라우저에 불러와졌을 때, 새로운 트윗이 생길 때 마다 필터링이 잘 작동해야 한다는 것이다. 그래서 #user-name의 값이 입력되는 곳을 각각 찾아서 전부 filter 함수를 클릭 이벤트로 심어줬다. 이것을 생각하는 것에도 오랜 시간이 걸린 것 같다.

// 브라우저에 onload 됐을 때 구동되는 함수
function basicTwit(obj) {
   
   obj.forEach(function (el) {
      let twitElement = document.importNode(tmpl.content, true);

      twitElement.querySelector('#user-name').textContent = el['user'];
       twitElement.querySelector('#user-name').onclick = filter
       ...
   }
};

window.onload = basicTwit(DATA);

// 새로운 트윗이 생길때마다 호출되는 마법의 spitTwit 함수
function spitTwit(obj) {
   ...
   let twitElement = document.importNode(tmpl.content, true);

   ...
   twitElement.querySelector('#user-name').textContent = firstEl['user'];
   twitElement.querySelector('#user-name').onclick = filter

}

그랬다. 트위틀러를 정말 오랬동안 잡고 있었다. 오랜만에 다루는 DOM에 익숙도가 현저하게 떨어진 상태였고, 새로 알게 된 정보도 엄청 많았다. 앞으로 많은 과정을 헤쳐가야 하는데.. 걱정이다. 🏄‍♂️