Q. 무한 스크롤 기능을 구현할 때 10,000개의 데이터를 다루는 경우 고려해야할 점

- 무한 스크롤 기능을 구현할 때 많은 데이터를 다루는 경우 고려해야할 중요한 점!

❗️효율적인 데이터 로딩

- 사용자가 스크롤을 할 때마다 모든 10,000개의 데이터를 한 번에 로딩하는 것은 비효율적입니다. 대신, 한 번에 적은 양의 데이터만 로딩하고, 사용자가 끝에 도달할 때마다 추가 데이터를 로딩하는 방식을 채택해야함
- 서버와 클라이언트 사이의 통신에서 페이징 기법을 사용하여 한 번에 로딩되는 데이터의 양을 제한 할 수 있습니다.

❗️DOM 최적화

- 10,000개의 항목을 모두 DOM에 추가하면 브라우저의 성능 저하가 발생할 수 있음
- 가상 스크롤 기법을 사용하여 화면에 보이는 부분만 실제로 DOM에 렌더링하고, 나머지는 메모리에 보관하는 방식으로 최적화할 수 있음

❗️스크롤 위치 유지

- 새로운 데이터를 로드하거나 페이지를 이동할 때 사용자의 현재 스크롤 위치를 유지해야함
   => 이를 위해 스크롤 위치 정보를 저장하고 필요할 때 다시 적용하는 로직이 필요함

❗️로딩 인디케이터 및 에러 핸들링

- 사용자에게 데이터가 로딩 중임을 알리기 위한 로딩 인디케이터가 필요함
- 네트워크 오류나 데이터 로딩 중 발생할 수 있는 문제에 대한 적절한 에러 핸들링 및 사용자에게 해당 정보를 제공하는 것이 중요함

❗️메모리 관리

- 무한 스크롤을 계속하면 메모리 사용량이 계속 증가할 수 있음
- 불필요한 데이터나 DOM요소는 적절한 시점에서 해제하여 메모리 누수를 방지해야함

❗️SEO 고려

- 무한 스크롤 페이지의 경우 검색 엔진이 콘텐츠를 제대로 크롤링하기 어려울 수 있으므로, SEO 최적화 전략을 적용하는 것이 좋음

 

무한 스크롤 기능을 구현할 때의 주요 고려사항은 다음과 같습니다.
1. 효율적인 데이터 로딩 - 사용자가 스크롤링할 대마다 모든 데이터를 로딩하는 것은 부담스럽습니다. 대신, 페이지 네이션처럼 일부 데이터만 로딩하고 사용자가 끝에 도달하면 추가 데이터를 불러오는 것이 중요합니다.
2. DOM 최적화 - 대량의 데이터를 모두 DOM에 추가하는 것은 브라우저에 부담을 줍니다. 가상 스크롤링과 같은 기법으로 현재 보이는 부분만 DOM에 렌더링하여 성능을 최적화합니다.
3. 스크롤 위치 유지 - 데이터를 새로 로디하거나 페이지를 이동해도 사용자의 스크롤 위치를 유지하는 것이 사용자 경험에 중요합니다.
4. 로딩 표시 및 에러 핸들링 - 사용자에게 로딩 중임을 알리는 인디케이터와 에러 발생 시 적절한 피드백을 제공하는 것은 필수적입니다.
5. 메모리관리 - 무한 스크롤 도중 메모리 누수를 방지하기 위해 불필요한 데이터와 DOM요소는 적절히 해제해야 합니다.
6. SEO 최적화 - 무한 스크롤 페이지느 ㄴ검색 엔진 크롤링에 문제를 일으킬 수 있으므로 SEO를 고려한 구현 방식이 필요합니다.

 

❔크롤링(Crawling)이란?

- 크롤링은 웹 크롤러(또는 스파이더)라는 자동화된 소프트웨어가 인터넷에 잇는 웹 페이지를 방문하고 그 내용을 수집하는 과정을 의미함
- 주로 검색 엔진들이 웹의 콘텐츼를 인덱싱하기 위해 사용하며, 웹 페이지의 내용, 하이퍼링크, 메타데이터 등을 수집함
- ex) Google의 웹 크롤러는 "Googlebot'이라고 불림, Googlebot은 웹 페이지를 크롤링 하여 그 정보를 Google의 인덱스에 추가함

❔SEO(Search Engine Optimization)

- SEO는 웹사이트나 웹 페이지가 검색 엔진의 검색 결과에서 더 높은 순위를 얻도록 최적화하는 과정을 의미
- SEO의 목표는 주로 자연적(무료) 검색 결과에서의 가시성을 향상시키는 것
- SEO는 기술적, 콘텐츠, 및 외부 요소로 크게 나눌 수 있음

- 기술적 SEO
   웹사이트의 구조, URL 구조, 사이트 속도, 반응성, XML 사이트맵 등 웹사이트의 기술적 요소를 최적화하는 것을 포함

- 콘텐츠 SEO
   웹사이트의 콘텐츠를 최적화하며, 키워드 연구, 콘텐츠 품질, 메타 태그, 헤딩 등의 요소를 고려함

- 외부 SEO
   외부 링크 건설, 소셜 미디어 신호, 다른 웹사이트에서의 언급 등 외부 요소를 최적화하는 것을 포함

- SEO의 목적은 사용자에게 더 유용한 콘텐츠를 제공하고, 동시에 검색 엔진이 콘텐츠를 쉽게 파악하고 인덱싱할 수 있게 하는것

크롤링은 웹의 정보를 수집하는 과정이고, SEO는 그렇게 수집된 정보를 바탕으로 검색 엔진 결과 페이지에서의 웹사이트나 페이지의 순위를 향상시키기 위한 최적화 작업을 의미함