[Spring Boot] aLog Project - 조회 페이지 만들기

[Spring Boot] aLog Project - 게시글 등록 페이지 만들기 에 이어서 조회 페이지를 구현합니다. 🏆

---

index.mustache

전체 조회를 위해 index.mustache의 UI를 변경합니다.

{{>layout/header}}

    <h1>aLog</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>
        <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}}
                <tr>
                    <td>{{id}}</td>
                    <td>{{title}}</td>
                    <td>{{author}}</td>
                    <td>{{modifiedDate}}</td>
                </tr>
            {{/posts}}
            </tbody>
        </table>
    </div>

{{>layout/footer}}

📁 코드 설명

1. {{#posts}}
	- posts 라는 List를 순회합니다.
    - Java의 for문과 동일하게 생각하면 됩니다.
    
2. {{id}} 등의 {{변수명}}
	- List에서 뽑아낸 객체의 필드를 사용합니다.

PostsRepository.java

PostsRepository.java 인터페이스에 쿼리가 추가됩니다.

package com.aLog.domain.posts;

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();
}

querydsl을 추천하는 이유

1. 타입 안정성이 보장됩니다.

2. 국내 많은 회사에서 사용 중입니다.

3. 래퍼런스가 많습니다.

PostsService.java

Repository 다음으로 PostsService.java에 코드를 추가합니다.

package com.aLog.service;

import com.aLog.domain.posts.Posts;
import com.aLog.domain.posts.PostsRepository;
import com.aLog.dto.PostsResponseDto;
import com.aLog.dto.PostsSaveRequestDto;
import com.aLog.dto.PostsUpdateRequestDto;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional; // 수정

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

@RequiredArgsConstructor
@Service
public class PostsService {

    private final PostsRepository postsRepository;

    ．．．

    @Transactional(readOnly = true)
    public List<PostsListResponseDto> findAllDesc() {
        return postsRepository.findAllDesc().stream()
                .map(PostsListResponseDto::new)
                .collect(Collectors.toList());
    }
}

@Transactional(readOnly = true)를 주면 트랜잭션 범위는 유지하되, 조회 기능만 남겨두어 조회 속도가 개선되기 때문에 등록, 수정, 삭제 기능이 전혀 없는 서비스 메소드에서 사용하는 것을 추천합니다.

+ 전 작성한 PostsService.java에 import 내용이 잘못되어 수정했습니다.

import org.springframework.transaction.annotation.Transactional;

PostsListResponseDto.java

PostsListResponseDto.java 클래스가 없기 때문에 생성해줍니다.

package com.aLog.dto;

import com.aLog.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.java

마지막으로 IndexController.java를 변경합니다.

package com.aLog.controller;

import com.aLog.service.PostsService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@RequiredArgsConstructor
@Controller
public class IndexController {

    private final PostsService postsService;

    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("posts", postsService.findAllDesc());
        return "index";
    }

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

📁 코드 설명

1. Model
	- 서버 템플릿 엔진에서 사용할 수 있는 객체를 저장할 수 있습니다.

---

✔ 머스테치를 이용하여 게시글 조회 페이지를 구현해봤습니다.