[FE - ConnecTo] DAY56 TIL👩🏻‍💻

22.09.29 수업 시간 중 공부한 내용들을 정리하였습니다 😊
피드백은 언제나 환영입니다! 🍊

• 처음에는 categories를 객체로 만들어 Object.keys(categories)로 배열로 만들어 nav 요소들을 렌더링 해주었다.

  • 이후에는 categories 배열 내에 각 카테고리들을 객체로 넣어주어 불필요한 메서드(Object.keys(categories)) 사용을 줄일 수 있었다.

• 첫 데이터 5개를 가져오는 동안 spinner가 intersecting되어 10개의 데이터를 가져오는 문제가 존재했다.

  • newsList가 호출되면 데이터를 가져오는 함수를 호출하도록 했는데, 이 함수가 데이터를 가져오는 동안 spinner가 intersecting되어 데이터를 한 번 더 가져와서 총 10개의 데이터를 가져왔다.
  • 일단은 newsList가 호출되면 데이터를 가져오는 함수를 제거하여 임시로 해결하였다.

• 기존 section 없애고, 새로 렌더링 어떻게?

  • 초기 렌더링이 되고 난 후에, 다른 section으로 넘어가면, 하나의 scroll-observer(spinner)에 여러개의 옵저버가 observe하고 있어, 한번 intersecting이 되면 여러개의 옵저버만큼 fetchMore 함수가 실행이 되어 그만큼 많은 데이터를 가져왔다.
  • 이후에 옵저버를 한번만 호출하면 이를 해결할 수 있을거라 생각했다. 그러나 처음 옵저버는 첫 데이터인 카테고리 ‘all’ 을 담은 fetchMore 함수를 호출하기 때문에 다른 카테고리를 선택하더라도 카테고리가 ‘all’인 데이터를 가져와 렌더링하게 된다.
  • 결국에는 scroll-observer를 newsList가 호출될 때마다 기존의 scroll-observer를 삭제하고 새로 생성하여 해당 카테고리의 observer가 observe하도록 만들어주었다.

    const init = () => {
      const $observer = `
        <div class="scroll-observer">
          <img src="img/ball-triangle.svg" alt="Loading..." />
        </div>
      `;
      document.querySelector('.news-list-container').insertAdjacentHTML('beforeend', $observer);
    };
    
    init()
    
    // newsList가 호출될 때마다 (다른 카테고리 클릭시) 위 함수로부터 새로 만들어진
    // scroll-observer에 observer가 observe하도록 해주었다.
    // (intersecting되었을 때 해당 카테고리에 대한 데이터를 가져온다.)
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        page += 1;
        console.log('observer:' + category);
        fetchMore('skill');
      }
    });
    observer.observe($spinner);

• innerHTML 이 아니라 insertAdjacentHTML을 사용한 이유?

  • spinner를 만났을 때, 초기 값을 유지해야하는데, innerHTML 사용 시, 초기 값을 초기화하고, 새로 렌더링을 하기 때문에, insertAdjacentHTML을 사용하였다.
  • innerHTML += ~~ 을 사용할 수도 있었겠지만, 이 경우, 전체 값을 다시 렌더링을 진행하기 때문에 불필요한 렌더링이 발생하기에 사용하지 않았다.