개발을 시작해봐요! 스프링 부트(Spring Boot ) 게시판 - 게시글 조회...

해당 포스팅에서 화면은 JSP가 아닌 타임리프(Thymeleaf) 템플릿 엔진(이하 타임리프)을 사용합니다.

이전 포스팅에서 우리는 게시글 리스트를 처리하는 방법에 대해 알아보았습니다. 이번 포스팅에서는 특정 게시글의 상세 정보를 보여주는 화면을 구현해 보도록 하겠습니다. 게시글 등록 구현하기에서 이미 모든 서비스 로직을 처리하였기 때문에 바로 뷰 영역(Presentation Layer)의 작업을 진행합니다.

1. 컨트롤러

BoardController 클래스를 열고, 다음의 코드를 추가해 주세요. TODO 주석과 관련된 내용의 처리는 CRUD 기능이 마무리되면 진행할 예정입니다.

@GetMapping(value = "/board/view.do") public String openBoardDetail(@RequestParam(value = "idx", required = false) Long idx, Model model) { if (idx == null) { // TODO => 올바르지 않은 접근이라는 메시지를 전달하고, 게시글 리스트로 리다이렉트 return "redirect:/board/list.do"; } BoardDTO board = boardService.getBoardDetail(idx); if (board == null || "Y".equals(board.getDeleteYn())) { // TODO => 없는 게시글이거나, 이미 삭제된 게시글이라는 메시지를 전달하고, 게시글 리스트로 리다이렉트 return "redirect:/board/list.do"; } model.addAttribute("board", board); return "board/view"; }

@RequestParam

게시글 조회에 사용되는 게시글 번호(idx)를 파라미터로 전달받습니다.

전체 로직

로직을 시작하는 if 문에서 idx가 null인지 확인하는데요, @RequestParam에서 required를 false로 설정한 것은 idx의 null 체크를 위한 것입니다. 잘못된 idx가 파라미터로 들어오거나 아무런 값도 들어오지 않았을 때 에러 페이지를 반환하는 것은 올바르지 않은 방법입니다. 우리는 사용자에게 적절한 메시지를 보여주고, 게시글 리스트 페이지로 이동하게끔 처리할 예정입니다. 다음으로 getBoardDetail 메서드의 인자로 게시글 번호(idx)를 넘겨서 게시글의 상세 정보를 board에 담습니다. 만약 게시글이 null이거나 삭제된 게시글이면 접근이 불가능해야 하므로 마찬가지로 적절한 메시지와 리다이렉트 처리를 해야 합니다.

2. 뷰(화면)

컨트롤러의 openBoardDetail 메서드의 리턴 문에 지정된 board/view에 해당하는 HTML을 추가해 보도록 하겠습니다. src/main/resources 디렉터리의 templates/board 폴더에 view.html을 추가하고, 더보기의 코드를 입력해 주세요. 타임리프의 th 속성과 레이아웃을 사용하기 위해 네임스페이스를 선언하고, 레이아웃 파일 경로를 지정하는 부분에 대해서는 이전 포스팅에서 이미 진행했기 때문에 따로 설명하지 않도록 하겠습니다.

더보기 this is view page 제목 이름 내용 등록일 조회 수 뒤로가기 수정하기 삭제하기 Comment Betty Simmons There are new settings available 2019.03.26 Betty Kim There are new settings available 2019.03.15

layout:fragment="content"

게시글 작성, 게시글 리스트 페이지와 마찬가지로 게시글 상세 페이지의 실제 Content가 들어갑니다. 상세 페이지에서 폼 태그는 필요하지 않지만 여기서는 화면 처리를 위해 사용됩니다. write.html과 마찬가지로 th:object 속성을 사용해서 *{ } 표현식으로 제목, 이름, 내용, 등록일, 조회 수를 텍스트 형식으로 출력합니다. 폼 태그 다음의 버튼들은 다음과 같은 의미를 가집니다.

버튼 요청 URI 파라미터 설명 뒤로가기 /board/list.do X 게시글 리스트 페이지로 이동합니다. 수정하기 /board/write.do 게시글 번호( idx ) 게시글 작성 페이지로 이동합니다. 신규 글 작성과 달리 idx를 파라미터로 전달해서 현재 게시글 정보를 화면에 출력합니다. 삭제하기 /board/delete.do 게시글 번호( idx ) 게시글을 삭제합니다. th:onclick 속성을 사용해서 게시글의 번호를 인자로 지정합니다. 자바스크립트 이벤트에서 타임리프 문법은 [[ ${data} ]]와 같이 사용할 수 있습니다.

layout:fragment="add-content"

이전에 이야기했듯이 특정 게시글의 댓글이 들어가는 영역입니다. 지금은 순수 HTML로 처리가 되어 있는데요, 페이징(검색) 구현이 마무리되면 Rest API 방식의 댓글 처리 방법에 대해 포스팅할 예정입니다.

3. 애플리케이션 실행하기

이제 애플리케이션을 실행하고, 게시글 리스트 페이지로 접근해 주세요.

게시글 리스트 페이지

특정 게시글의 제목을 클릭하면 다음과 같이 게시글 상세 페이지로 이동합니다.

게시글 상세 페이지

쿼리 스트링(Query String)

URI를 보면 /board/view.do?idx=52와 같이 '?' 뒤에 idx가 파라미터로 포함되어 있는 것을 확인할 수 있습니다. 이렇게 파라미터의 정보가 Key=Value와 같은 문자열 형태로 이루어진 것을 쿼리 스트링(Query String)이라고 합니다. 첫 번째 파라미터는 '?'로 시작하고, 두 번째 파라미터부터 '&'로 구분합니다. 쿼리 스트링이 붙은 URI는 무조건 HTTP 요청 메서드 중 GET 방식을 사용합니다.

다음은 수정하기 버튼을 클릭했을 때 보이는 화면입니다. 신규 글 작성과 다른 점은 게시글 상세 페이지와 마찬가지로 파라미터에 idx가 포함되어 있고, 현재 게시글의 정보를 출력하고 있습니다.

게시글 등록(수정) 페이지

게시글의 정보를 원하는 내용으로 수정하고, 저장하기를 클릭한 뒤에 게시글 리스트 페이지에서 다시 공지글 상세 페이지로 이동한 결과는 다음과 같습니다.

수정할 내용 입력

게시글 리스트 페이지

수정된 게시글 정보

마무리

이번에는 게시글 상세 페이지 구현과 특정 게시글을 조회하고, 수정하는 작업까지 진행하였습니다. 다음 포스팅에서는 CRUD의 마지막 단계에 해당하는 게시글 삭제 작업을 진행해 보도록 하겠습니다. 감사합니다!

from http://congsong.tistory.com/19 by ccl(A) rewrite - 2020-03-25 18:20:33