소개
이 프로젝트에서는 Vue.js 를 사용하여 가상 스크롤링 목록을 구현하는 방법을 배우게 됩니다. 가상 스크롤링은 대규모 데이터 세트의 가시 영역만 렌더링하는 기술로, 비가시 영역의 데이터를 렌더링하거나 부분적으로 렌더링하지 않습니다. 이는 매우 높은 렌더링 성능을 달성하며, 소량의 데이터로 많은 양의 데이터를 렌더링하는 데 적합합니다.
👀 미리보기
🎯 과제
이 프로젝트에서는 다음을 배우게 됩니다.
axios라이브러리를 사용하여 데이터를 비동기적으로 로드하고 렌더링하는 방법- 가시 목록 항목만 렌더링하도록 가상 스크롤링 기능을 구현하는 방법
- 현재 스크롤 위치를 기반으로 가시 목록 항목의 시작 및 종료 인덱스를 계산하는 방법
- 가시 영역 외부의 추가 목록 항목을 렌더링하기 위해 버퍼를 사용하여 렌더링 성능을 최적화하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다.
- 렌더링 성능을 향상시키기 위해 가상 스크롤링 기능을 구현할 수 있습니다.
- Vue.js 컴포넌트에서 데이터를 비동기적으로 로드하고 렌더링할 수 있습니다.
- 현재 스크롤 위치를 기반으로 가시 목록 항목을 계산할 수 있습니다.
- 스크롤 중에 흰색 화면을 방지하기 위해 버퍼를 사용할 수 있습니다.
