소개
이 프로젝트에서는 강좌 목록에 대한 페이지네이션 (pagination) 기능을 구현하는 방법을 배우게 됩니다. 페이지네이션은 프론트엔드 웹 개발에서 필수적인 기능이며, 이 프로젝트는 JSON 파일에서 데이터를 가져오고, 데이터를 페이지네이션 형식으로 표시하며, 이전 및 다음 페이지 기능을 처리하는 과정을 안내합니다.
👀 미리보기
🎯 과제
이 프로젝트에서 다음을 배우게 됩니다:
- Axios 라이브러리를 사용하여 JSON 파일에서 데이터를 가져오는 방법
- 강좌 데이터를 페이지당 5 개의 항목으로 페이지네이션 형식으로 표시하는 방법
- 이전 및 다음 페이지 버튼의 기능을 구현하는 방법
- 적절한 경우 (첫 페이지 및 마지막 페이지) 이전 및 다음 페이지 버튼을 비활성화하는 방법
- 현재 페이지 번호와 총 페이지 수를 표시하도록 페이지네이션 표시를 업데이트하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다:
- Axios 를 사용하여 JSON 파일에서 데이터를 가져오기
- 강좌 목록에 대한 페이지네이션 기능 구현
- 이전 및 다음 페이지 버튼과의 사용자 상호 작용 처리
- 현재 페이지를 기반으로 버튼을 조건부로 비활성화
- 현재 페이지와 총 페이지 수를 표시하도록 UI 업데이트
프로젝트 구조 설정
이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:
프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:
├── css
│ └── bootstrap.css
├── index.html
└── js
├── axios.js
├── carlist.json
└── index.js
이 구조에서:
css/bootstrap.css는 프로젝트에서 사용되는 Bootstrap 스타일 파일입니다.index.html은 메인 웹 페이지입니다.js/carlist.json은 요청에 필요한 데이터 파일입니다.js/axios.js는 요청에 사용되는 axios 파일입니다.js/index.js는 완성해야 하는 JavaScript 파일입니다.
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다. 효과는 다음과 같습니다:
JSON 파일에서 데이터 가져오기
이 단계에서는 carlist.json 파일에서 데이터를 가져와 data 변수에 저장하는 방법을 배웁니다.
js/index.js파일을 찾아// TODO: Requesting data from the carlist.json file주석을 찾습니다.axios.get()메서드를 사용하여./js/carlist.json파일에서 데이터를 가져옵니다.- 데이터를 가져오면
data변수에 저장합니다. - 총 항목 수를 페이지당 항목 수 (5) 로 나누어 최대 페이지 수를 계산합니다. 이 값을
maxPage변수에 저장합니다. showPagination()함수를 호출하고maxPage와pageNum(기본적으로 1 로 설정됨) 을 인수로 전달하여 현재 페이지 번호와 총 페이지 수를 표시합니다.getPageData()함수를 호출하고data를 인수로 전달하여 첫 번째 페이지 (항목 1-5) 에 대한 데이터를 가져옵니다. 이를pageData변수에 저장합니다.renderHtml()함수를 호출하고pageData를 인수로 전달하여 첫 번째 페이지에 대한 HTML 을 렌더링합니다.
코드는 다음과 같아야 합니다:
let data;
let pageData;
// TODO: Requesting data from the carlist.json file
axios.get("./js/carlist.json").then((res) => {
data = res.data;
maxPage = Math.ceil(data.length / 5);
showPagination(maxPage, pageNum);
pageData = getPageData(data);
renderHtml(pageData);
});
이전 페이지 기능 구현
이 단계에서는 이전 페이지 버튼의 기능을 구현하는 방법을 배웁니다.
- 이전 페이지 버튼 (
prev.onclick) 에 대한 클릭 이벤트 핸들러를 찾습니다. - 이벤트 핸들러 내부에서 먼저 다음 페이지 버튼 (
next.classList.remove("disabled")) 에서disabled클래스를 제거합니다. pageNum변수를 1 씩 감소시켜 이전 페이지로 이동합니다.pageNum이 1 보다 작거나 같으면 첫 번째 페이지에 있다는 의미이므로 이전 페이지 버튼 (this.classList.add("disabled")) 에disabled클래스를 추가하고pageNum을 1 로 설정합니다.showPagination()함수를 호출하고maxPage와pageNum을 인수로 전달하여 페이지 매김 표시를 업데이트합니다.getPageData()함수를 호출하고data를 인수로 전달하여 현재 페이지에 대한 데이터를 가져옵니다. 이를pageData변수에 저장합니다.renderHtml()함수를 호출하고pageData를 인수로 전달하여 현재 페이지에 대한 HTML 을 렌더링합니다.
코드는 다음과 같아야 합니다:
// Click on the previous page
let prev = document.getElementById("prev");
prev.onclick = function () {
// TODO
next.classList.remove("disabled");
pageNum--;
if (pageNum <= 1) {
this.classList.add("disabled");
pageNum = 1;
}
showPagination(maxPage, pageNum);
pageData = getPageData(data);
renderHtml(pageData);
};
다음 페이지 기능 구현
이 단계에서는 다음 페이지 버튼의 기능을 구현하는 방법을 배웁니다.
- 다음 페이지 버튼 (
next.onclick) 에 대한 클릭 이벤트 핸들러를 찾습니다. - 이벤트 핸들러 내부에서 먼저 이전 페이지 버튼 (
prev.classList.remove("disabled")) 에서disabled클래스를 제거합니다. pageNum변수를 1 씩 증가시켜 다음 페이지로 이동합니다.pageNum이maxPage보다 크거나 같으면 마지막 페이지에 있다는 의미이므로 다음 페이지 버튼 (this.classList.add("disabled")) 에disabled클래스를 추가하고pageNum을maxPage로 설정합니다.showPagination()함수를 호출하고maxPage와pageNum을 인수로 전달하여 페이지 매김 표시를 업데이트합니다.getPageData()함수를 호출하고data를 인수로 전달하여 현재 페이지에 대한 데이터를 가져옵니다. 이를pageData변수에 저장합니다.renderHtml()함수를 호출하고pageData를 인수로 전달하여 현재 페이지에 대한 HTML 을 렌더링합니다.
코드는 다음과 같아야 합니다:
// Click on the next page
let next = document.getElementById("next");
next.onclick = function () {
// TODO
prev.classList.remove("disabled");
pageNum++;
if (pageNum >= maxPage) {
this.classList.add("disabled");
pageNum = maxPage;
}
showPagination(maxPage, pageNum);
pageData = getPageData(data);
renderHtml(pageData);
};
이제 코스 목록에 대한 페이지 매김 기능 구현을 완료했습니다. 이전 및 다음 페이지 버튼을 클릭하여 코스 데이터가 올바르게 표시되는지 확인하여 기능을 테스트할 수 있습니다.
완료된 모든 기능의 GIF 는 다음과 같습니다:
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
