[스프링 부트] 20. SPA 방식으로 프론트엔드 그리기 (Read 구현) - 웹 게시판 v4.0

Nov 24, 2024

[스프링 부트] 20. SPA 방식으로 프론트엔드 그리기 (Read 구현) - 웹 게시판 v4.0

Contents

싱글 페이지 소스 코드

HTML


<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>blog</title>
</head>

<body>
    <nav>
        <ul>
            <li>
                <a href="javascript:void(0);" onclick="renderList()">홈</a>
            </li>
            <li>
                <a href="javascript:void(0);" onclick="renderSaveForm()">글쓰기</a>
            </li>
        </ul>
    </nav>

    <hr>

    <section id="root">

    </section>
        
    <script>
	    // 자바스크립트 내용
    </script>
</body>
</html>

💡

HTML 문서에서 자바스크립트 태그 위치

→ </body> 바로 앞이 좋습니다.

페이지 콘텐츠가 모두 로드된 후 스크립트가 실행됩니다.

페이지의 DOM 요소가 모두 로드된 후 스크립트가 DOM 조작을 해야 하는 경우에 좋습니다.

JavaScript (글 목록 불러오기)


// init
let root = document.querySelector("#root");
renderList();

// 화면 초기화 (root객체 안 내용 비우기)
function clear() {
    root.innerHTML = "";
}

// list 디자인
function renderList() {
    clear();
    let dom = `
        <table border="1">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>제목</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="list-box">
            
            </tbody>
        </table>        
    `;
    root.innerHTML = dom;
    sendList();
}

// item 생성
function renderListItem(board) {
    let dom = `                
            <td>${board.id}</td>
            <td>${board.title}</td>
            <td><a href="javascript:void(0);" onclick="renderDetail(${board.id})">상세보기</a></td>                       
    `;
    let item = document.createElement("tr"); // <tr>태그 생성
    item.innerHTML = dom;
    return item;            
}

async function sendList() {
      // 1. API 요청
      let response = await fetch("http://localhost:8080/api"); // RESTful API
      
      // response.json()은 Promise를 반환하는 비동기 함수이기 때문에 await를 붙여야 한다.
      let responseBody = await response.json(); 

      // 2. 응답 처리
      let boards = responseBody.body;

      let listBox = document.querySelector("#list-box");
      boards.forEach(board => {
          let item = renderListItem(board);
          listBox.append(item);
      });
  }

a href="javascript:void(0);"

하이퍼링크 기본 동작을 막습니다.

listBox.append(item);

append : 선택한 요소의 마지막 자식으로 새 요소를 추가합니다.
prepend : 선택한 요소의 첫 번째 자식으로 새 요소를 추가합니다.
after : 선택한 요소의 바로 다음 형제로 새 요소를 추가합니다.
before : 선택한 요소의 바로 이전 형제로 새 요소를 추가합니다.

비동기 작업

💡

동기식 작업에서는 하나의 작업이 완료될 때까지 다른 작업이 대기해야 합니다.

→ 비동기 작업은 여러 작업을 동시에 처리할 수 있도록 합니다.

1. async function

비동기 작업을 처리하는 데 사용되는 함수입니다.

함수 앞에 async 키워드를 붙여 선언하며, 이 함수는 항상 Promise를 반환합니다.

2. await

await 키워드는 async 함수 내에서만 사용할 수 있습니다.

Promise가 해결될 때까지 함수 실행을 일시 중단하고 해결되면 그 결과 값을 반환합니다.

비동기 코드를 동기식 코드처럼 작성할 수 있습니다.

3. fetch

fetch 함수는 네트워크 요청을 보내고 Promise를 반환합니다.

주로 서버에서 데이터를 가져오거나 서버에 데이터를 보낼 때 사용됩니다.

4. Promise

Promise는 자바스크립트에서 비동기 작업의 완료 또는 실패를 나타내는 객체입니다.

주로 네트워크 요청, 파일 읽기 등 시간이 걸리는 작업에서 사용됩니다.

Contents

싱글 페이지 소스 코드 비동기 작업

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>blog</title> </head> <body> <nav> <ul> <li> <a href="javascript:void(0);" onclick="renderList()">홈</a> </li> <li> <a href="javascript:void(0);" onclick="renderSaveForm()">글쓰기</a> </li> </ul> </nav> <hr> <section id="root"> </section> <script> // 자바스크립트 내용 </script> </body> </html>

// init let root = document.querySelector("#root"); renderList(); // 화면 초기화 (root객체 안 내용 비우기) function clear() { root.innerHTML = ""; } // list 디자인 function renderList() { clear(); let dom = ` <table border="1"> <thead> <tr> <th>번호</th> <th>제목</th> <th></th> </tr> </thead> <tbody id="list-box"> </tbody> </table> `; root.innerHTML = dom; sendList(); } // item 생성 function renderListItem(board) { let dom = ` <td>${board.id}</td> <td>${board.title}</td> <td><a href="javascript:void(0);" onclick="renderDetail(${board.id})">상세보기</a></td> `; let item = document.createElement("tr"); // <tr>태그 생성 item.innerHTML = dom; return item; } async function sendList() { // 1. API 요청 let response = await fetch("http://localhost:8080/api"); // RESTful API // response.json()은 Promise를 반환하는 비동기 함수이기 때문에 await를 붙여야 한다. let responseBody = await response.json(); // 2. 응답 처리 let boards = responseBody.body; let listBox = document.querySelector("#list-box"); boards.forEach(board => { let item = renderListItem(board); listBox.append(item); }); }