[스프링 부트] 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는 자바스크립트에서 비동기 작업의 완료 또는 실패를 나타내는 객체입니다.

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