# 상세 페이지 보기 ## 미션 --- article 목록 페이지 상에서 제목을 클릭하면,  해당 article의 상세 페이지가 나오게 하시오.  ## 개념 --- #### ⭐️ 동작 흐름  ## 튜토리얼 --- #### ⭐️ 생성 파일  #### ⭐️ 뷰 페이지 1) 링크 생성 및 내용 감추기: "articles/index.mustache" ``` {{>layouts/header}} ... <!-- articles table --> <table class="table table-hover"> <thead> <tr> <th>#</th> <th>제목</th> </tr> </thead> <tbody> {{#articles}} <tr> <td>{{id}}</td> <td> <a href="/articles/{{id}}">{{title}}</a> <!-- 링크 추가 --> </td> </tr> {{/articles}} </tbody> </table> {{>layouts/footer}} ``` 2) 상세 페이지 작성: "articles/show.mustache" ``` {{>layouts/header}} <!-- jumbotron --> <div class="jumbotron"> <h1>Article 상세보기</h1> <hr> <p>articles/show.mustache</p> </div> <!-- table --> <table class="table table-hover"> <tbody> {{#article}} <tr> <th>글번호</th> <td>{{id}}</td> </tr> <tr> <th>제목</th> <td>{{title}}</td> </tr> <tr> <th>내용</th> <td>{{content}}</td> </tr> {{/article}} </tbody> </table> <a href="/articles" class="btn btn-success btn-block">목록으로</a> {{>layouts/footer}} ``` #### ⭐️ 컨트롤러 3) 메소드 추가: "controller/ArticleController" ``` ... public class ArticleController { ... @GetMapping("/articles/{id}") public String show(@PathVariable Long id, // url의 {id} 값을 변수화! Model model) { // id를 통해 Article을 가져옴! Article article = articleRepository.findById(id).orElse(null); // article을 뷰 페이지로 전달 model.addAttribute("article", article); return "articles/show"; } } ``` #### ⭐️ 확인하기 4) 제목 클릭  5) 상세 페이지 확인  ## 훈련하기 --- - 위 튜토리얼의 수행 과정을 설명하시오. ## 면접 준비 --- - @PathVariable의 역할은? - 만약 입력한 id의 데이터가 없다면 어떻게 해야할까?