Today, I Learned

• sprint심화 학습으로 파리들을(?) 클릭하면 제거하는 로직을 짜봤다.

      elFly.addEventListener('click', (event) => {
        let body = document.body;
        recursion(body, event.target);
      })
  // 아래는 재귀함수 구현(Tree에서 특정 값을 탐색하는 과정[O(n)]을 통해 특정 값을 제거해주는 로직
  function recursion(el, target) {
        let arr = Array.prototype.slice.call(el.childNodes);
        if (arr.includes(target)) {
          for (let element of arr) {
            if (element === target) {
              return el.removeChild(target);
            }
          }
        } else {
          for (let element of arr) {
            let result = recursion(element, target);
            if (result) {
              return true;
            }
          }
        }
      }

• 다음으로, 파리들을 일렬로 정렬하는 메서드를(lineUP) 만들어봤는데, 단순히 top 값만 통일시키는 것으로 마무리했다. 하지만, 파리들을 정렬시킨 상태에서 파리를 또 추가하고, 정렬 취소 버튼을 누르면, 이미 정렬되어있던 파리들은 제자리로 돌아가고, 랜덤 위치에 생성된 파리들은 정렬되는 문제가 발생했다. 이 문제를 해결해봐야겠다..
  

  // Fly.js 
    Fly.prototype.lineUp = function () {
    if (this.linedUp) {
      Object.assign(this.$node.style, {
        top: `${this.top}px`,
        left: `${this.left}px`,
      })
      this.linedUp = false;
    } else {
      Object.assign(this.$node.style, {
        top: `280px`
      })
      this.linedUp = true;
    }
    
   // 아래 부분은 init.js
   document.querySelector('.lineUpButton').onclick = () => {
    dancers.forEach((dancer) => dancer.lineUp())
  }
  }