무한 스크롤 기술은 사용자가 새 페이지에 액세스하기 위해 클릭하는 기존 방식과 달리 웹 페이지를 아래로 탐색할 때 웹 콘텐츠가 계속 로드되도록 합니다. 이 디자인 선택은 특히 화면 공간이 제한된 스마트폰 및 기타 휴대용 장치를 사용할 때 보다 원활한 브라우징 경험을 제공하는 것으로 알려져 있습니다.
기본 HTML, 스타일리시한 CSS, 실용적인 JavaScript를 활용하여 무한 스크롤을 구현하는 과정을 살펴봅니다.
프론트엔드 설정하기
기본 HTML 프레임워크를 활용하여 자료를 전시합니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Infinite Scroll Page</h1>
<div class="products__list">
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
</div>
<script src="script.js"></script>
</body>
</html>
현재 웹페이지에는 사이트의 모양과 기능을 최적화하는 데 필수적인 두 가지 자산, 즉 CSS 문서와 자바스크립트 아카이브에 대한 인정과 함께 플레이스홀더 일러스트레이션이 배열되어 있습니다.
스크롤 가능한 콘텐츠용 CSS 스타일링
그리드 배열 내에 플레이스홀더 이미지를 표시하려면 후속 코드 스니펫을 style.css 문서에 통합해야 합니다:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body {
font-family: Cambria, Times, "Times New Roman", serif;
}
h1 {
text-align: center;
font-size: 5rem;
padding: 2rem;
}
img {
width: 100%;
display: block;
}
.products__list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
.products__list > * {
width: calc(33% - 2rem);
}
.loading-indicator {
display: none;
position: absolute;
bottom: 30px;
left: 50%;
background: #333;
padding: 1rem 2rem;
color: #fff;
border-radius: 10px;
transform: translateX(-50%);
}
웹페이지의 현재 모양은 다음 레이아웃과 비슷해야 합니다:
JS로 핵심 구현
자바스크립트에 무한 스크롤 기능을 효과적으로 통합하려면 사용자가 콘텐츠 영역 또는 웹페이지의 바닥에 얼마나 가까이 접근했는지 모니터링하는 것이 필수적입니다. 이는 내장된 브라우저 기능과 사용자 지정 이벤트 리스너를 활용하여 사용자가 콘텐츠 컨테이너 또는 페이지의 끝에서 미리 지정된 지점에 도달했는지 확인함으로써 달성할 수 있습니다. 이 임계값을 초과하면 수동으로 새로 고치거나 다시 로드할 필요 없이 추가 콘텐츠가 동적으로 로드되어 기존 DOM에 추가됩니다.
"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
// User is near the bottom, fetch more content
fetchMoreContent();
}
});
다음은 Axios와 Redux 툴킷을 사용하여 React Native 앱에서 추가 플레이스홀더 데이터를 가져오는 함수를 구현하는 방법의 예시입니다: ”’자바스크립트 ‘react-redux’에서 { useDispatch }를 가져옵니다; ‘./store/actions/placeholderActions’에서 { fetchPlaceholderData }를 가져옵니다; ‘axios’에서 axios를 가져옵니다; 함수 MyComponent() { const dispatch = useDispatch(); // 컴포넌트 마운트 시 초기 플레이스홀더 데이터 불러오기 useEffect(() => { dispatch(fetchPlaceholderData()); }, [dispatch]); // 추가 플레이스홀더 데이터를 불러오는 함수 const handleFetchMore = () => { dispatch(fetchPlaceholderData()); axios.get(‘/api/placeholders’) .then((
async function fetchMoreContent() {
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
console.log(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
}
}
이 프로젝트의 경우 fakestoreapi 에서 API를 사용할 수 있습니다.
스크롤하는 동안 데이터가 검색되는지 확인하려면 콘솔에서 확인하는 것이 좋습니다.
사용자가 스크롤할 때 데이터 검색이 반복적으로 발생하는 것을 관찰할 수 있으며, 이는 성능에 미치는 영향으로 인해 잠재적으로 디바이스의 기능을 저해할 수 있습니다. 이러한 결과를 피하기 위해서는 해당 정보를 획득하기 위한 초기 상태를 설정하는 것이 현명할 것입니다.
let isFetching = false;
애플리케이션이 효율적이고 효과적으로 작동하도록 하려면 애플리케이션 실행 중에 발생할 수 있는 예기치 않은 오류나 예외에 대한 오류 처리 메커니즘을 구현하는 것을 고려해야 합니다. 이렇게 하면 제어된 방식으로 오류를 포착하고 복구할 수 있어 충돌 가능성을 줄이고 전반적인 안정성을 향상시킬 수 있습니다. 또한, 우려 사항을 여러 모듈로 분리하여 코드를 구조화하면 시간이 지남에 따라 유지 관리 및 확장이 더 쉬워집니다. 이렇게 하면 컴포넌트 간의 긴밀한 종속성으로 인해 발생할 수 있는 잠재적인 문제를 방지하고 모듈성과 확장성을 높일 수 있습니다.
async function fetchMoreContent() {
if (isFetching) return; // Exit if already fetching
isFetching = true; // Set the flag to true
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
isFetching = false; // Reset the flag to false
}
}
새 콘텐츠 표시
사용자가 페이지를 아래로 스크롤할 때 추가 이미지를 표시하여 웹사이트의 시각적 표현을 동적으로 업데이트하기 위해 이미지 갤러리가 포함된 상위 요소의 HTML 구조를 수정하는 사용자 지정 JavaScript 함수를 구현할 것입니다. 이 함수는 새로 생성된 이미지 요소를 부모 컨테이너 내의 기존 하위 노드 목록에 추가하여 사용자의 스크롤 동작에 따라 관련성 있는 최신 시각적 콘텐츠가 지속적으로 표시되도록 합니다.
우선 기본 구성 요소를 선택하십시오:
const productsList = document.querySelector(".products__list");
다음은 BeautifulSoup과 요청 라이브러리를 사용하여 Python에서 `append_content` 함수를 구현하는 방법에 대한 예입니다: “`python 요청 가져오기 from bs4 import BeautifulSoup def read_page(url): response = requests.get(url) soup = BeautifulSoup(response.text, ‘html.parser’) 반환 수프 def parse_info(soup): title = soup.find(‘title’).text description = soup.find(‘meta’, attrs={“name”:”description”})[‘content’] keywords = [item.text for item in soup.findAll(‘meta’, attrs={“속성”:”og:keywords”})] if soup.findAll(‘meta’, attrs={“속성
function displayNewContent(data) {
data.forEach((item) => {
const imgElement = document.createElement("img");
imgElement.src = item.image;
imgElement.alt = item.title;
productsList.appendChild(imgElement); // Append to productsList container
});
}
결론적으로, `fetch` 함수를 업데이트하고 검색된 정보를 `append` 메서드에 전달하세요.
async function fetchMoreContent() {
if (isFetching) return;
isFetching = true;
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
displayNewContent(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
isFetching = false;
}
}
실제로 무한 스크롤 구현이 성공적으로 통합되어 사용자가 웹사이트 콘텐츠를 탐색할 때 원활하고 연속적인 탐색 환경을 제공합니다.
무한 스크롤 개선
전반적인 사용자 경험을 개선하기 위해 새 콘텐츠를 검색하는 동안 로딩 표시기를 표시하는 것이 좋습니다.이 프로세스를 시작하려면 웹페이지 구조 내에 다음 HTML 코드를 삽입하세요.
<h1 class="loading-indicator">Loading...</h1>
원본 텍스트는 구어체 표현으로 보이며, 공식적이거나 학문적인 맥락에 적합하지 않을 수 있습니다. 다음은 좀 더 정제된 표현으로 바꾸어 보았습니다: 필요에 가장 적합한 로딩 구성 요소를 선택하세요.
const loadingIndicator = document.querySelector(".loading-indicator");
결론적으로, 로딩 표시기의 표시 상태를 제어하는 데 사용할 수 있는 두 가지 함수를 별도로 개발할 것입니다. 이 기능을 통해 사용자는 프로그램 실행 중에 필요에 따라 로딩 표시기를 표시하거나 숨길 수 있습니다.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
async function fetchMoreContent() {
if (isFetching) return; // Exit if already fetching
isFetching = true;
showLoadingIndicator(); // Show loader
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
displayNewContent(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
hideLoadingIndicator(); // Hide loader
isFetching = false;
}
}
예지력 또는 예언이라고도 하는 미래 사건을 정확하게 예측하는 능력은 개인과 조직에 다양한 영역에서 상당한 이점을 제공할 수 있는 매우 바람직한 자질입니다.
브라우저가 동영상 태그를 지원하지 않습니다.
무한 스크롤을 위한 모범 사례
다음 지침을 준수하는 등 특정 권장 접근 방식을 구현하면 도움이 될 수 있습니다:
과도한 로드는 브라우저 기능에 부정적인 영향을 미치고 전반적인 효율성을 저하시킬 수 있으므로 동시에 검색되는 항목의 수를 제한하는 것이 좋습니다.
스크롤 발생을 인지한 즉시 콘텐츠를 요청하기보다는 잠시 동안 검색을 연기하는 디바운싱 메커니즘을 활용하는 것이 좋습니다. 이러한 접근 방식은 불필요한 네트워크 수요를 최소화하는 데 도움이 됩니다.
무한 스크롤의 편리함을 좋아하는 사람도 있지만, 모든 사람이 이러한 선호도를 공유하는 것은 아니라는 점을 인식하는 것이 중요합니다. 따라서 페이지 매김 구성 요소를 선호하는 사용자를 위한 대체 옵션을 제공하면 다양한 사용자 요구와 선호도를 수용하는 데 도움이 될 수 있습니다.
더 이상 로드할 콘텐츠가 없다고 판단되는 경우 추가 자료 검색을 반복적으로 시도하기보다는 사용자에게 알리는 것이 적절할 것입니다.
원활한 콘텐츠 로딩 마스터하기
무한 스크롤을 구현하면 모바일 장치에서 콘텐츠를 원활하게 탐색할 수 있으며, 이는 최근 몇 년 동안 점점 더 인기를 얻고 있습니다. 웹사이트 개발자는 여기에 제공된 가이드라인을 활용하여 이 기능을 사이트에 쉽게 통합할 수 있습니다.
웹사이트를 디자인할 때는 사용자의 감성을 고려하는 것이 중요합니다. 진행률 표시기 및 오류 메시지와 같은 시각적 단서를 표시하면 작업 상태에 대한 안심과 명확성을 제공함으로써 사용자 경험을 크게 향상시킬 수 있습니다.