자바스크립트 개인 과제 스크린샷

깃헙주소

https://github.com/dygmm4288/movie/tree/main

영화 API를 이용하여 영화 데이터를 가져오고 위 스크린샷 처럼 가운데를 기준으로 점점 커지면서 영화의 데이터를 한눈에 볼 수 있도록 구상하고 구현을 하였다.
가운데 검색 input에서 영화의 이름을 검색할 경우 해당 영화만을 filter한 뒤에 다시 랜더링을 하게끔 구현하였다.

문제 현상

랜더링 하는 과정에서 어딘가에서 무한루프에 빠지는 부분이 있었다. 그래서 웹이 멈처버리는 현상까지 나타났었다.
아무리 생각해도 render를 담당하는 함수는 재귀적으로 뭔가를 호출하는 것이 없이 최대한 순수 함수로써 구현을 하려고 노력하면서 작성했기 때문에 재귀적으로 뭔가 동작하는 것도 없다고 생각을 했다.

export function renderMovies(movies) {
  const moviesWrapperUl = select('#movies-wrapper');
  moviesWrapperUl.innerHTML = '';
  const makeId = makeIdGenerator();

  // 5개씩 잘라서
  // 최소 radius 600 + 200씩 늘린다?
  const size = Math.max(1, Math.floor(movies.length / 4));
  const circleContainers = [];
  console.log(movies);
  for (let i = 0, len = movies.length; i < len; i += size) { // ****
    const movieItems = [];
    for (let j = 0; j < size; j++) {
      if (i + j < len) {
        movieItems.push(movies[i + j]);
      }
    }
    const id = makeId.next().value;
    const circleItems = createMovieItem(id, movieItems);
    const zIndex = size - id;
    circleItems.style.zIndex = zIndex;

    append(moviesWrapperUl, circleItems);

    const index = Math.floor(i / size);
    const startAngle = index % 2 === 0 ? 0 : 45;
    const radius = 600 + 200 * index;
    const speed = Math.random() * 21;
    const circleContainer = new CircleContainer(Array.prototype.slice.call(circleItems.children), radius, id, startAngle, circleItems, zIndex);
    circleContainer.speed = speed;

    circleItems.style.width = radius + 'px';
    circleItems.style.height = radius + 'px';

    console.log(circleContainer);

    circleContainer.playRotate();
    circleContainers.push(circleContainer);
  }
  return circleContainers;
}

문제 현상 원인과 해결

무한루프는 재귀적으로만 발생한다는 고정관념이 문제였다. 여러 사람들과 해당 코드를 공유하고 대화해본 결과 주석 **** 부분이 for문에서 i가 증가하지 않아서 계속해서 그 부분을 반복하는 것이 문제였다.
평상시에 for문을 작성할 때 항상 1 혹은 그 이상의 수가 증가하는 것처럼 작성하다보니 당연히 1은 증가할 것이라고 안일하게 생각했다.
그 부분에 대해서 최소 1은 증가할 수 있도록 size에 대한 값을 수정하였고, 해당 문제를 해결하였다.

느낀점

가끔 당연하다고 생각하는 것이 당연하게 동작하지 않을때가 많은 것 같다. 이번 일을 계기로 반복문에 대해서 더 조심스럽게 사용하고 같은 문제가 발생할 시에 빠른 조치가 가능할 것 같다.
이 부분에 대해서 같이 고민하고 도와주시고 알려주신 이**님, 최**님 이 자릴 빌어서 정말 감사합니다.