5장 게시글 읽기: Read

• 데이터 조회 과정
  1. 사용자가 데이터를 조회해 달라고 웹 페이지에서 URL 요청을 보냄
  2. 서버의 컨트롤러가 요청을 받아 해당 URL에서 찾으려는 데이터 정보를 리파지터리에 전달
  3. 리파지터리는 정보를 가지고 DB에 데이터를 조회
  4. DB는 해당 데이터를 찾아 이를 엔티티로 반환
  5. 반환된 엔티티는 모델을 통해 뷰 템플릿으로 전달
  6. 최종적으로 뷰 페이지가 사용자 화면에 출력

데이터 조회 과정

 

• 단일 데이터 조회하기
  • URL 요청 받기
    1. 조회할 데이터가 Article 이므로 controller패키지 안에있는 ArticleController 코드 열기
    2. URL 요청을 받기위해 @GetMapping()어노테이션 작성한 후 ID에 따라 요청을 받기로 했으므로 괄호안에 "/articles/{id}" 를입력 
       • 중괄호 안에 id를 적으면 이 id는 변수로 사용됨
    3. URL 요청을 받아 수행할 show()메서드를 생성 .  이 메서는 URL에 있는 id를 매개변수로 가져오기에 id값 앞에 @PathVariable 어노테이션을 사용함
       • @PathVariable : URL 요청으로 들어온 전달값을 컨트롤러의 매개변수로 가져오는 어노테이션
    4. 컨트롤러가 id를 잘 받았는지 로깅을 이용해서 확인하기

ArticleController 안에 show()메서드 생성

localhost:8080/articles/1000 주소를 치면 id 값을 받아옴

 

