inblog logo
|
하쎄의 기술 일기장
    springboot

    JPA방식을 이용한 mustache 객체 사용하기

    7. 상세보기 페이지 만들기
    하세연's avatar
    하세연
    Aug 19, 2024
    JPA방식을 이용한 mustache 객체 사용하기
    Contents
    ❗❗❗주소 설계 규칙❗❗❗1. Repository 작업2. Repository_test 단위 테스트 작업3. Controller 작업4. View 작업

    ❗❗❗주소 설계 규칙❗❗❗

    💡
    주소 설계 규칙 (1) /boards?title=제목1 select * from board where title = ‘제목1’; (2) /boards?title=제목1&content=내용1 select * from board where title = ‘제목1’ and content = ‘내용1’; (3) /boards/1 select * from board where id = 1; (4) /boards select * from board (5) /users/1/boards (user 1번이 쓴 모든 게시글) (6) /boards/2/comments * 테이블명의 s가 붙어서 들어가고 PK값은 쿼리스트링이 아니라 그냥 들어감
     

    1. Repository 작업

    public Board findById(int id) { Query query = em.createNativeQuery("select * from board_tb where id = ?", Board.class); query.setParameter(1, id); try { Board board = (Board) query.getSingleResult(); return board; } catch (Exception e) { // 익셉션을 내가 잡은것 까지 배움 - 처리 방법은 v2에서 배우기 throw new RuntimeException("게시글 id를 찾을 수 없습니다"); } }
    💡
    쿼리문을 작성하여 PK인 id를 이용해 데이터를 가지고 오도록 작성한다. 이때, id가 없는 값을 입력할 경우를 대비하여 try catch 구문을 사용한다.
     

    2. Repository_test 단위 테스트 작업

    @Test public void findById_test() { // given int id = 1; // when Board board = boardRepository.findById(id); // eye System.out.println(board.getId()); System.out.println(board.getTitle()); System.out.println(board.getContent()); }
    id가 1인 값을 임의로 입력하여 단위 테스트를 진행한다.
    given은 임의의 값을 입력하기 위해 더미를 넣는 곳
    when은 id를 통해 객체를 받아오고, 마지막 eye를 통해 테스트를 확인하는 곳이다.
     

    3. Controller 작업

    단위 테스트가 마무리되면 controller에서 작업을 실시하여 request를 받아오도록 한다.
    // 1. 메서드 : Get // 2. 주소 : /board/1 // 3. 응답 : board/detail @GetMapping("/board/{id}") public String detail(@PathVariable("id") Integer id, HttpServletRequest request) { Board board = boardRepository.findById(id); request.setAttribute("model", board); return "board/detail"; }
    • 주소 설계 원칙에 따라 id는 테이블의 PK값이므로 쿼리스트링 방식(?A=b&C=d)을 사용하지 않고 바로 입력이 가능하다.
    주소의 id를 매개변수 @PathVariable로 받아주고, 앞선 Repository에서 만든 객체를 받아온다.
    이를 request에 model로 담아 view 로 보낸다.
     

    4. View 작업

    model의 객체를 view로 받아와서 뿌려주는 작업이 필요하다.
    {{>layout/header}} <div class="container p-5"> <!-- 수정삭제버튼 --> <div class="d-flex justify-content-end"> <a href="/board/{{model.id}}/update-form" class="btn btn-warning me-1">수정</a> <form action="/board/{{model.id}}/delete" method="post"> <button class="btn btn-danger">삭제</button> </form> </div> <div class="d-flex justify-content-end"> <b>작성자</b> : 익명 </div> <!-- 게시글내용 --> <div> <h2><b>{{model.title}}</b></h2> <hr/> <div class="m-4 p-2"> {{model.content}} </div> </div> </div> {{>layout/footer}}
    단일 객체로 받아와서 view에서 뿌려줄 때, {{model.칼럼명}} 의 방식을 통해 정보를 표시한다.
    💡
    jsp의 경우 java를 사용하여 기타 작업이 가능하지만, mustache의 경우 작업이 불가능하여 백엔드 부분에서 작업이 완료된 정보만 가지고 와서 간단한 작업만이 가능하다.
     

    ⁙ 만약 객체가 단일이 아니라 복수로 가져온다면 jsp에서 사용하는 forEach 구문처럼 반복문을 사용하여야 한다. mustache에서는 이를 다음과 같이 표현한다.

    {{>layout/header}} <div class="container p-5"> {{#models}} <div class="card mb-3"> <div class="card-body"> <h4 class="card-title mb-3">{{title}}</h4> <a href="/board/{{id}}" class="btn btn-primary">상세보기</a> </div> </div> {{/models}} </div> {{>layout/footer}}
    💡
    반목문의 경우 mustache에서는 {{#객체명}}으로 열고 {{/객체명}}으로 닫아서 반복문을 작성한다. (ex) {{#models}} {{/models}} 그 사이 내용들은 {{칼럼명}} 을 사용하여 객체의 정보를 담는다. (ex) {{title}}
    Share article

    하쎄의 기술 일기장

    RSS·Powered by Inblog