Back-end/SpringBoot

[SpringBoot] 5장 게시글 조회(Read)

K_EY 2026. 1. 15. 21:07

01_데이터 조회 과정

  1. 사용자가 웹 페이지에서 데이터를 조회해 달라고 URL 요청을 보낸다.
  2. 서버의 controller가 이 요청을 받아 해당 URL에서 찾으려는 데이터 정보를 repository에 전달한다.
  3. repository는 정보를 가지고 DB에 데이터 조회를 요청한다.
  4. DB는 해당 데이터를 찾아 entity로 반환한다.
  5. 반환된 entity는 모델을 통해 뷰 템플릿으로 전달된다.
  6. 최종적으로 결과 뷰 페이지가 사용자 화면에 출력된다.

 

 

 

 

02_단일 데이터 조회

📍 URL 요청받기

뷰(View) -> 컨트롤러(Controller) : 사용자가 데이터를 조회해달라고 웹 페이지에서 URL 요청을 보낸다.

사용자가 {id}번 게시글을 조회할 때 컨트롤러는 articles/{id}로 URL 요청을 받는다.

그리고 이 URL에 포함된 id를 show() 메서드의 매개변수로 받는다.

 

src/main/java/com.example.firstproject/controller/ArticleController.java

public class ArticleController {
	(중략)
    
    @GetMapping("/articles/{id}") // 데이터 조회 요청 접수
    public String show(@PathVariable Long id) { // 매개변수로 id 받아오기
        log.info("id = " + id);
        return "";
    }
}

🔍 코드 설명

  • {id} : 중괄호 안에 id를 써주면 id가 변수로 사용된다.
  • @PathVariable : URL 요청으로 들어온 전달값을 컨트롤러의 매개변수로 가져온다.

 

 

 

📍 데이터 조회하고 출력하기

src/main/java/com.example.firstproject/controller/ArticleController.java

public class ArticleController {
	(중략)
    
    @GetMapping("/articles/{id}") // 데이터 조회 요청 접수
    public String show(@PathVariable Long id) { // 매개변수로 id 받아오기
        log.info("id = " + id);
        // 1. id를 조회해 데이터 가져오기
        // 2. 모델에 데이터 등록하기
        // 3. 뷰 페이지 반환하기
        return "";
    }
}

 

 

1. id를 조회해 데이터 가져오기

repository로 DB에 저장된 데이터를 가져온다.

특별히 조회된 데이터가 없는 경우도 처리해야 한다.

 

src/main/java/com.example.firstproject/controller/ArticleController.java

public class ArticleController {
	(중략)
    
    @GetMapping("/articles/{id}") // 데이터 조회 요청 접수
    public String show(@PathVariable Long id) { // 매개변수로 id 받아오기
        log.info("id = " + id);
        // 1. id를 조회해 데이터 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null);
        
        // 2. 모델에 데이터 등록하기
        // 3. 뷰 페이지 반환하기
        return "";
    }
}

🔍 코드 설명

  • findById() : 특정 엔티티의 id값을 기준으로 데이터를 찾아 Optional 타입으로 반환한다. Optional 타입으로 반환하지 않는다면 orElse() 메서드를 추가하면 된다. JPA의 CrudRepository가 제공.

 

 

2. 모델에 데이터 등록하기

id로 DB에서 조회한 데이터는 모델에 entity 이름으로 등록한다.

MVC 패턴에 따라 조회한 데이터를 뷰 페이지에서 사용하기 위해서다.

 

src/main/java/com.example.firstproject/controller/ArticleController.java

public class ArticleController {
	(중략)
    
    @GetMapping("/articles/{id}") // 데이터 조회 요청 접수
    public String show(@PathVariable Long id, Model model) { // 매개변수로 id 받아오기
        log.info("id = " + id);
        // 1. id를 조회해 데이터 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null);
        
        // 2. 모델에 데이터 등록하기
        model.addAttribute("article", articleEntity);
        
        // 3. 뷰 페이지 반환하기
        return "";
    }
}

🔍 코드 설명

  • Model model : 모델을 사용하기 위해 매개변수로 model 객체를 받아온다.
  • model.addAttribute(String name, Object value) : 모델에 데이터를 등록한다.

 

 

3. 뷰 페이지 반환하기

최종적으로 모델에 등록한 데이터를 뷰 페이지에서 사용할 수 있게 설정한다.

부트스트랩의 Tables 템플릿을 활용하여 뷰 페이지 생성한다.

 

src/main/resources/templates/articles/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}}

🔍 코드 설명

  • {{}} : mustache 문법으로 사용 범위를 지정한다. 이걸 사용해 모델에 등록한 article을 출력한다.

 

src/main/java/com.example.firstproject/controller/ArticleController.java

public class ArticleController {
	(중략)
    
