목록 가져오기

미션

---

게시글을 작성하고,

그 목록을 조회하시오.

개념

---

⭐️ 진행 흐름

각 객체의 유기적 동작. 이를 통해 데이터 목록이 조회된다. 컨트롤러는 전체적인 요청을 받아 전체적 명령을, 리파지터리는 DB에서 데이터를 가져오고, 모델은 뷰 페이지로 데이터를 전달한다. 전달된 데이터와 결합한 뷰 페이지. 이는 클라이언트에서 결과 화면으로 나타난다. 패스트푸드점에 카운터/조리/청소 점원이 따로 있는 것처럼

⭐️ 모델

MVC 패턴 중 하나인 모델. 이는 뷰 페이지에서 사용할 데이터를 관리한다. DB와 소통하는 리파지터리와 다름 주의!

// 데이터 articleList를 저장! 뷰에서는 "articles"란 이름으로 사용 가능!
model.addAttributes("articles", articleList);

⭐️ 머스테치 문법, 데이터 사용

머스테치를 사용하여, 모델 데이터를 사용할 수 있다.

<!-- 모델 데이터 aaa를 사용 -->
{{#articles}}
  ...
{{/articles}}

튜토리얼

---

⭐️ 컨트롤러

1) 코드 추가 및 변경: “controller/ArticleController”

@Slf4j
@RequiredArgsConstructor // final 필드 값을 알아서 가져옴! (@autowired 대체!)
@Controller
public class ArticleController {
    // 리파지터리 객체 자동 삽입 됨! 위에서 @RequiredArgsConstructor 했음!
    private final ArticleRepository articleRepository;
    @GetMapping("/articles")
    public String index(Model model) { // 뷰 페이지로 데이터 전달을 위한 Model 객체 자동 삽입 됨!
        // 모든 Article을 가져옴
        // Iterable 인터페이스는 ArrayList의 부모 인터페이스
        Iterable<Article> articleList = articleRepository.findAll();
        // 뷰 페이지로 articles 전달!
        model.addAttribute("articles", articleList);
        // 뷰 페이지 설정
        return "articles/index";
    }
    ...
}

⭐️ 뷰 페이지

2) 테이블 추가: “articles/index.mustache”

{{>layouts/header}}
<!-- jumbotron -->
<div class="jumbotron">
  <h1>Article 목록</h1>
  <hr>
  <p>articles/index.mustache</p>
  <a href="/articles/new" class="btn btn-primary">글쓰기</a>
</div>
<!-- articles table -->
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>제목</th>
    </tr>
  </thead>
  <tbody>
    <!-- 모델에서 보내준 articles를 사용! 데이터가 여러개라면 반복 출력 됨! https://taegon.kim/archives/4910 -->
    {{#articles}}
      <tr>
        <td>{{id}}</td> <!-- id 출력 -->
        <td>{{title}}</td> <!-- title 출력 -->
      </tr>
    {{/articles}}
  </tbody>
</table>
{{>layouts/footer}}

⭐️ 결과 확인

3) 글쓰기

4) 목록 조회

5) DB 조회

훈련하기

---

• 매번 여러 Article을 작성하기가 쉽지 않다. 이를 해결하기 위한 기능을 url “localhost:8080/init”에 구현하시오.
  

• 작성한 프로젝트 코드를 저장(commit) 하고, 깃허브에 업로드(push) 하시오.

면접 준비

---

• 게시글 목록 조회 과정 중, 각 객체의 역할은?
• Iterable 인터페이스와 ArrayList 클래스의 관계?