jQuery AJAX 통신 요청 index (part 1)

더미 데이터에 들어있는 이 친구들은 가방에 담지 말고, 디자인으로만 뿌릴 것이다!

[ index.mustache ]

{{> layout/header}}

<div class="container p-5">

    <table class="table table-striped">

<!-- 컬럼 -->
        <thead> 
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>내용</th>
            <th>작성자</th>
            <th></th>
        </tr>
        </thead>
        <tbody>

<!-- 반복 될 부분 INDEX 요청 시 이것만 줄 것-->
        <tr>
            <td>5</td>
            <td>제목5</td>
            <td>내용5</td>
            <td>홍길동</td>
            <td>
                <div class="d-flex">
                    <form action="#">
                        <button class="btn btn-danger">삭제</button>
                    </form>
                    <form action="/board/1/updateForm" method="get">
                        <button class="btn btn-warning">수정</button>
                    </form>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

</div>

{{> layout/footer}}

애를 function에 넣어놓고 CSR로 그림을 그릴 것! -> for문으로 뿌려진다.
(때문에 중복되는 다른 코드들이 있으면 지워주고 하나만 살려놓자)

[ html 코드는 return으로 받자 ]

{{> layout/header}}

<div class="container p-5">

    <table class="table table-striped">
<!--        컬럼 -->
        <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>내용</th>
            <th>작성자</th>
            <th></th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</div>

<script>
     function render(board) {
        return`<tr id="board-5">
            <td>5</td>
            <td>제목5</td>
            <td>내용5</td>
            <td>홍길동</td>
            <td>
                <div class="d-flex">
                    <form action="#">
                        <button class="btn btn-danger">삭제</button>
                    </form>
                    <form action="/board/1/updateForm" method="get">
                        <button class="btn btn-warning">수정</button>
                    </form>
                </div>
            </td>
        </tr>`;
    }

</script>

{{> layout/footer}}

이렇게!! return에 넣어준다!!
+) 삭제를 위해서 id를 꼭! 넣어주자!! 

그런데 왜 html 코드를 return문에 넣는걸까?

자바스크립트를 사용해서 웹 페이지를 동적으로 업데이트하기 위함!

새로운 데이터를 받아서 웹 페이지에 표시해야 하는데, 
그 데이터에 맞는 HTML 코드를 자바스크립트로 만들고 반환한다. 
그러면 이 코드를 웹 페이지의 특정 부분에 추가할 수 있고, 
사용자는 전체 페이지를 새로고침하지 않고도 새로운 내용을 볼 수 있게 된다. 

예를 들어 게시판에 새 글을 추가할 때, 사용자가 바로 그 글을 볼 수 있도록 하는 것!

자바스크립트로 AJAX 요청과 같은 비동기 통신을 통해 서버로부터 새로운 데이터를 받은 후, 
이 데이터를 기반으로 HTML을 생성하고 DOM (Document Object Model)에 동적으로 추가하여 
웹 페이지의 내용을 갱신하는 데 return문을 사용

[ 화면 확인 ]

처음엔 이런 뼈대만 나온다. 이 뼈대에 데이터들을 받아와서 뿌리면 된다!