각 콘텐츠의 상세보기 페이지를 만들어 봅니다.
※ 예시 이미지 : 5번 게시글의 상세페이지
제작 순서
1번 방법:: 화면 완성 → 컨트롤러 → 서비스 → 리포지토리
2번 방법:: 리포지토리 → 서비스 → 컨트롤러 → 화면 완성
- 2번 방법으로 진행해보겠습니다.
Repository 작성
DB 속 특정 데이터를 가져오는 메서드를 만들어 줍니다.
해당 메서드는 int id를 매게변수로 받고, 메게변수를 통해 db에서 조회하여 결과를 받아오는 과정을
거치고 있습니다.
createNativeQuery를 통해
"select * from board_tb where id = ?" 쿼리문을 만들어줍니다.본래 db에서 조회 할 때는 “where id = 값” 이 되어야 하지만 조회 할 때 마다 찾아야 할 값이 다르기 때문에 (?)로 기재해놓습니다.
다음으로
q.setParameter(1, id); 를 통해 쿼리문의 ?에 들어갈 변수를 지정해줍니다.setParameter( 물음표 순서, 물음표에 바인딩 될 변수값)
이것이 특정 값을 이용한 쿼리문에 사용될 코드들 입니다.
또 return 에서
q.getSingleResult() 가 (Board)라고 명시해 주는 이유로는 getSingleResult 가 반환하는 형태가 Object 입니다.
해당 메서드가 반환하는 데이터의 형태는 Board이기 때문에
다운 캐스트를 통해 반환하는 데이터가 Board라고 명시해주지 않으면,
return 되는 데이터의 형태가 올바르지 않다고 오류가 나타납니다.
Service 작성
리포지토리에서 만든 메서드를 사용하기 위한 Service 클래스의 메서드를 작성해야 합니다.
앞서 Repository에서 만든 메서드를 “게시글 상세보기” 메서드에 적용시키겠습니다.
findById()를 통해 특정 id의 정보를 Board 객체에 받아냅니다.
그리고 DTO를 가지고 상세보기 페이지에 필요한 데이터들만 보낼 수 있도록 만들어 줍니다.
DetailDTO
빨간색 네모로 표시한 것은 아무 과정없이 DB의 createAt 값을 가져올 경우.
시분초 단위 까지 가져오게 되어 가독성이 떨어지기 때문에 형태를
“yyyy-MM-dd” 로 바꿔서 나타나게 해줍니다.
Controller 작성
이제 컨트롤러에서는 Service에서 나오는 게시글 정보를 Model에 담아주고,
페이지에 넘겨주도록 해야합니다.
상세페이지 요청을 받는 GetMapping 에 /board/{id}로 클라이언트에게 요청을 받고 있습니다.
이는 패스변수 형태로 요청을 받아내고 있는 것입니다.
패스변수가 아닌 쿼리스트링 형태로 요청을 받아내는 기능도 있습니다.
쿼리스트링 예제 (”/board?title=바다&created-at=2024-11-15”) 와 같은 형태로 되어있습니다.
쿼리스트링과 패스변수가 사용되야하는 것의 구별점으로는 해당 데이터가
유니크로 구분을 하는가? 입니다. 유니크로 구분하는 데이터 요청의 경우 패스변수를 사용하고
유니크로 구분하지 않는 데이터 요청의 경우 쿼리스트링을 사용합니다.
웹 페이지에서 요청이 오면 Detail 메서드가 실행 될 것입니다.
boardService.게시글상세보기(id)를 통해 나오는 Dto객체를 담고,
해당 Dto를 model에 담아 페이지에 뿌려줍니다.
화면 완성시키기
detail페이지 html코드입니다.
mustache 문법에 따라 컨트롤러에서 넘어온
데이터를 따라 {{model.id}} / {{model.title}} / {{model.content}} / {{model.createdAt}}를 넣어주어서,
화면에 특정 아이디를 가진 게시글을 보게 만듭니다.
위의 과정들을 거쳐 Detail페이지가 만들어지게 되었습니다. ^^
Share article
