rest API 데이터 가져오기 와 페이징 설정

[공지사항] 지킬블로그 안내드립니다.

지킬 블로그에 대하여 알아보겠습니다.

버튼입니다

AJAX 요청을 통한 데이터 가져오기 및 테이블에 표시

window.onload = function() {
    console.log("에러 없는걸로 호출");
    let xhr = new XMLHttpRequest();
    let url = "http://127.0.0.1:8000//test01week";

    xhr.open("GET", url, true);
    xhr.onload = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let json = JSON.parse(xhr.response);
            let tableBody = document.getElementById('imageTable');
            console.log(JSON.parse(xhr.response));
            console.log(json.length);

            for (let i = 0; i < json.length; i++) {
                console.log(json[i].id);
                console.log(json[i].Detection_Time);
                console.log(json[i].image_url);

                // 테이블 행 생성
                let row = tableBody.insertRow();
                row.insertCell(0).innerText = json[i].id;
                row.insertCell(1).innerText = json[i].Detection_Time;
                row.insertCell(2).innerText = json[i].Pull_Measurement;
                row.insertCell(3).innerText = json[i].coustomer;
                
                // 이미지 셀 생성
                let imgCell = row.insertCell(4);
                let img = document.createElement('img');
                img.src = json[i].image_url;
                img.width = 50;
                imgCell.appendChild(img);

                // 행 클릭 시 이미지 표시
                row.onclick = function() {
                    displayImage(json[i].image_url);
                };
            }
        } else {
            console.log("Error");
        }
    };
    xhr.send();
};

코드 설명

• window.onload: 페이지 로드가 완료되면 실행되는 함수입니다.

• let xhr = new XMLHttpRequest();: 새로운 XMLHttpRequest 객체를 생성합니다.

• xhr.open("GET", url, true);: GET 요청을 초기화합니다.

• xhr.onload: 요청이 완료되었을 때 호출되는 콜백 함수입니다.

• if (xhr.readyState === 4 && xhr.status === 200): 요청이 완료되고 응답이 성공적으로 도착했는지 확인합니다.

• let json = JSON.parse(xhr.response);: 응답을 JSON으로 파싱합니다.

• let tableBody = document.getElementById('imageTable');: 테이블의 tbody 요소를 가져옵니다.

• for (let i = 0; i < json.length; i++)

  JSON 배열을 반복하여 각 데이터를 테이블에 추가합니다.

  • row.insertCell(0).innerText = json[i].id;: 첫 번째 열에 데이터의 ID를 추가합니다.
  • let img = document.createElement('img');: 이미지 요소를 생성합니다.
  • img.src = json[i].image_url;: 이미지의 URL을 설정합니다.
  • img.width = 50;: 이미지의 너비를 50px로 설정합니다.
  • row.onclick: 행을 클릭하면 displayImage 함수를 호출하여 이미지 URL을 전달합니다.

2. Express 서버 설정

var express = require('express');
var app = express();
app.locals.pretty = true;
app.set('view engine', 'jade');
app.set('views', './view');
app.use(express.static('public'));

app.get('profile/', function(req, res) {
    res.send('JSON.stringify');
});

코드 설명

• var express = require('express');: Express 모듈을 가져옵니다.
• var app = express();: Express 애플리케이션 객체를 생성합니다.
• app.locals.pretty = true;: HTML 템플릿을 이쁘게 출력합니다.
• app.set('view engine', 'jade');: 뷰 엔진으로 Jade(현재는 Pug)를 사용합니다.
• app.set('views', './view');: 뷰 파일의 위치를 설정합니다.
• app.use(express.static('public'));: 정적 파일(예: CSS, JS, 이미지)을 제공할 디렉터리를 설정합니다.
• app.get('profile/', function(req, res) { res.send('JSON.stringify'); });: /profile/ 경로로 GET 요청을 처리하고 'JSON.stringify' 문자열을 응답으로 보냅니다.

3. 주석 처리된 코드

주석 처리된 코드 블록은 다양한 기능을 테스트하거나 적용할 수 있는 코드 스니펫입니다.

주석된 코드 설명

• $(function(){ ... }): jQuery를 사용한 코드로, 특정 이벤트(예: 클릭) 처리와 관련된 코드입니다.
• window.onload = function() { setActiveMenu(0); ... }: 페이지 로드 시 초기화 작업을 수행하는 코드입니다.
• <img class="a" ... src="http://127.0.0.1:8000/static/img/location_on.svg"/>: 스타일이 적용된 이미지 요소를 추가하는 HTML 코드입니다.

