Promise를 사용한 무한 스크롤 구현
무한 스크롤은 사용자가 스크롤을 하면 자동으로 콘텐츠를 추가로 불러오는 방식을 말합니다. 이는 웹 애플리케이션에서 매우 일반적인 기능이며 사용자 경험을 개선하는 데 도움이 됩니다. 이번 글에서는 Promise를 사용하여 무한 스크롤을 구현하는 방법에 대해 알아보겠습니다.
스크롤 이벤트 감지
우리는 먼저, 스크롤 이벤트를 감지하는 JavaScript 코드를 작성해야 합니다. 스크롤 이벤트를 감지하면 새로운 콘텐츠를 불러올 준비가 된 것입니다.
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
// 스크롤이 페이지 하단에 도달했을 때 추가 작업을 수행합니다.
// 이곳에 Promise 코드를 추가할 예정입니다.
}
});
Promise를 활용한 데이터 요청
무한 스크롤에는 서버로부터 추가 데이터를 가져와야 합니다. 이를 위해 Promise를 사용하여 비동기 작업을 처리할 수 있습니다. 예를 들어, Axios 라이브러리를 사용하여 서버에서 데이터를 가져오는 Promise를 생성할 수 있습니다.
function fetchData() {
return new Promise((resolve, reject) => {
axios.get('/api/data')
.then(response => {
resolve(response.data);
})
.catch(error => {
reject(error);
});
});
}
스크롤 이벤트와 Promise 연결
이제 스크롤 이벤트 감지 코드와 Promise를 연결해야 합니다. 스크롤 이벤트가 발생할 때마다 데이터를 요청하고, 데이터 요청이 완료되면 화면에 콘텐츠를 추가하는 작업을 수행합니다.
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
fetchData()
.then(data => {
// 데이터를 받아와서 화면에 추가 작업을 수행합니다.
})
.catch(error => {
console.error('데이터 요청 실패:', error);
});
}
});
마무리
위의 코드 예시에서는 Promise를 사용하여 무한 스크롤을 구현하는 방법을 보여주었습니다. 스크롤 이벤트를 감지하여 새로운 데이터를 요청하고 받아온 데이터를 화면에 추가하는 방식으로 동작합니다. Promise를 사용하면 비동기 작업을 보다 간편하게 처리할 수 있으며, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.