• 데이터 조회해 출력하기
  1.  id를 조회해 DB에서 해당 데이터 가져오기
     1. articleRepository를 입력하고 점(.)을 찍으면 사용할 수 있는 메서드 목록이 나오는데 이중에서 findById(Long id)를 선택
        • findbyId()는 JPA의 CrudRepository가 제공하는 메서드로 특정 엔티티의 id값을 기준으로 데이터를 찾아 Optional 타입으로 반환
     2. Optional<Article> articleEntity = articleRepository.findById(id);으로 작성 
        
        • 하지만 여기서는 코드 뒤에 orElse()메서드를 추가하고 매개변수로 null값을 넣음
        • Article articleEntity = articleRepository.findById(id).orElse(null); 식으로 코드 작성
        • id값으로 데이터를 찾을때 id값이 없으면 null 반환 , 결과가 있으면 articleEntity 에 변수값을 넣음이라는뜻
  2. 가져온 데이터를 모델에 등록
     1. 모델을 사용하기 위해 show()메서드의 매개변수로 model 객체를 받아옴
     2. 모델에 데이터를 등록할 때는 addAttribute() 메서드를 사용
  3. 조회한 데이터를 사용자에게 보여 주기 위한 뷰 페이지를 만들고 반환
     1. 템플렛 아래에있는 articles라는 디렉터리 안에 show 라는 파일을 반환하기위해
     2. articles라는 디렉터리 안에 show.mustache파일 생성
     3. 전에 만들었던 header,footer 레이아웃 추가
     4. header , footer 레이아웃 안에 부트스트랩으로 테이블 코드 추가
     5. 모델에 article이라는 이름으로 articleEntity를 등록했기에 뷰 페이지에서 머스테츠 문법인 이중중괄호({{}})을 이용해 출력
        • {{#article}} {{/article}}와 같이 샵(#)을 이용해 열고 슬래시(/)를 이용해 닫는다.
        • 이렇게 가져온 데이터를 여러 행에 걸쳐 사용할 때는 어디에서 어디까지 사용할지 범위를 지정
     6. 실행해보면 Article 엔티티에 기본 생성자가 없어서 에러가남
        • 기본 생성자 추가하기
          1. 기본 생성자를 추가하기위해 entity 패키지 안에있는 Article 파일 열기
             • 기본 생성자란 생성자인데 매개변수가 아무것도 없는 생성자를 의미
          2. 기본 생성자는 롬복으로 간단하게 생성가능 @NoArgsConstructor을 추가하면 됨

// 부트스트랩까지 적용한 show.mustache파일
{{>layouts/header}} 

<table class="table">
  <thead>
    <tr>
      <th scope="col">Id</th>
      <th scope="col">Title</th>
      <th scope="col">Content</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td colspan="2">제목 1111</td>
      <td>내용!!!!</td>
    </tr>
  </tbody>
</table>

{{>layouts/footer}}

부트스트랩까지 적용한 show.mustache

//머스테츠 문법을 사용해서 테이블 생성
{{>layouts/header}} 

<table class="table">
	<thead>
		<tr>
			<th scope="col">Id</th>
			<th scope="col">Title</th>
			<th scope="col">Content</th>
		</tr>
	</thead>
	<tbody>
	{{#article}}
    	<tr>
      		<th>{{id}}</th>
      		<td>{{title}}</td>
      		<td>{{content}}</td>
    	</tr>
	{{/article}}
	</tbody>
</table>

{{>layouts/footer}}

http://localhost:8080/articles/new 에 데이터를 넣고 버튼을 클릭

id가 1번에 들어간걸 확인가능

http://localhost:8080/articles/1 에 들어가면 확인가능!

 

 

• 데이터 목록 조회하기
  • 단일 데이터는 리파지터리가 엔티티를 반환
  • 데이터 목록을 조회하면 엔티티의 묶음인 리스트를 반환

 

1. URL 요청받기
   1. ArticleController을 열고 show()메서드 아래 index()메서드 추가
   2. index() 메서드에 @GetMapping("/articles") 선언
2. 데이터를 조회해 출력하기
   1. DB에서 모든 Article 데이터 가져오기
      1. articleRepository입력하고 점(.)을 찍어 findAll()메서드 선택
         • findAll()메서드는 해당 리파지터리에 있는 모든 데이터를 가져오는 메서드
      2. 이 메서드를 수행한 결과를 articleEntityList라는 이름으로 받고 타입은 List<Article>로 설정
         • findAll()메서드가 반환하는 타입은 Iterable인데 작성한 타입은 List 라서 불일치라는 메시지가 뜸
         • 해결하는 방법은 3가지가 있음
           1. 캐스팅하기 : 데이터 타입을 변환하는것을 의미 형변환이라고도함
              1. List<Article> articleEntityList = (List<Article>)articleRepository.findAll(); (다운캐스팅)
              2. Iterable<Article> articleEntityList = articleRepository.findAll(); (업캐스팅)
           2. findAll()메서드 Iterable이 아닌 ArrayList 를 반환하도록 하기
              1. repository 패키지안에있는 ArticleRepository 파일 열고 CrudRepository 메서드를 오버라이딩 하기
              2. @Override
                 ArrayList<Article> findAll(); 로 수
   2. 가져온 Article 묶음을 모델에 등록
      1. 1. index() 메서드의 매개변수로 model 객체를 받아옴
         2. model.addAttribute() 메서드로 전달할 데이터 묶음인 articleEntityList를 "articleList" 로 등
   3. 사용자에게 보여줄 뷰 페이지 설정
      1. 템플렛 아래에 있는 articles라는 디렉터리 안에 index.mustache파일 생성
      2. header, footer레이아웃 넣기
      3. show.mustache파일 안에있는 테이블 복사해서 header ,footer 사이에 넣기
      4. {{#article}} 이 부분을 articleList로 변경 {{/article}}이 부분도 마찬가지로 articleList 변경
         • {{#articleList}} ,{{/articleList}} 이렇게 머스테치 문법에 쑨 변수가 데이터 묶음인 경우 내부 코드가 반복

오류를 고치기 위해서는 3가지 방법이 있음

findAll을 오버라이드 한 후&nbsp; Iterable 을 ArrayList로 변경

데이터 3개를 넣기

3개 실행결과 잘 나옴