현재 페이지에서 메뉴 별 페이지를 띄우고 또 메뉴 별로 비동기 페이지 네이션을 해주는 자바 스크립트 짜줘
ChatGPT
요청하신 자바스크립트 페이지 레이아웃 및 비동기 페이지네이션 코드를 작성해봤습니다. 이 코드는 기본적인 HTML 페이지와 함께 사용하셔야 합니다.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Async Page Navigation</title>
</head>
<body>
<div id="menu">
<button class="menu-button" data-menu="menu1">Menu 1</button>
<button class="menu-button" data-menu="menu2">Menu 2</button>
<button class="menu-button" data-menu="menu3">Menu 3</button>
</div>
<div id="content"></div>
<button id="prev">Previous</button>
<button id="next">Next</button>
</body>
<script src="script.js"></script>
</html>JavaScript (script.js):
let currentPage = 1;
let currentMenu = "";
const loadPage = (menu, page) => {
fetch(`/${menu}/page/${page}`)
.then(response => response.text())
.then(data => {
document.getElementById("content").innerHTML = data;
});
};
document.querySelectorAll(".menu-button").forEach(button => {
button.addEventListener("click", (e) => {
currentMenu = e.target.getAttribute("data-menu");
currentPage = 1;
loadPage(currentMenu, currentPage);
});
});
document.getElementById("prev").addEventListener("click", () => {
if (currentPage > 1) {
currentPage -= 1;
loadPage(currentMenu, currentPage);
}
});
document.getElementById("next").addEventListener("click", () => {
currentPage += 1;
loadPage(currentMenu, currentPage);
});이 코드는 간단한 비동기 페이지네이션을 제공합니다. 'menu-button' 클래스를 가진 각 버튼이 클릭되면, 해당 메뉴의 첫 번째 페이지가 로드됩니다. "이전" 및 "다음" 버튼을 사용하여 메뉴 내의 페이지를 앞뒤로 이동할 수 있습니다.
서버에서 페이지 데이터를 제공하려면 /${menu}/page/${page} URL이 적절하게 응답하도록 해야 합니다. 이 코드는 서버가 HTML을 반환한다고 가정하고 있습니다. 서버 응답이 JSON이거나 다른 형식인 경우 코드를 적절히 수정해야 합니다.
이 코드는 기본적인 구현에 불과하므로 실제 사용에 필요한 에러 처리, UI/UX 개선 등은 추가적으로 구현해야 합니다.
자 이제 코드를 한 줄씩 설명해라
ChatGPT
let currentPage = 1;
let currentMenu = "";두 개의 변수, currentPage와 currentMenu를 선언했습니다. currentPage는 현재 보고 있는 페이지 번호를 나타내며, currentMenu는 현재 선택된 메뉴를 나타냅니다.
const loadPage = (menu, page) => {
fetch(`/${menu}/page/${page}`)
.then(response => response.text())
.then(data => {
document.getElementById("content").innerHTML = data;
});
};이 함수는 비동기 방식으로 페이지의 내용을 로드하는 역할을 합니다. fetch 함수를 사용하여 서버에 요청을 보내고, 해당 페이지의 데이터를 받아와서 HTML 요소인 "content"에 출력합니다.
document.querySelectorAll(".menu-button").forEach(button => {
button.addEventListener("click", (e) => {
currentMenu = e.target.getAttribute("data-menu");
currentPage = 1;
loadPage(currentMenu, currentPage);
});
});이 코드는 "menu-button" 클래스를 가진 모든 HTML 요소에 클릭 이벤트를 등록합니다. 이 이벤트가 발생하면, 현재 선택된 메뉴와 페이지 번호를 업데이트하고, 해당 페이지의 내용을 로드합니다.
document.getElementById("prev").addEventListener("click", () => {
if (currentPage > 1) {
currentPage -= 1;
loadPage(currentMenu, currentPage);
}
});이 코드는 "prev" id를 가진 HTML 요소(이전 페이지 버튼)에 클릭 이벤트를 등록합니다. 이 버튼이 클릭되면, 현재 페이지 번호를 감소시키고, 그 페이지의 내용을 로드합니다.
document.getElementById("next").addEventListener("click", () => {
currentPage += 1;
loadPage(currentMenu, currentPage);
});이 코드는 "next" id를 가진 HTML 요소(다음 페이지 버튼)에 클릭 이벤트를 등록합니다. 이 버튼이 클릭되면, 현재 페이지 번호를 증가시키고, 그 페이지의 내용을 로드합니다.
이렇게 각 줄에 대해 설명드렸습니다. 이 코드는 비동기적으로 페이지 내용을 로드하고, 사용자가 메뉴를 선택하거나 페이지를 넘길 때 해당 내용을 보여주는 역할을 합니다.
'개발자가 되는 방법' 카테고리의 다른 글
| 데브옵스(또는 Dev Ops) 란 ? (0) | 2023.07.12 |
|---|---|
| [리뷰] 애자일, 테스트와 생산성에 관한 고려사항 (0) | 2023.07.06 |
| 반응형 정사각형 만들기 (0) | 2023.05.31 |
| Dom 요소의 좌표 구하기 (0) | 2023.05.31 |
| CSS 가상요소 선택자 (0) | 2023.05.30 |