[Spring Boot] 04장. 머스테치로 화면 구성하기 - 전체 조회 화면 만들기

🌱  이번 장의 스터디 범위

• 스프링 부트에서의 화면 처리 방법
• js/css 선언 위치를 다르게 하여 웹사이트의 로딩 속도를 향상하는 방법
• js 객체를 이용하여 브라우저의 전역 변수 충돌 문제를 회피하는 방법

🌱  전체 조회 화면 만들기

• 전체 조회를 위해 index.mustache의 UI 변경

// index.mustache
{{>layout/header}}

    <h1>스프링 부트로 시작하는 웹 서비스 Ver.2</h1>
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <a href="/posts/save" role="button" class="btn btn-primary">글 등록</a>
            </div>
        </div>
    </div>
    <br>
    <!-- 목록 출력 영역 -->
    <table class="table table-horizontal table-bordered">
        <thead class="thead-strong">
        <tr>
            <th>게시글번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>최종수정일</th>
        </tr>
        </thead>
        <tbody id="tbody">
        // posts라는 List를 순회 == Java의 for문
        {{#posts}}
            <tr>
            	// {{변수명}} : List에서 뽑아낸 객체의 필드를 사용
                <td>{{id}}</td>
                <td>{{title}}</a></td>
                <td>{{author}}</td>
                <td>{{modifiedDate}}</td>
            </tr>
        {{/posts}}
        </tbody>
    </table>
    </div>

{{>layout/footer}}

• 기존의 PostsRepository 인터페이스에 쿼리 추가 : SpringDataJpa에서 제공하지 않는 메소드는 쿼리로 작성

// PostsRepository.java
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;

import java.util.List;

public interface PostsRepository extends JpaRepository<Posts, Long> {
    
    @Query("SELECT p FROM Posts p ORDER BY p.id DESC")
    List<Posts> findAllDesc();
}

• PostsService에 코드 추가 

// PostsService.java
import java.util.List;
import java.util.stream.Collectors;

@RequiredArgsConstructor
@Service
public class PostsService {
    private final PostsRepository postsRepository;
    ...

    /* findAllDesc 메소드의 트랜잭션 어노테이션 옵션인 readOnly=true 추가 
       : 트랜잭션 범위는 유지하되, 조회 기능만 남겨두고 조회 속도가 개선 */
    @Transactional(readOnly = true)  
    public List<PostsListResponseDto> findAllDesc() {
        /* .map(PostsListResponseDto::new) 람다식 : .map(posts -> new PostsListResponseDto(posts)) 
           : postsRepository 결과 넘어온 Posts의 Stream을 map을 통해 PostsListReponseDto로 변환하고 List로 반환하는 메소드 */
        return  postsRepository.findAllDesc().stream().map(PostsListResponseDto::new).collect(Collectors.toList());
    }
}

• PostsListResponseDto 클래스 생성

// PostsListReponseDto.java
import com.gagyeong.book.springboot.domain.posts.Posts;
import lombok.Getter;

import java.time.LocalDateTime;

@Getter
public class PostsListResponseDto {
    private Long id;
    private String title;
    private String author;
    private LocalDateTime modifiedDate;

    public PostsListResponseDto(Posts entity) {
        this.id = entity.getId();
        this.title = entity.getTitle();
        this.author = entity.getAuthor();
        this.modifiedDate = entity.getModifiedDate();
    }
}

• IndexController 코드 변경

// IndexController.java
import org.springframework.ui.Model;

@RequiredArgsConstructor
@Controller
public class IndexController {
    private final PostsService postsService;

    @GetMapping("/")
    /* Model : 서버 템플릿 엔진에서 사용할 수 있는 객체를 저장
       postsService.findAllDesc()로 가져온 결과를 posts로 index.mustache에 전달 */
    public String index(Model model) {
        model.addAttribute("posts", postsService.findAllDesc());
        return "index";
    }

    @GetMapping("/posts/save")
    public String postsSave() {
        return "posts-save";
    }
}

• http://localhost:8080/로 접속해 등록 화면을 이용해 하나의 데이터 등록하여 목록 기능 작동 확인