웹 프로젝트 PAT - 07. View단

타임리프 Thymeleaf

이전에 게시판 프로젝트를 하면서 JSP를 주로 써왔지만, 요즘엔 JSP보다는 다른 템플릿 엔진들을 더 많이 쓴다는 말에 그중에 하나인 타임리프를 사용해보기로 했다. 사실 구현상에서 JSP에 불편함을 느낀 것은 아니었지만, 타임리프를 적용해보니 만족도가 꽤 높았다. 일단 HTML 사이에 JSP문법들이 생기는지 않아 HTML 태그가 더럽혀 지지 않고 훨씬 깔끔했다. 초기에 적응하는 시간만 지난다면 가독성도 높아졌다. 먼저 디자인 없이 기능상의 뷰를 구현해보고, 이후에 CSS를 적용할 때 이점은 다시 한번 느낄 수 있을 것 같다.

//타임리프를 이용하여서 구현한 for문 - 별도의 태그선언 없이도 기존 태그 안에 속성처럼 작성이 가능하다.
<tr th:each="questionCategory : ${questionCategoryPage.content}">
    <td><a th:text="${questionCategory.name}"></a></td>
    <td th:text="${questionCategory.type}"></td>
    <td>
        <form th:action="@{'/admin/question-categories/'+${questionCategory.id}}" th:method="delete">
            <button type="submit">삭제</button>
        </form>
    </td>
    <td th:text="${questionCategory.parentId}"></td>
</tr>

AJAX 구현을 위한 fetch API

요즘 웹서비스 구현을 위해서 자바스크립트는 없이는 불가능에 가깝다. 특히 페이지 전체를 새로고침하지 않고 부분적으로만 로딩이 가능한 (비동기적으로 로딩이 가능한) AJAX는 다른 대체제가 없기 때문에 더욱 필수다. 현재 자바스크립트에 대한 지식이 많지 않아 fetch API 예제들을 보고 따라해보는 것에 불과했지만 몇번 헤딩 해보니 구현까지 많이 어렵지 않게 가능했다.  타임리프의 th:onclick 속성을 이용하면 파라미터로 값을 넘겨줄 수 도 있었다.

//fetch API를 이용해서 하위 목차 추가 폼을 비동기적으로 불러온다.
function fetchSubBookContentForm(bookContentId, groupId, sequence, depth, bookId) {
    fetch('subBookContentForm?' + $.param({bookContentId: bookContentId, groupId: groupId, sequence: sequence,
            depth: depth, bookId: bookId}), {
        method: 'GET',
        credentials: 'include'
    }).then(function (response) {
         response.text().then(function (text) {
            document.querySelector('#bookContent' + bookContentId).insertAdjacentHTML("afterend", text);
        })
    })
}