최근에 웹 프로젝트를 개발하면서 페이징 기능을 구현해야 했습니다. 이때 Promise를 사용하여 비동기적으로 페이징 데이터를 가져오는 기능을 개발하게 되었습니다. Promise는 자바스크립트에서 비동기 작업을 간편하게 처리하기 위해 도입된 객체입니다. 이번 글에서는 Promise를 사용하여 페이징 기능을 개발하는 방법에 대해 알아보겠습니다.
1. Promise란?
Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 비동기 작업을 처리할 때 일반적으로 콜백 함수를 사용하는데, Promise는 콜백 함수를 사용할 때 발생할 수 있는 콜백 지옥(callback hell) 문제를 해결하기 위해 도입되었습니다. Promise 객체는 다음과 같은 3가지 상태를 가집니다.
- 대기(pending): 비동기 작업이 아직 진행 중인 상태
- 이행(fulfilled): 비동기 작업이 성공적으로 완료된 상태
- 거부(rejected): 비동기 작업이 실패한 상태
2. Promise를 이용한 페이징 기능 개발
다음은 Promise를 이용하여 서버에서 페이징 데이터를 가져오는 기능을 구현한 예제 코드입니다. 이 예제에서는 JavaScript와 AJAX를 사용합니다.
먼저, HTML에서 페이징을 위한 버튼을 생성하고 클릭 이벤트를 등록합니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="loadData">데이터 불러오기</button>
<div id="content"></div>
<script src="script.js"></script>
</body>
</html>
다음은 JavaScript에서 Promise를 이용하여 서버로부터 페이징 데이터를 비동기적으로 가져오는 코드입니다.
// 서버로부터 페이징 데이터를 가져오는 함수
function fetchData(page) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", `/api/data?page=${page}`, true);
xhr.onload = function() {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.responseText));
} else {
reject(Error(xhr.statusText));
}
}
xhr.onerror = function() {
reject(Error("통신 오류가 발생했습니다."));
}
xhr.send();
});
}
// 페이징 버튼 클릭 이벤트 핸들러
document.getElementById("loadData").addEventListener("click", function() {
fetchData(1)
.then((data) => {
// 페이징 데이터 처리 로직
document.getElementById("content").innerText = data;
})
.catch((error) => {
console.error(error);
});
});
위의 코드에서는 fetchData 함수를 통해 서버로부터 페이징 데이터를 가져오며, Promise 객체를 반환합니다. 이후에는 then 메소드를 이용하여 데이터를 처리하는 로직을 작성하고, catch 메소드를 이용하여 에러 처리를 할 수 있습니다.
3. 마무리
이번 글에서는 Promise를 사용하여 페이징 기능을 개발하는 방법에 대해 알아보았습니다. Promise를 이용하면 비동기 작업을 간편하게 처리할 수 있으며, 콜백 지옥 문제를 해결할 수 있습니다. Promise를 활용하여 효율적인 웹 개발을 할 수 있도록 노력해보세요!
#Promise #프론트엔드 #웹개발