[스프링 부트] 27. 게시판 v4 SPA 렌더링 구현

Nov 22, 2024

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>
    // init
    let root = document.querySelector("#root");
    renderList();

    // saveForm 디자인
    function renderSaveForm() {
        clear();
        let dom = `
                <form>
                    <input type="text" id="title" placeholder="제목"><br>
                    <input type="text" id="content" placeholder="내용"><br>
                    <button type="button" onclick="sendSave();">글쓰기</button>
                </form>
            `;
        root.innerHTML = dom;
    }

    // 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>
                <button onclick="renderDetail();">상세보기테스트</button>
            `;
        root.innerHTML = dom;
        sendList();
    }

    function renderListItem() {
        let dom = `
                <tr>
                    <td>1</td>
                    <td>제목1</td>
                    <td><a href="javascript:void(0);" onclick="renderDetail()">상세보기</a></td>
                </tr>
            `;
        return dom;
    }

    // updateForm 디자인
    function renderUpdateForm() {
        clear();
        let dom = `
                <form>
                    <input type="number" value="1" readonly><br>
                    <input type="text" id="title" placeholder="제목" value="제목1"><br>
                    <input type="text" id="content" placeholder="내용" value="내용1"><br>
                    <input type="text" value="2024.11.22" readonly><br>
                    <button type="button" onclick="sendUpdate();">수정</button>
                </form>
            `
        root.innerHTML = dom;
    }

    // detail 디자인
    function renderDetail() {
        clear();
        let dom = `
                <form>
                    <button type="button" onclick="sendDelete();">삭제</button>
                </form>
                <form>
                    <button type="button" onclick="renderUpdateForm();">수정</button>
                </form>
                <div>
                    번호: 1<br>
                    제목: 제목1<br>
                    내용: 내용1<br>
                    작성일: 2024.11.22<br>
                </div>
            `
        root.innerHTML = dom;
    }


    // 화면 초기화
    function clear() {
        root.innerHTML = "";
    }
</script>

</body>

</html>

a 태그에 하이퍼링크 동작을 막고, onclick 이벤트로 필요한 함수를 실행하도록 설정한다.

root 요소를 querySelector로 선택해, 각 함수에서 이 root에 렌더링 작업을 한다.

렌더링 함수가 호출되면 먼저 clear() 함수를 실행해 root의 내용을 초기화한다.

각 렌더링 함수에서 dom 변수를 정의하여 root 안에 그릴 내용을 작성하고, 이 dom을 root.innerHTML로 설정해 화면에 표시한다.

dom 변수는 백틱(`)을 사용해 정의하여, 문자열 안에서 쌍따옴표(")를 자유롭게 사용할 수 있게 한다.

Contents

1. index.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> // init let root = document.querySelector("#root"); renderList(); // saveForm 디자인 function renderSaveForm() { clear(); let dom = ` <form> <input type="text" id="title" placeholder="제목"><br> <input type="text" id="content" placeholder="내용"><br> <button type="button" onclick="sendSave();">글쓰기</button> </form> `; root.innerHTML = dom; } // 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> <button onclick="renderDetail();">상세보기테스트</button> `; root.innerHTML = dom; sendList(); } function renderListItem() { let dom = ` <tr> <td>1</td> <td>제목1</td> <td><a href="javascript:void(0);" onclick="renderDetail()">상세보기</a></td> </tr> `; return dom; } // updateForm 디자인 function renderUpdateForm() { clear(); let dom = ` <form> <input type="number" value="1" readonly><br> <input type="text" id="title" placeholder="제목" value="제목1"><br> <input type="text" id="content" placeholder="내용" value="내용1"><br> <input type="text" value="2024.11.22" readonly><br> <button type="button" onclick="sendUpdate();">수정</button> </form> ` root.innerHTML = dom; } // detail 디자인 function renderDetail() { clear(); let dom = ` <form> <button type="button" onclick="sendDelete();">삭제</button> </form> <form> <button type="button" onclick="renderUpdateForm();">수정</button> </form> <div> 번호: 1<br> 제목: 제목1<br> 내용: 내용1<br> 작성일: 2024.11.22<br> </div> ` root.innerHTML = dom; } // 화면 초기화 function clear() { root.innerHTML = ""; } </script> </body> </html>