자리배치표 만들기 javascript 코드 설명

document.addEventListener('DOMContentLoaded', () => {
    const tableBody = document.querySelector('#seat-table tbody');

    // 자리 데이터를 API에서 불러오기
    fetch('/view?format=json')
        .then(response => response.json())
        .then(data => {
            tableBody.innerHTML = data.map(seat => createRow(seat)).join('');
        })
        .catch(error => console.error('Error fetching seat data:', error));

    // 테이블 행 생성 함수
    function createRow(seat) {
        return `
            <tr>
                <td>${seat.id}</td>
                <td>${seat.name}</td>
                <td>${seat.position}</td>
                <td>
                    <button class="btn btn-edit" onclick="editSeat(${seat.id}, '${seat.name}', '${seat.position}')">Edit</button>
                    <button class="btn btn-delete" onclick="deleteSeat(${seat.id}, this)">Delete</button>
                </td>
            </tr>
        `;
    }
});

document.addEventListener('DOMContentLoaded', () => {

• HTML 문서가 완전히 로드되고 DOM 트리가 생성된 후 실행될 함수를 등록합니다.
• 이 이벤트는 DOM을 조작하기 전에 스크립트를 실행하지 않도록 보장합니다.

    const tableBody = document.querySelector('#seat-table tbody');

• HTML에서 id가 seat-table인 <table>의 <tbody> 요소를 선택합니다.
• 선택한 요소는 테이블의 본문 부분이며, 이곳에 동적으로 데이터를 삽입합니다.

    fetch('/view?format=json')

• 서버에 /view?format=json 경로로 HTTP GET 요청을 보냅니다.
• 이 경로는 자리 데이터를 JSON 형식으로 반환하는 API 엔드포인트입니다.

        .then(response => response.json())

• 서버로부터의 응답(response)을 JSON 형식으로 파싱합니다.
• JSON 데이터는 자바스크립트 객체로 변환되어 다음 .then()으로 전달됩니다.

        .then(data => {
            tableBody.innerHTML = data.map(seat => createRow(seat)).join('');
        })

• data는 API에서 반환된 자리 데이터 배열입니다.
• data.map():
  • 데이터 배열의 각 항목(seat)에 대해 createRow(seat) 함수를 호출하여 HTML 문자열을 생성합니다.
• .join(''):
  • 생성된 HTML 문자열 배열을 하나의 문자열로 합칩니다.
• tableBody.innerHTML:
  • 생성된 HTML 문자열을 테이블 본문(tbody)의 내용으로 설정합니다.
  • 결과적으로, 테이블에 행(tr)이 추가됩니다.

        .catch(error => console.error('Error fetching seat data:', error));

• fetch 요청에서 오류가 발생하면 이를 콘솔에 출력합니다.
• 예를 들어, 서버 응답이 없거나 네트워크 문제가 있을 경우 호출됩니다.

    function createRow(seat) {

• 자리 데이터(seat)를 기반으로 하나의 테이블 행(<tr>)을 생성하는 함수입니다.

        return `
            <tr>
                <td>${seat.id}</td>
                <td>${seat.name}</td>
                <td>${seat.position}</td>
                <td>
                    <button class="btn btn-edit" onclick="editSeat(${seat.id}, '${seat.name}', '${seat.position}')">Edit</button>
                    <button class="btn btn-delete" onclick="deleteSeat(${seat.id}, this)">Delete</button>
                </td>
            </tr>
        `;

• 자리 데이터를 HTML 테이블 행(<tr>)으로 변환하여 반환합니다.
• 각 <td> 요소는 자리 데이터의 개별 속성(id, name, position)을 표시합니다.
• Edit 버튼:
  • 클릭 시 editSeat() 함수를 호출하며 자리 ID, 이름, 위치를 매개변수로 전달합니다.
• Delete 버튼:
  • 클릭 시 deleteSeat() 함수를 호출하며 자리 ID와 버튼 자체(this)를 전달합니다.
• HTML 문자열 템플릿을 사용하여 동적으로 행을 생성합니다.

아래는 코드의 한 줄씩 자세한 설명입니다.

전체 동작 요약

1. DOMContentLoaded 이벤트:
   • 문서가 완전히 로드된 후 실행됩니다.
2. 테이블 본문 요소 선택:
   • <tbody>를 찾아 데이터를 삽입할 준비를 합니다.
3. API 호출:
   • /view?format=json 경로로 데이터를 요청하여 자리 정보를 가져옵니다.
4. 데이터 처리:
   • 자리 데이터 배열을 반복(map()) 처리하여 HTML 행을 생성합니다.
   • 생성된 HTML을 테이블 본문에 삽입합니다.
5. 오류 처리:
   • 데이터 로드 실패 시 오류를 콘솔에 출력합니다.
6. 행 생성:
   • 자리 데이터를 기반으로 HTML 테이블 행(<tr>)을 동적으로 생성합니다.
   • 각 행에 “Edit” 및 “Delete” 버튼을 추가하여 자리 데이터를 수정하거나 삭제할 수 있도록 합니다.

window.editSeat = (id, name, position) => {
    const newName = prompt('Enter new name:', name);
    const newPosition = prompt('Enter new position:', position);

    if (!newName || !newPosition) return; // 입력값이 없는 경우 아무 작업도 하지 않음

    fetch(`/edit/${id}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name: newName, position: newPosition }),
    })
        .then(response => {
            if (response.ok) {
                // ID를 기반으로 행 찾기
                const row = Array.from(document.querySelectorAll('#seat-table tbody tr'))
                    .find(tr => tr.children[0].textContent === String(id));

                if (row) {
                    // Name 및 Position 셀 업데이트
                    row.children[1].textContent = newName;
                    row.children[2].textContent = newPosition;
                    alert('Seat updated successfully!');
                } else {
                    throw new Error('Row not found');
                }
            } else {
                return response.text().then(text => {
                    throw new Error(text);
                });
            }
        })
        .catch(error => {
            console.error('Error updating seat:', error);
            alert('Failed to update seat. Please try again.');
        });
};

window.editSeat = (id, name, position) => {

• 전역 함수 editSeat를 정의합니다.
• 이 함수는 자리의 id, 현재 name, 현재 position을 매개변수로 받아서 해당 자리를 수정합니다.
• 이 함수는 버튼의 onclick 속성에서 호출됩니다.

    const newName = prompt('Enter new name:', name);
    const newPosition = prompt('Enter new position:', position);

• 사용자에게 prompt 창을 띄워 새 이름(newName)과 새 위치(newPosition)를 입력받습니다.
• prompt의 두 번째 인수로 현재 이름(name)과 위치(position)을 기본값으로 제공합니다.
• 사용자가 입력하지 않고 취소를 누르면 null이 반환됩니다.

    if (!newName || !newPosition) return; // 입력값이 없는 경우 아무 작업도 하지 않음

• 만약 사용자가 입력값을 제공하지 않으면(예: 취소를 누른 경우), 함수는 아무 작업도 하지 않고 종료됩니다.

    fetch(`/edit/${id}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name: newName, position: newPosition }),
    })

• 서버에 HTTP PUT 요청을 보냅니다.
• 요청 URL은 /edit/${id}이며, id는 수정하려는 자리의 고유 ID입니다.
• 요청 본문(body)에는 수정된 이름과 위치가 JSON 형식으로 포함됩니다
• Content-Type 헤더를 설정하여 서버에 JSON 형식의 데이터를 보낸다는 것을 알립니다.

        .then(response => {
            if (response.ok) {

• 서버 응답(response)이 성공(HTTP 200)일 경우 처리합니다.

                const row = Array.from(document.querySelectorAll('#seat-table tbody tr'))
                    .find(tr => tr.children[0].textContent === String(id));

테이블 행 선택:

• #seat-table tbody tr로 테이블 본문에 있는 모든 행을 선택합니다.
• Array.from()으로 행을 배열로 변환합니다.

특정 행 찾기:

• find 메서드를 사용하여 id와 일치하는 첫 번째 행을 찾습니다.
• 행의 첫 번째 셀(children[0])의 textContent를 id와 비교합니다.

결과:

• row는 수정하려는 행을 나타냅니다.

                if (row) {
                    row.children[1].textContent = newName;
                    row.children[2].textContent = newPosition;
                    alert('Seat updated successfully!');
                } else {
                    throw new Error('Row not found');
                }

• row가 존재하면:
  • 두 번째 셀(children[1])의 내용을 새 이름(newName)으로 업데이트.
  • 세 번째 셀(children[2])의 내용을 새 위치(newPosition)으로 업데이트.
  • 업데이트 성공 메시지를 표시합니다.
• row가 존재하지 않으면:
  • “Row not found” 오류를 발생시킵니다.

            } else {
                return response.text().then(text => {
                    throw new Error(text);
                });
            }

• 서버 응답이 성공하지 않으면(response.ok가 false), 응답 본문(response.text())을 읽어 오류 메시지를 생성하고 예외를 발생시킵니다.

 .catch(error => {
            console.error('Error updating seat:', error);
            alert('Failed to update seat. Please try again.');
        });

• 위의 과정에서 오류가 발생하면(fetch, then, DOM 조작 등), 이를 catch 블록에서 처리합니다.
• 오류를 콘솔에 출력하고 사용자에게 실패 메시지를 표시합니다.

아래는 editSeat 함수의 동작을 한 줄씩 자세히 설명한 것입니다.

javascript
코드 복사
window.editSeat = (id, name, position) => {

javascript
코드 복사
    const newName = prompt('Enter new name:', name);
    const newPosition = prompt('Enter new position:', position);

javascript
코드 복사
    if (!newName || !newPosition) return; // 입력값이 없는 경우 아무 작업도 하지 않음

javascript
코드 복사
    fetch(`/edit/${id}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name: newName, position: newPosition }),
    })

javascript
코드 복사
        .then(response => {
            if (response.ok) {

javascript
코드 복사
                const row = Array.from(document.querySelectorAll('#seat-table tbody tr'))
                    .find(tr => tr.children[0].textContent === String(id));

javascript
코드 복사
                if (row) {
                    row.children[1].textContent = newName;
                    row.children[2].textContent = newPosition;
                    alert('Seat updated successfully!');
                } else {
                    throw new Error('Row not found');
                }

javascript
코드 복사
            } else {
                return response.text().then(text => {
                    throw new Error(text);
                });
            }

javascript
코드 복사
        .catch(error => {
            console.error('Error updating seat:', error);
            alert('Failed to update seat. Please try again.');
        });