[스프링 부트] 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 변수는 백틱(`)을 사용해 정의하여, 문자열 안에서 쌍따옴표(")를 자유롭게 사용할 수 있게 한다.

See more posts

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

1. index.html

More articles

[SQL 문제 풀기] 중복 제거하기(59408)

[랜덤 마라톤] 슬라임 잡고 레벨 업!(29717)

[프로그래머스] 더 맵게(42626)

[SQL 문제 풀기] 이름이 있는 동물의 아이디(59407)