[게시판] 게시글 전체 목록 조회

게시글 목록 조회를 구현할건데요, entity와 dto, repository는 특별하게 추가한게 없어서 생략하겠습니다!

 

---

 

 [ 서버 ]  

BoardController.java

package com.example.demo.controller;

import com.example.demo.dto.BoardDTO;
import com.example.demo.service.BoardService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/v1/auth/n")
public class BoardController {

	@Autowired
	private BoardService boardService;

	
	/**
	  기능 : 게시글 작성
	  url : /createBoard
	  request data : 글제목, 글내용, 사진, 동영상, 파일, 작성날짜, 작성시간
	  response data : 게시글 작성 성공
	 */
	
	@PostMapping("/createBoard")
	public BoardDTO createBoard(@RequestBody BoardDTO boardDTO) {
		return boardService.createBoard(boardDTO);
	}
	
	
	/**
	  기능 : 게시글 전체 목록 조회
	  url : /board
	  request data : 
	  response data : 
	 */
	@GetMapping("/board")
	public List<BoardDTO> board() {
		return boardService.board();
	}
	
		
}

 

	@GetMapping("/board")
	public List<BoardDTO> board() {
		return boardService.board();
	}

전체 글 목록을 반환해주어야 하기 때문에 반환 타입으로는 List<BoardDTO>를 지정합니다.

boardService.board() 메서드를 호출하여 게시글 목록을 가져옵니다.

 

 

 

BoardService.java

	// 게시글 목록 조회
	public List<BoardDTO> board() {
		List<BoardEntity> board = boardRepository.findAll();  // 모든 게시글을 DB에서 조회
		return board.stream()  // 조회된 각각의 BoardEntity 객체를 스트림으로 변환
				.map(BoardMapper.instance::boardToDTO)  // 각각의 BoardEntity 객체를 BoardDTO 객체로 변환.
				.collect(Collectors.toList());  // 리스트로 수집하여 반환
	}

DB에서 모든 게시글을 조회한 후에 각각의 객체를 스트림으로 변환했습니다.

map 메서드를 사용해서 각각의 ENTITY 객체를 BoardDTO 객체로 변환시켰는데 이때 boardMapper의 boardToDTO 메서드를 호출해서 매핑을 수행합니다.

변환된 BoardDTO 객체들을 Collectors.toList()를 사용해서 리스트로 수집하고 클라이언트에게 반환해줬습니다. 

@Autowired
private BoardMapper boardMapper;

// 게시글 목록 조회
	public List<BoardDTO> board() {
		List<BoardEntity> board = boardRepository.findAll();  // 모든 게시글을 DB에서 조회
		return board.stream()  // 조회된 각각의 BoardEntity 객체를 스트림으로 변환
				.map(boardMapper::boardToDTO)  // 의존성 주입하여 사용
				.collect(Collectors.toList());  // 리스트로 수집하여 반환
	}

mapper만 의존성 주입해서 사용한 코드입니다.

 

 

BoardMapper.java

package com.example.demo.mapper;

import com.example.demo.dto.BoardDTO;
import com.example.demo.entity.BoardEntity;
import org.mapstruct.Mapper;
import org.mapstruct.factory.Mappers;

@Mapper(componentModel = "spring")
public interface BoardMapper {

    BoardMapper instance = Mappers.getMapper(BoardMapper.class);
    
    // Entity에서 DTO로 매핑
    BoardEntity boardToEntity(BoardDTO boardDTO);

    // DTO에서 Entity로 매핑: 클라이언트가 보낸 데이터를 데이터베이스에 저장하기 전에 Entity로 변환
    BoardDTO boardToDTO(BoardEntity boardEntity);

}

 

 

 

---

 

 

 [ 클라이언트 ] 

클라이언트 측은 BoardList.js만 기록해보겠습니다.

import React, { useEffect, useState } from "react";
import { Link, useNavigate } from 'react-router-dom';
import CommonTable from '../components/table/CommonTable.js';
import CommonTableColumn from '../components/table/CommonTableColumn.js';
import CommonTableRow from '../components/table/CommonTableRow.js';
import '../css/Board.css';
import axios from "axios";

let BoardList = () => {
    let [dataList, setDataList] = useState([]);
    let navigate = useNavigate();

    useEffect(() => {
        // 게시글 목록을 불러오는 API
        axios.get('http://localhost:8082/api/v1/auth/n/board')
        .then((res) => {
            console.log("게시글 전체 목록 조회 성공!")
            setDataList(res.data);
        })
        .catch((error) => {
            console.log("Error:", error);
        });
    }, []);

    let createBoard = () => {
        navigate('/createBoard');
    };
   
    return(
        <>
        <h3 style={{textAlign: 'center', marginTop: '20px'}}><strong>개시판🐶</strong></h3>

        <CommonTable headersName={['글번호', '제목', '등록일', '작성자', '👀조회수', '🖤좋아요']}>
            {
                dataList ? dataList.map((board, index) => {
                    return (
                        <CommonTableRow key={index}>
                            <CommonTableColumn>{board.id}</CommonTableColumn>
                            <CommonTableColumn>
                                <Link to={`/boardView/${board.id}`}>{board.title}</Link>
                            </CommonTableColumn>
                            <CommonTableColumn>{board.board_date}</CommonTableColumn>
                            <CommonTableColumn>{board.user_id}</CommonTableColumn>
                            <CommonTableColumn>{board.views}</CommonTableColumn>
                            <CommonTableColumn>{board.user_like}</CommonTableColumn>
                        </CommonTableRow>
                    )
                }) : ''    // 삼항 연산자를 사용해 boardList가 존재하는 경우에만 데이터를 매핑하여 테이블 행 생성
                            // 그렇지 않은 경우에는 빈 문자열('') 반환
            }
        </CommonTable>
        
        <div className="button-container">
            <div className="button-wrapper">
                <button className="creat-board-btn" onClick={createBoard}>📝글쓰기</button>
            </div>
        </div>
        </>
        
    );
}

export default BoardList;

 

DB의 컬럼명과 똑같아야 한다는 점을 주의해야합니다!

---

 

💻 [ 결과 ]