---

페이징 전환

이 코드는 웹 페이지에서 이미지 데이터를 테이블 형식으로 표시하고, 페이지 네비게이션을 구현하는 JavaScript 코드입니다. 사용자가 페이지를 전환하면 테이블과 페이지 네비게이션이 업데이트되며, 선택한 이미지가 화면에 표시됩니다. 각 부분의 역할을 자세히 설명하겠습니다.

1. HTML 구조

<div class="pagination" id="pagination">
    <a href="#" onclick="changePage('prev')">&laquo;</a>
    <a href="#" class="active" onclick="changePage(1)">1</a>
    <a href="#" onclick="changePage(2)">2</a>
    <a href="#" onclick="changePage(3)">3</a>
    <a href="#" onclick="changePage('next')">&raquo;</a>
</div>
<div id="imageDisplay" style="width: 394px; height: 410px; overflow: hidden; background-color: #eee; border-radius: 5px;">
    <img id="displayedImage" src="" style="width: 100%; height: 100%;" />
</div>

• <div class="pagination" id="pagination">: 페이지 네비게이션 버튼들이 위치하는 div 요소입니다. id="pagination"으로 페이지 네비게이션을 제어합니다.
• <a href="#" onclick="changePage('prev')">«</a>: 이전 페이지로 이동하는 버튼입니다. changePage('prev') 함수 호출.
• <a href="#" class="active" onclick="changePage(1)">1</a>: 현재 페이지를 나타내며, 페이지 번호를 클릭하면 changePage(1) 호출.
• <div id="imageDisplay">: 선택된 이미지를 표시하는 div 요소입니다. 이미지가 여기에 표시됩니다.

2. JavaScript 코드 설명

j
const rowsPerPage = 5;
let currentPage = 1;
let jsonData = [];

window.onload = function() {
    let xhr = new XMLHttpRequest();
    let url = "http://127.0.0.1:8000/test01week";

    xhr.open("GET", url, true);
    xhr.onload = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            jsonData = JSON.parse(xhr.response);
            displayTable(jsonData, currentPage, rowsPerPage);
            setupPagination(jsonData.length, rowsPerPage);
            if (jsonData.length > 0) {
                displayImage(jsonData[0].image_url);
            }
        } else {
            console.log("Error");
        }
    };
    xhr.send();
};

• const rowsPerPage = 5;: 페이지당 표시할 데이터 행 수를 정의합니다.
• let currentPage = 1;: 현재 페이지를 나타내는 변수입니다.
• let jsonData = [];: AJAX 요청을 통해 받은 JSON 데이터를 저장하는 배열입니다.

window.onload 함수:

• let xhr = new XMLHttpRequest();: 새로운 XMLHttpRequest 객체를 생성합니다.
• xhr.open("GET", url, true);: GET 요청을 초기화합니다.
• xhr.onload: 요청 완료 시 호출되는 콜백 함수입니다. 응답을 JSON으로 파싱하고, 테이블을 표시하며 페이지 네비게이션을 설정합니다.
• displayTable(jsonData, currentPage, rowsPerPage);: 데이터를 테이블 형태로 표시하는 함수 호출.
• setupPagination(jsonData.length, rowsPerPage);: 페이지 네비게이션을 설정하는 함수 호출.
• if (jsonData.length > 0) { displayImage(jsonData[0].image_url); }: 데이터가 있으면 첫 번째 이미지 표시.

function displayTable(data, page, rows) {
    const tableBody = document.getElementById('imageTable');
    tableBody.innerHTML = "";
    let start = (page - 1) * rows;
    let end = start + rows;
    let paginatedItems = data.slice(start, end);

    for (let i = 0; i < paginatedItems.length; i++) {
        let row = tableBody.insertRow();
        row.insertCell(0).innerText = paginatedItems[i].id;
        row.insertCell(1).innerText = paginatedItems[i].Detection_Time;
        row.insertCell(2).innerText = paginatedItems[i].Pull_Measurement;
        row.insertCell(3).innerText = paginatedItems[i].coustomer;

        let imgCell = row.insertCell(4);
        let img = document.createElement('img');
        img.src = paginatedItems[i].image_url;
        img.width = 50;
        imgCell.appendChild(img);

        row.onclick = function() {
            displayImage(paginatedItems[i].image_url);
        };
    }
}

• function displayTable(data, page, rows): 데이터를 테이블에 표시하는 함수입니다.

• const tableBody = document.getElementById('imageTable');: 테이블의 tbody 요소를 가져옵니다.

