13. 전체 조회 화면

해당 게시물들은 이동욱 저자님의 "스프링 부트와 AWS로 혼자 구현하는 웹 서비스"를 공부하며 기록한 것입니다.

 

 

 앞선 게시물에서는 게시글 등록 화면과 실제로 작동하도록 index.js까지 완성하였다. 이번 게시물에서는 index.mustache에서 저장되어있는 게시물 목록을 볼 수 있도록 구현할 계획이다.

 

 

 우선 index.mustache를 변경한다.

 

 

 기존의 index.mustache의 글 등록 버튼을 포함한 div 아래 작성한다. 여기서 머스테치의 문법이 처음으로 등장한다.(레이아웃 제외하고)

 

 1) {{#posts}}

- 이는 마치 Java의 for문과 동일하게 생각하면 되며, posts라는 list를 순회한다.

 

2) {{id}} 등등 {{변수명}}

- List에서 뽑아낸 객체의 필드를 사용한다.

 

 

 index.mustache에 테이블의 정보를 전달하기 위해 Controller, Service, Repository 코드를 작성해야 한다. 우선 PostsRepository에 쿼리를 추가한다.

 

 

 SpringDataJpa에서 메소드를 제공하지 않는 경우, 쿼리로 작성해도 동작한다는 예시로 책에서 @Query를 사용하여 작성했다.

 

---

<굳이 @Query를 사용한 이유?>

 실제로 규모가 있는 프로젝트를 진행할 경우, FK의 조인, 여러 복잡한 조건들로 인해 Entity 클래스와 기본적인 SpringDataJpa만으로는 처리하기 어려운 경우가 많아 추가적으로 조회용 프레임워크를 사용한다고 한다.

 

 querydsl, jooq, MyBatis등이 있으며, 주로 조회가 복잡한 경우가 많아 조회는 위 프레임워크들로 조회하고, 등록/수정/삭제는 SpringDataJpa를 통해 진행한다고 한다.

 

 해당 책의 저자님께서는 Querydsl을 다음 3가지 이유에 의해 추천하고 있다.

 

1) 타입 안전성 보장

- 문자열로 쿼리를 작성하는 것이 아닌, 메소드 기반으로 쿼리를 생성하기 때문에 오타 혹은 컬럼명 오류를 IDE에서 자동으로 찾아준다.

 

2) 많은 국내 회사에서 사용중

- 쿠팡, 배민 등 JPA 활용하는 여러 회사에서 사용중

 

2-2) 레퍼런스가 많음

- 국내에서도 자주 사용하므로, 여러 커뮤니티 혹은 국내 자료가 많음

 

 따라서 다음 프로젝트를 혼자 진행하게 되본다면, 이 Querydsl을 활용해 볼 것이다.

---

 

 돌아와서, PostsService에 코드를 추가한다.

 

 

1) (readOnly = true)

- @Transactional 어노테이션 옆에 (readOnly = true)를 사용하면 등록, 수정, 삭제는 할 수 없지만, 조회만 남아 조회 속도가 개선되는 효과를 얻을 수 있다.

+ 처음에 readOnly를 인식하지 못해 찾아본 결과, @Transactional을 javax로 import한 경우에 사용할 수 없으므로 유의하는 것이 좋다.

 

2) .map(PostsListResponseDto::new)

- 람다식을 활용한 방법, 위의 코드는 .map(posts -> new PostsListResponseDto(posts))와 같은 의미이다. 결국 postsRepository의 결과를 stream으로 받아온 후 map을 활용하여 PostListResponseDto로 변환, List으로 반환한다.

+ 여기서 stream은 컬랙션, 배열 등 저장되어 있는 요소들을 하나씩 참조하여 반복하게 만들어 주는 것으로, 별도의 반복문이 필요없으며 일회용이다.

+ 마지막 줄은 다시 List로 변경해서 retrun하는 것이다.

 

 

 아직 PostsListResponseDto가 생성되지 않아 오류가 발생하며, dto 패키지에 이 클래스를 생성한다.

 

 

 

 마지막으로 IndexController를 변경한다.

 

 

1) Model

- Model은 서버 템플릿 엔진에서 사용가능한 객체를 저장할 수 있다. 위의 코드에선 postsService에서 findAllDesc으로 가져온 결과를 posts로 index.mustache에 전달한다.

 

 

이제 http://localhost:8080으로 접속한 후 하나의 게시물을 올리고, 메인화면으로 돌아가보면 게시물 목록이 추가됨을 알 수 있다.

 

---

 

- 학습 내용 저장할 github

https://github.com/imgzon3/imgzon3-springboot-test

imgzon3/imgzon3-springboot-test