infiniteScroll(무한 스크롤)
: 웹 애플리케이션에서 페이지가 스크롤되면서 동적으로 컨텐츠를 무한 로딩하는 기법을 말한다.
비동기로 데이터를 가져와서 처리하는 방법으로 infinite scroll을 구현하는 방법은 아래와 같다.
1. 스크롤 이벤트 감지하기
스크롤 이벤트를 감지하여 사용자가 스크롤을 내릴 때 마다 이벤트 핸들러를 호출한다. 이를 통해 스크롤 위치를 추적하고 새로운 데이터를 가져올 시점을 판단할 수 있다.
무한 스크롤에서는 세로 스크롤만 감지하면 되기 때문에 height와 관련된 값을 참고해야 한다.
- scrollHeight 는 화면에 보이지 않는 높이도 포함된 페이지의 총 높이, 즉 요소에 들어있는 컨텐츠의 전체 높이로 padding과 border가 포함된다.
- scrollTop 은 웹 페이지에서 스크롤바가 수직으로 얼마나 스크롤되었는지를 나타내는 속성이다.
- clientHeight 는 사용자에게 보여지는 페이지의 높이를 말한다.
스크롤된 높이를 나타내는 scrollTop과 사용자에게 보여지는 페이지의 높이인 clientHeight를 더한 값이 전체 높이인 scrollHeight 보다 같거나 크다면 사용자가 페이지의 끝에 도달한 것이고 이를 통해 스크롤 이벤트를 감지할 수 있다.
2. 데이터 가져오기
데이터를 가져오기 위해 비동기 요청을 보내야 하는데, 일반적으로 Ajax, Fetch API, 또는 axios와 같은 라이브러리를 사용하여 서버로부터 데이터를 요청한다. 필요한 데이터를 가져오기 위해 요청 URL에 쿼리 매개변수를 추가하거나 페이지 번호 등을 전달할 수 있다.
axios는 HTTP 클라이언트 라이브러리로 비동기 방식으로 HTTP 데이터 요청을 실행한다.
- axios는 Ajax 호출을 하게 도와주는 역할을 한다.
- axios란 XMLHttpRequest를 이용해 자바스크립트에서 비동기 통신으로 서버와 클라이언트 간 XML 데이터를 주고 받을 수 있도록 하는 기술이다.
- XMLHttpRequest란 브라우저와 서버 간 데이터를 전송할 수 있게 하는 Web API이다.
즉, axios는 클라이언트와 서버가 비동기 방식으로 데이터를 주고받기 위해 통신하는 것을 도와주는 라이브러리라고 생각하면 되는 것이다.
3. 데이터 처리 및 렌더링하기
새로운 데이터를 받으면 해당 데이터를 처리하여 화면에 추가하는데, 이를 위해 데이터를 HTML로 변환하거나 템플릿 엔진을 사용하여 동적으로 UI를 생성할 수 있다. 새로운 컨텐츠를 삽입하는 방법은 프레임워크나 라이브러리에 따라 다를 수 있는데, 일반적으로는 DOM 조작을 통해 새로운 컨텐츠를 추가하고 React나 Vue.js 와 같은 프론트엔드 프레임워크를 사용할 수도 있다.
4. 스크롤 위치 갱신하기
데이터를 가져온 후에도 스크롤 위치를 정확하게 처리해야 한다. 사용자가 스크롤의 위치를 변경했을 때 새로운 데이터를 가져오기 위해 스크롤 위치를 추적하고, 새로운 데이터가 추가된 후에도 사용자가 이전 위치로 스크롤을 이동할 수 있도록 해야한다.
5. 추가 데이터 로딩하기
필요한 경우 데이터를 비동기적으로 가져오는 중에도 추가 데이터를 로드할 일이 생길 수 있다. 이를 위해 스크롤이 특정 지점에 도달했을 때 추가 데이터를 가져오도록 설정하고, 가져온 데이터를 이전 데이터와 결합하여 표시한다.
6. 오류 처리
데이터를 가져오는 중에 오류가 발생할 수 있는데, 네트워크 오류나 서버 오류 등을 처리하여 사용자에게 적절한 오류 메시지를 제공해야 한다.
참고
+ chat gpt
'제로베이스 14기' 카테고리의 다른 글
[제로베이스] 프론트엔드 스쿨 후기 (3) | 2024.01.02 |
---|---|
[제로베이스]JavaScript 미션 회고 (0) | 2023.06.21 |
noopener, norenoreferrer, nofollow를 사용하는 이유 (0) | 2023.06.03 |
[제로베이스]프론트엔드 스쿨 두 달차 요약 (0) | 2023.05.24 |
CSS animation 최적화 기법 (0) | 2023.05.20 |