• tableBody.innerHTML = "";: 테이블 내용을 비웁니다.

• let start = (page - 1) \* rows;: 현재 페이지의 시작 인덱스를 계산합니다.

• let end = start + rows;: 현재 페이지의 끝 인덱스를 계산합니다.

• let paginatedItems = data.slice(start, end);: 현재 페이지에 맞는 데이터 항목을 추출합니다.

• for (let i = 0; i < paginatedItems.length; i++)

  각 데이터 항목을 테이블에 추가합니다.

  • row.insertCell(0).innerText = paginatedItems[i].id;: ID 열 추가.
  • let img = document.createElement('img');: 이미지 요소를 생성합니다.
  • img.src = paginatedItems[i].image_url;: 이미지 URL 설정.
  • img.width = 50;: 이미지의 너비를 50px로 설정합니다.
  • row.onclick: 행 클릭 시 해당 이미지 표시.

javascript
코드 복사
function setupPagination(totalItems, rows) {
    const pagination = document.getElementById('pagination');
    pagination.innerHTML = `
        <a href="#" onclick="changePage('prev')">&laquo;</a>
    `;
    let pageCount = Math.ceil(totalItems / rows);
    for (let i = 1; i <= pageCount; i++) {
        pagination.innerHTML += `
            <a href="#" ${i === currentPage ? 'class="active"' : ''} onclick="changePage(${i})">${i}</a>
        `;
    }
    pagination.innerHTML += `
        <a href="#" onclick="changePage('next')">&raquo;</a>
    `;
}

• function setupPagination(totalItems, rows): 페이지 네비게이션을 설정하는 함수입니다.
• const pagination = document.getElementById('pagination');: 페이지 네비게이션 요소를 가져옵니다.
• pagination.innerHTML = «;: 이전 페이지 버튼 추가.
• let pageCount = Math.ceil(totalItems / rows);: 총 페이지 수를 계산합니다.
• for (let i = 1; i <= pageCount; i++): 각 페이지 번호 버튼을 생성합니다.
• pagination.innerHTML += <a href=”#” ${i === currentPage ? ‘class=”active”’ : ‘’} onclick=”changePage(${i})”>${i}</a>;: 현재 페이지 버튼에 active 클래스를 추가합니다.
• pagination.innerHTML += »;: 다음 페이지 버튼 추가.

javascript
코드 복사
function changePage(page) {
    if (page === 'prev') {
        if (currentPage > 1) {
            currentPage--;
        }
    } else if (page === 'next') {
        if (currentPage < Math.ceil(jsonData.length / rowsPerPage)) {
            currentPage++;
        }
    } else {
        currentPage = page;
    }
    displayTable(jsonData, currentPage, rowsPerPage);
    setupPagination(jsonData.length, rowsPerPage);
    if (jsonData.length > 0) {
        displayImage(jsonData[(currentPage - 1) * rowsPerPage].image_url);
    }
}

• function changePage(page): 페이지를 변경하는 함수입니다.
• if (page === 'prev'): 이전 페이지로 이동합니다.
• else if (page === 'next'): 다음 페이지로 이동합니다.
• else: 직접 입력한 페이지로 이동합니다.
• displayTable(jsonData, currentPage, rowsPerPage);: 현재 페이지의 데이터를 테이블에 표시합니다.
• setupPagination(jsonData.length, rowsPerPage);: 페이지 네비게이션을 업데이트합니다.
• if (jsonData.length > 0) { displayImage(jsonData[(currentPage - 1) \* rowsPerPage].image_url); }: 새 페이지의 첫 번째 이미지 표시.

javascript
코드 복사
function displayImage(imageUrl) {
    const displayedImage = document.getElementById('displayedImage');
    displayedImage.src = imageUrl;
}

• function displayImage(imageUrl): 선택한 이미지를 화면에 표시하는 함수입니다.
• const displayedImage = document.getElementById('displayedImage');: 이미지를 표시할 img 요소를 가져옵니다.
• displayedImage.src = imageUrl;: 이미지의 src 속성을 설정하여 이미지를 표시합니다.

---

이 코드는 데이터와 이미지의 페이지 네비게이션을 관리하고, 사용자가 테이블의 행을 클릭하여 이미지를 볼 수 있도록 합니다. 페이지가 로드되면 서버에서 데이터를 가져오고, 페이지 네비게이션과 테이블을 초기화하며, 이미지가 표시됩니다. 페이지 전환 시 테이블과 페이지 네비게이션을 업데이트하고, 새 페이지의 첫 번째 이미지를 표시합니다.