    @GetMapping("/articles/{id}") // 데이터 조회 요청 접수
    public String show(@PathVariable Long id, Model model) { // 매개변수로 id 받아오기
        log.info("id = " + id);
        // 1. id를 조회해 데이터 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null);
        
        // 2. 모델에 데이터 등록하기
        model.addAttribute("article", articleEntity);
        
        // 3. 뷰 페이지 반환하기
        return "articles/show";
    }
}

 

src/main/java/com.example.firstproject/entity/Article.java

@AllArgsConstructor
@NoArgsConstructor // 기본 생성자 추가
@ToString
@Entity
public class Article {
    @Id
    @GeneratedValue
    private Long id;
    @Column
    private String title;
    @Column
    private String content;
}

🔍 코드 설명

  • @NoArgsConsturcutor : 기본 생성자를 추가해주는 어노테이션

 

웹 브라우저에서 제목과 내용을 등록하고 localhost:8080/articles/1에 접속하면 입력한 데이터를 조회할 수 있다.

 

 

 

03_데이터 목록 조회

📍 URL 요청받기

사용자가 localhost:8080/articles로 URL 요청을 받는다.

 

src/main/java/com.example.firstproject/controller/ArticleController.java

public class ArticleController {
	(중략)

    @GetMapping("/articles")
    public String index() {
        return "";
    }
}

 

 

 

📍 데이터 조회하고 출력하기

src/main/java/com.example.firstproject/controller/ArticleController.java

public class ArticleController {
	(중략)
    
    @GetMapping("/articles")
    public String index() {
        // 1. 모든 데이터 가져오기
        // 2. 모델에 데이터 등록하기
        // 3. 뷰 페이지 설정하기
        return "";
    }
}

 

 

1. 모든 데이터 가져오기

DB에서 repository로 모든 Article 데이터를 가져온다.

findAll() 메서드를 사용하여 해당 repository에 있는 모든 데이터를 가져온다.

findAll() : 해당 repository에 있는 모든 데이터를 모두 가져와 Iterable 타입으로 반환한다. JPA의 CrudRepository가 제공.

 

  • findAll 메서드 반환 데이터 타입 불일치 문제 해결 방법

1. Iterable -> List 다운캐스팅

List<Article> articleEntityList = (List<Article>)articleRepository.findAll();

 

2. List -> Iterable 업캐스팅

Iterable<Article> articleEntityList = articleRepository.findAll();

 

3. 메서드가 Iterable이 아닌 ArrayList를 반환하도록 수정

src/main/java/com.example.firstproject/repository/ArticleRepository.java

import java.util.ArrayList;

public interface ArticleRepository extends CrudRepository<Article, Long> {
    @Override
    ArrayList<Article> findAll(); // Iterable -> ArrayList 수정
}

 

src/main/java/com.example.firstproject/controller/ArticleController.java

public class ArticleController {
	(중략)
    
    @GetMapping("/articles")
    public String index() {
        // 1. 모든 데이터 가져오기
        List<Article> articleEntityList = articleRepository.findAll();
        
        // 2. 모델에 데이터 등록하기
        // 3. 뷰 페이지 설정하기
        return "";
    }
}

 

 

2. 모델에 데이터 등록하기

가져온 데이터를 받은 articleEntityList를 뷰 페이지로 전달하기 위해 모델을 사용한다.

 

 

src/main/java/com.example.firstproject/controller/ArticleController.java

public class ArticleController {
	(중략)
    
    @GetMapping("/articles")
    public String index(Model model) {
        // 1. 모든 데이터 가져오기
        List<Article> articleEntityList = articleRepository.findAll();
        
        // 2. 모델에 데이터 등록하기
        model.addAttribute("articleList", articleEntityList);
        
        // 3. 뷰 페이지 설정하기
        return "";
    }
}

 

 

3. 뷰 페이지 반환하기

src/main/resources/templates/articles/index.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>
    {{#articleList}}
        <tr>
            <th scope="row">{{id}}</th>
            <td colspan="2">{{title}}</td>
            <td>{{content}}</td>
        </tr>
    {{/articleList}}
    </tbody>
</table>
{{>layouts/footer}}

🔍 코드 설명

  • {{#articleList}}{{/articleList}} : 모델에 등록한 articleList를 뷰 페이지로 받아온다. mustache 문법에 쓴 변수가 데이터 묶음인 경우 내부 코드가 반복된다.

 

src/main/java/com.example.firstproject/controller/ArticleController.java

public class ArticleController {
	(중략)
    
    @GetMapping("/articles")
    public String index(Model model) {
        // 1. 모든 데이터 가져오기
        List<Article> articleEntityList = articleRepository.findAll();
        
        // 2. 모델에 데이터 등록하기
        model.addAttribute("articleList", articleEntityList);
        
        // 3. 뷰 페이지 설정하기
        return "articles/index";
    }
}

 

웹 브라우저에서 제목과 내용을 여러 개 등록하고 localhost:8080/articles에 접속하면 입력한 데이터 전체를 조회할 수 있다.

 

저작자표시 (새창열림)