게시판 만들기 - 게시판 페이지 기능 구현 3

정영찬·2022년 8월 24일

프로젝트 실습

목록 보기

36/60

이제 실질적인 뷰를 표현하는 부분을 작업해야한다. 데이터가 오가는 테스트는 진행했지만,뷰에는 데이터가 표시되게 작업을 하지는 않았다.

index.html에서 데이터가 들어가는 부분을 추가한다.

게시글 보여주는 기능 구현

html에 class 및 id 추가

헤더

헤더는 타임리프내용을 디커플링으로 작업해서 껍데기만 보이는데 이렇게 하면 목업을 보여줄수 없기 때문에 헤더 삽입부 내용을 추가했다.

<header id="header">
    헤더 삽입부
    <hr>
</header>

스프링 웹서버에 렌더링 되지 않은 경우에는 위의 내용을 보여주고 반대의 경우에는 header.html의 내용을 렌더링해서 보여주는 방식이다.

테이블

테이블에 디커플드 로직으로 th.xml로부터 데이터를 전달받을 예정이다. 테이블의 각 항목에 class 값을 부여해서 해당 데이터를 전달 받을수 있게 만든다.

   <table class="table" id="article-table">
            <thead>
            <tr>
                <th class="title col-6"><a>제목</a></th>
                <th class="hashtag col-2"><a>해시태그</a></th>
                <th class="user-id"><a>작성자</a></th>
                <th class="created-at"><a>작성일</a></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td class="title"><a>첫글</a></td>
                <td class="hashtag">#java</td>
                <td class="user-id">Uno</td>
                <td class="created-at">
                    <time>2022-01-01</time>
                </td>
            </tr>
            <tr>
                <td>두번째글</td>
                <td>#spring</td>
                <td>Uno</td>
                <td>
                    <time>2022-01-02</time>
                </td>
            </tr>
            <tr>
                <td>세번째글</td>
                <td>#java</td>
                <td>Uno</td>
                <td>
                    <time>2022-01-03</time>
                </td>
            </tr>
            </tbody>
        </table>

푸터

헤더와 동일한 작업을 진행한다.

<footer id="footer">
    <hr>
    푸터 삽입부
</footer>

ht.xml에 데이터 전송 내용 추가

테이블에 데이터를 추가하기 위해 index.th.xml에서 데이터를 받아와야한다.


    <attr sel="#article-table">
        <attr sel="tbody" th:remove="all-but-first">
            <attr sel="tr[0]" th:each="article : ${articles}">
                <attr sel="td.title/a" th:text="${article.title}" th:href="@{'/articles/ + ${article.id}}"/>
                <attr sel="td.hashtag" th:text="${article.hashtag}"/>
                <attr sel="td.nickname" th:text="#{article.nickname}"/>
                <attr sel="td.created-at/time" th:datetime="${article.createdAt}" th:text="${#temporals.format(article.createdAt, 'yyyy-MM-dd')}" />
            </attr>
        </attr>
    </attr>

article-table을 선택하고 tbody의 내부요소중 첫번째를 제외하고 나머지를 너무 제거한다. 하나를 남겨놓은 이유는 첫번째 tr을 치환하기 위해서인데, tbody이후에 적힌 내용들이 그 치환에 관련된 내용이다. tr의 첫번째 항목을 선택해서 순회를 하고 하위 내용들로 치환한다.

이렇게 한다음에 어플리케이션을 실행하면

와! 테스트로 만들 데이터들이 추가된 상태로 게시글이 나열된 모습을 볼수 있다.
해시태그 값에 #이 붙어있지 않아서 data.sql을 확인해 봤는데, 테스트 데이터중 해시태그 데이터에 #를 붙이지 않은채로 더미 데이터를 만들어서 발생한 것이다. 테스트 데이터를 수정해서 실행하면 위와 같은 이미지로 나타난다.

검색이나 글쓰기, 페이지네이션의 기능은 동작하지 않고, 게시글을 보여주는 기능의 구현은 완료 했다.