[2023-10-30] TIL - 무한 스크롤

📝오늘 배운 것

1. API 요청에서 limit와 start을 활용해 데이터를 누적해서 불러오는 방법
2. isLoading 변수 활용 - API요청을 여러번 하는 버그 해결
3. 총 데이터 갯수를 이용해서 모든 데이터를 불러왔다면 API요청을 그만두는 방법
4. 더보기 버튼으로 데이터 불러오는 방법
5. 스크롤 이벤트를 이용한 무한 스크롤 방법
6. 디바운스 기법과 쓰로틀링 기법
7. 스크롤 이벤트가 계속해서 발생하는 문제를 쓰로틀링 방법으로 해결하는 방법
8. InterSection Observer 기능
9. 이미지 렌더링이 되기 전에 observe가 되는 현상 해결 방법
10. 현재 렌더링 된 이미지를 제외하고 새로운 데이터만 렌더링하는 방법(스크롤이 초기화 되지 않음)

 

💡중요하다고 생각하는 것

1. 이미지 지연 로딩

- 스크롤 이벤트를 이용하거나 IntersectionObserver 기능을 이용해서 이미지 지연 로딩 기법을 써야한다.

- 이미지 최적화를 하지 않으면 브라우저가 한번에 네트워킹할 수 있는 갯수가 정해져 있는데 마지막 이미지는 불러오고 첫번째 이미지는 불러오지 않아서 점점 밀리는 현상이 생김

 

2. 쓰로틀링 방법

- 주로 스크롤 이벤트에서 사용하는 방법이다.

- 일정 시간동안의 이벤트 중 맨 처음 이벤트만 실행하는 방법

 

https://velog.io/@seoyaon/Javascript-%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1debouncing%EA%B3%BC-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81throttling

[Javascript] 디바운싱(debouncing)과 쓰로틀링(throttling)

 

3. observe설정과 unobserve 설정을 잘해야 함

- 두 설정을 할 시기를 잘 생각해서 적용해야한다.

- unobserve 설정을 해야 이전의 observe했던 데이터가 없어져 다음 무한 스크롤 이벤트를 진행할 수 있다.

- unobseve 설정하는 시기를 잘 생각해서 적용해야한다.

 

 

🤔회고

무한 스크롤 기능은 정말 많이 봐왔던 기능이다.

그래서인지 더 재미있게 공부했던 것 같다.

보통은 스크롤 이벤트로 많이 구현하는데 

IntersectionObserver이라는 기능을 처음알 게 되었고, 아주 좋은 기능이었다.

스크롤 이벤트는 계속해서 스크롤 이벤트가 발생해야하지만 (스크롤 이벤트도 쓰로틀링이라는 기법을 사용하면 이벤트 발생을 줄일 수 있다.)

IntersectionObserver는 DOM객체를 감시하고 뷰포트에 보여질 때를 캐치할 수 있어 편리하고 효율도 좋은 것 같았다.

 

그리고 저번에 배웠던 디바운싱 기법과 쓰로틀링 기법에 아주 많은 흥미를 느꼈다.

이러한 기법들을 더 많이 알면 좋겠다는 생각이 들었다.

 

또 무한 스크롤 기능을

만약 모든 데이터를 일단 불러와서

프론트엔드쪽에서 데이터를 정해진 갯수별로 나눠 렌더링하면 어떨까?

라는 생각도 하게 되었다.