💻 무한 스크롤(Infinite Scroll)

waterglasses·2022년 4월 24일

IntersectionObserver TIL vanillajs 데브코스 무한 스크롤 프로그래머스

TIL

목록 보기

19/50

이번 챕터는 무한 스크롤에 대해 다루었습니다.
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

📃 오늘 공부한 것

무한 스크롤(Infinite Scroll)

컨텐츠를 페이징 하는 기법 중 하나로, 아래로 스크롤하다가 컨텐츠의 마지막 요소를 볼 때 다른 컨텐츠가 있으면 불러오는 방식이다.

구현 방법

window의 scroll 이벤트를 통해 처리

window.innerHeight + window.scrollY >= document.body.offsetHeight 코드처럼 스크롤이 화면의 마지막에 닿았는지 체크한다.

Intersection Observer로 처리

🤔 Intersection Observer??
대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 수단을 제공

쉽게 말하자면 어떠한 돔 객체가 시야에 닿았는지 안 닿았는지 확인할 수 있도록 하는 것이다.

Intersection Observer은 아래와 같이 사용한다.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) { //entry가 화면에 보이나요?
      if (this.state.totalCount > this.state.datas.length) {
        onScrollEnded();
      }
    }
  });
},{
    threshold: 0.5, // 실제로 얼마만큼 보였나요!~
  }
}

observer.unobserve(element); // 특정 대상 요소에 대한 주시를 해제
observer.observe(element); // 주어진 대상 요소를 주시

🌝 궁금한 내용

🐤 APP과 Main을 분리하는 이유

벌써 바닐라JS를 배운지 2주정도가 지났다. 강의를 듣던 도중에 강사님이 app과 main을 분리해서 만드는 이유를 한번 생각해보라고 하셔서 따로 생각한 내용을 정리해 보았다.

폴더 구조
📜 index.html
📦 src
┣ 📜 App.js
┗ 📜 main.js

//  index.html
<body>
  <script src='/src/main.js', type='module'></script>
</body>

// main.js
import App from './App.js'
export default function main(){
  // App 생성(선언)
  new App()
}

// App.js
export default function App(){
    // 기능 실행
}

내가 고민해 본 결과는 컴포넌트를 분리해서 유지보수를 편하게 하기 위해서(?) 이다. 아무래도 두개의 파일을 하나로 관리하다 보면 흐름이 꼬일 수 있다고 느껴졌다. 즉 복잡도가 증가하고 서로 많이 연관되어 있을 수록 의존도가 커지기 때문에 선언하는 곳과 실행하는 곳은 분리하여 유지보수를 편하게 하기 위해서라고 생각한다.

강사님이 말씀해주신 답변
컴포넌트의 선언부와 실행부를 분리시키기 위해서!

😰 어려웠던 내용

Intersection Observer

🔥 오늘의 느낀점

무한 스크롤에서 Intersection Observer이라는 것을 처음 알았다. Intersection Observer이 편해보이지만 스크롤, 혹은 페이지로 처리 하는 방법도 있으니 사용자가 편할 것 같은 상황에 따라 처리해야 겠다고 다짐하였다.

App.js와 main.js를 분리하는 이유를 생각해보았지만 이유에 대해 확신하지 못하겠다. '아마 이럴 것이다..'로 추측하였지만 다른 분들의 생각도 궁금하니 이 글을 보신다면 댓글로 달아주시면 감사하겠습니당.👍

드디어! 밀린 강의를 모두 들었습니다! 다시 일상으로 돌아왔으니 달려보겠습니다! 아자아자

🗣 오늘의 TMI

이제 날씨가 진짜 봄이다!
꽃가루를 날려~~ 🌸🌸

Refer

프로그래머스 데브코스
IntersectionObserver

오늘의 내용 정리

데브코스 Day25

waterglasses

매 순간 성장하는 개발자가 되려고 노력하고 있습니다.

이전 포스트

💻 디바운스(Debounce)

다음 포스트