[KB IT's Your Life 7기]게시판 화면단 만들기 | JSP 뷰부터 redirect까지

오늘은 실제 게시판 화면을 구성하는 단계입니다. 목록, 상세, 글쓰기, 수정, 삭제까지 JSP 뷰를 직접 붙여보면서 정리한 내용을 담았습니다.

---

시작 페이지를 목록으로 redirect

개발 중에는 매번 손으로 URL을 치는 게 불편합니다. 그래서 홈 컨트롤러의 index 처리를 잠깐 바꿔서, 기동되자마자 게시판 목록(/board/list)으로 redirect 되게 했습니다.

원래 index로 가던 코드는 주석으로 막아두고, 개발이 끝나면 다시 풀어주면 됩니다. 개발하는 동안 계속 게시판을 확인할 거라 목록부터 보이는 게 편합니다.

---

목록 보기, JSTL 루프와 날짜 포맷

목록은 표로 만들고 아래에 글쓰기 버튼을 둡니다. 글 목록을 출력하려면 반복문이 필요하니 JSTL c:forEach를 씁니다.

<c:forEach var="board" items="${list}">
    <tr>
        <td>${board.no}</td>
        <td><a href="get?no=${board.no}">${board.title}</a></td>
        <td>${board.writer}</td>
        <td class="text-end">
            <fmt:formatDate value="${board.regDate}" pattern="yyyy-MM-dd"/>
        </td>
    </tr>
</c:forEach>

여기서 주의할 점은 두 가지입니다. 하나는 items 속성에 들어가는 list라는 이름이 컨트롤러에서 addAttribute로 넘긴 이름과 일치해야 한다는 것입니다. 다른 하나는 상세 보기 링크를 만들 때 get?no=... 형태로 URL을 맞춰줘야 한다는 것입니다.

날짜는 fmt:formatDate에 패턴을 지정해서 출력했습니다.

상대 경로도 신경 써야 합니다. 첫 페이지의 index는 루트에 있지만, 게시판 JSP는 board 폴더 안에 있어서 상위 디렉토리로 한 번 올라갔다 내려오는 경로가 됩니다.

---

상세 보기와 부트스트랩 flex

제목을 클릭하면 get 요청으로 상세 페이지에 넘어갑니다. 전달된 글 번호가 추출되어 board라는 이름으로 request scope에 담기고, JSP에서 board.writer 같은 식으로 꺼내 씁니다.

한 줄에 컬럼을 여러 개 배치할 때는 부트스트랩의 d-flex를 씁니다. justify-content-between을 주면 양 끝으로 정렬되면서 남는 여백이 사이에 고르게 배분됩니다.

하단에는 버튼 3개를 둡니다. 목록으로 돌아가기, 수정으로 가기, 삭제하기입니다.

---

삭제는 왜 까다로운가

상세 페이지에서 한 가지 문제가 있습니다. a 태그로 나가는 요청은 GET입니다. 그런데 삭제는 POST 요청으로 처리하도록 해놨습니다. 그대로 두면 "해당 메서드를 지원하지 않는다"는 에러가 납니다.

그래서 삭제는 스크립트 처리가 필요합니다. 링크를 #으로 바꾸고 delete 클래스를 배정한 다음, 화면에 보이지 않는 폼(글 번호는 hidden)을 따로 둡니다.

document.querySelector('.delete').addEventListener('click', () => {
    if (confirm('삭제할까요?')) {
        document.getElementById('deleteForm').submit();
    }
});

클릭하면 confirm으로 한 번 물어보고, 확인을 누르면 hidden 폼이 POST로 제출되면서 삭제가 처리됩니다. querySelector는 첫 번째 요소 하나만, querySelectorAll은 해당 클래스 전체를 잡는다는 차이도 짚고 넘어갔습니다.

---

글쓰기와 수정, GET은 폼 POST는 처리

글쓰기 버튼을 누르면 GET 요청으로 폼 화면이 뜨고, 실제 등록은 POST가 담당합니다. create와 update 모두 같은 구조입니다. GET은 폼을 보여주는 역할, POST는 실제 처리입니다.

폼을 만들 때 주의할 점은 input의 name이 DTO의 필드명과 일치해야 한다는 것입니다. 일치하지 않으면 값이 세팅되지 않습니다.

수정 폼은 글쓰기 폼과 거의 같아서 복사해서 만듭니다. 차이점은 기존 값을 복원해줘야 한다는 것, 그리고 primary key가 필요한데 화면에 보일 필요는 없으니 hidden으로 넣어둔다는 것입니다.

---

redirect 후 메시지 전달, flash attribute

등록이 끝나면 목록으로 redirect 합니다. 그런데 사용자 입장에서는 "등록했는데 왜 목록으로 오지?" 하고 당황할 수 있습니다. 제대로 등록됐다는 안내가 있으면 더 친절한 화면이 됩니다.

문제는 redirect 상황에서는 일반적인 방법으로 정보를 전달할 수 없다는 것입니다. 이때 쓰는 게 addFlashAttribute입니다.

이 값은 처음에 session scope에 들어갔다가, redirect 되어 들어올 때 session에서 꺼내지고 추출 후 삭제됩니다. 그리고 그 값은 request scope에 담깁니다. 그래서 JSP에서 바로 확인할 수 있습니다.

이 값이 있으면 redirect를 통해 온 것이고, 없으면 그냥 목록으로 온 것으로 구분할 수 있습니다. 새로고침을 하면 이미 session에서 삭제됐기 때문에 메시지가 사라집니다. 등록 직후 한 번만 안내가 뜨고 새로고침하면 없어지는, 흔히 보는 그 동작입니다.

---

정리

이번 단계는 백엔드에서 만든 기능을 실제 화면에 붙이는 작업이었습니다. JSTL 루프, 부트스트랩 레이아웃, GET/POST 구분, 삭제 스크립트 처리, redirect 후 메시지 전달까지 화면단에서 신경 쓸 부분을 한 번씩 짚었습니다.

읽어주셔서 감사합니다!