📚TIL

day27

무한스크롤

• 일반적으로 모바일에서 사용하며 컨텐츠를 페이징하는 기법 중 하나
• 구현방식1 : window scroll 이벤트를 통해 스크롤링이 일어남
• 구현방식2 : Intersection observer 방식
• 푸터에 접근하지 못한다는 단점이 있음

스로틀(Throttle)

• 가장 처음에 들어온 이벤트만 실행하고 일정 시간동안 들어오는 이벤트를 무시하여 이벤트를 제한하는 방식
• 이벤트 횟수를 제한하여 성능 문제가 발생하지 않도록 제어
• 디바운스와 비슷한 개념이지만 스로틀은 정해진 시간이 지나면 기능을 실행하는 것을 보장한다는 것이 디바운스와 가장 큰 차이점

intersection observer

• 뷰포트와 설정한 요소의 교차점을 관찰하여 뷰포트에 요소가 나타나는 지를 감시
• 비동기적으로 실행되어 scroll처럼 연속적인 이벤트 발생 감시에 사용 가능
• 인자로 callback, options를 받으며 threshold는 요소의 얼만큼이 뷰포트에 나타났을 때 함수가 실행될지를 결정
• 비교적 최신 기술이기 때문에 오래된 브라우저에는 지원하지 않음
• 무한스크롤 이외에도 이미지 지연로딩 등에 적용 가능

무한스크롤 실습

🌊하루를 마치며

오늘도 강의를 밀리지 않고 다 들었다! 무한스크롤 실습을 하면서 직접 사용하는 플랫폼에 적용되는 것을 실제로 만들어 보는 과정이 재밌게 느껴졌다. window scroll 이벤트를 사용해서 만드는 것은 어느정도 낯익은 방법이었지만 intersection observer를 사용하는 방식은 처음 접했다. window scroll을 이용한 방식보다 더 쉽고 옵션을 통해 어느정도 스크롤을 내렸을 때 함수를 실행할 것인지 정할 수 있다는 점이 좋았다. 직접 픽셀을 더하여 함수를 실행할 스크롤 위치를 선정하는 것 보다 코드도 더 깔끔했다! 좋은 기능을 배운 것 같다! 다음에 많은 이미지를 불러와야 하는 코드를 짜야할 때 이 기능을 적용해보면 좋을 것 같다.
오늘 프로젝트에 기본 요구사항 구현이 끝났다 ! ! ! 너무 좋지만 아직 css부분이나 토글 기능을 구현하지 못했다. 필수는 아니지만 디자인도 정갈하게 하고싶어서 추가적으로 수정할 생각이다. 그래서 내일도 강의를 들은 후 노션 수정작업을 진행할 계획이다.