👨‍🦲 게시판 CRUD를 메모리로 구현해 보자

백엔드 강의를 듣고 직접 게시판CRUD는 구현을 해 봐야한다고 생각이 들었고, 김영한님의 Spring 기초 강의와 Spring Mvc 1 편을 듣고 직접 한번 구현해 보자 라는 자신감을 얻었다!!

도메인

🧪 게시판

• 게시판에는 아이디, 제목, 내용, 현재 날짜등 간단하게 도메인을 생성하였다.
• 추후 조회수도 구현을 목표로 하고 있다.

게시판 도메인

package board.boardservice.domain;

import lombok.Getter;
import lombok.Setter;

import java.util.Date;

@Getter
@Setter
public class Board {

    private Long id;
    private String sub;
    private String content;
    private Date date;
    private int count;

    public Board(String sub, String content, Date date) {
        this.sub = sub;
        this.content = content;
        this.date = date;
    }

    public void view(){
        count++;
    }


}

레포지토리

• 레포지토리는 추후 JPA를 배우면 JPA를 적용하기위해 먼저 레포지토리를 추상화 작업을 진행하였다.

BoardRepogitory

package board.boardservice.repository;

import board.boardservice.domain.Board;

import java.util.List;


public interface BoardRepository {

    Board save(Board board);
    Board findById(Long id);

    List<Board> findByAll();

    void upDate(Long id, Board board);

    void deleteBoard(Long id);

    void clearStore();



}

• 게시판의 간단한 기능으로는 첫번째 게시글을 저장하는 기능
• 해당 게시물을 id로 찾는 기능
• 전체의 게시물을 찾는 기능
• 게시글 업데이트 기능
• 게시글 삭제기능

MemoryRepositoty

package board.boardservice.repository;

import board.boardservice.domain.Board;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Repository;

import java.util.*;

@Slf4j
@Repository
public class MemoryBoardRepository implements BoardRepository{

    private static final Map<Long, Board> store = new HashMap<>();
    private static long sequence = 0L;

    @Override
    public Board save(Board board) {
        board.setId(sequence++);
        store.put(board.getId(), board);
        board.view();
        return board;
    }

    @Override
    public Board findById(Long id) {
        return store.get(id);
    }



    @Override
    public List<Board> findByAll() {
        return new ArrayList<>(store.values());
    }

    @Override
    public void upDate(Long id, Board board) {
        Board findBoard = findById(id);
        findBoard.setDate(new Date());
        findBoard.setSub(board.getSub());
        findBoard.setContent(board.getContent());
    }

    @Override
    public void deleteBoard(Long id) {
        if(store.containsKey(id)){
            store.remove(id);
            log.info("삭제 완료");
        }
        else{
            log.info("해당 아이디는 없습니다");
        }
    }

    @Override
    public void clearStore(){
        store.clear();
    }
}

• BoardRepository를 implements 받아 저장소를 Map<Long, Board>로 데이터를 저장하였다.
• save() :해당 게시물을 메모리에 저장
• findByAll(): 전체의 게시글 반환
• upDate(): 해당 아이디로 저장되어있는 게시글을 찾아서 파라미터에 있는 게시글로 업데이트
• deleteBoard(): 해당 아이디로 찾아 게시글 삭제.
• @Repository: MemoryBoardRepositoty를 스프링 빈에 등록

전체적 화면

🍀Controller

@Controller
@RequestMapping("/basic/boards")
@RequiredArgsConstructor
public class BoardController {

    private final BoardRepository boardRepository;

• @Controller : 스프링 빈에 컨트롤러 등록
• @RequestMapping: Default Url을 등록시켜 준다
• @RequiredArgsConstructor: final이 붙은 멤버변수만 사용해서 사용자를 만들어줌
• @Autowired: 의존관계 자동주입(생략가능)

 @GetMapping
    public String boards(Model model) {
        List<Board> boardList = boardRepository.findByAll();

        model.addAttribute("board", boardList);

        return "basic/boards";

    }
    
     @PostConstruct
    public void init() {
        boardRepository.save(new Board("ㅋㅋ", "ㅋㅋ", new Date()));
        boardRepository.save(new Board("ㅋㅋ", "ㅇㅇ", new Date()));

    }

• url: /basic/boards이 요청이 들어오면 boards() 메서드 수행 후 스트링 path 반환
• 해당 데이터를 Thymeleaf로 렌더링 작업
• @PostConstruct: 클라이언트에게 보여주기 위해 선 데이터 삽입

Thymeleaf

 <tr th:each="board : ${board}">
                    <td th:text="${board.id}">user123</td>
                    <td><a th:href="@{/basic/boards/{boardId} (boardId=${board.id})}" th:text="${board.sub} ">게시글 제목</a></td>
                    <td th:text="${board.count}">100</td>
                    <td th:text="${board.date}">2024.02.06</td>
                </tr>

전체 화면

• 해당 페이지는 게시글 등록과 제목을 눌르면 상세 제목과 내용을 볼 수 있다
• 등록일은 메모리에 게시글이 등록 된 시간을 나타낸다.

상세 보기

@GetMapping("/{boardId}")
    public String board(@PathVariable Long boardId, Model model) {
        Board board = boardRepository.findById(boardId);
        model.addAttribute("board", board);

        return "basic/board";
    }

• 해당 제목을 눌르면 내용을 볼 수 있다.
• 해당 아이디로 메모리에 저장된 게시글을 찾고 Model에 데이터를 담은 후 렌더링 작업

• 리스트를 클릭 시 다시 전체의 데이터를 보여주는 전 화면으로 돌아감
• 해당 글 상품 수정, 삭제 기능

상품 등록

 @GetMapping("/create")
    public String createBoardForm() {
        return "basic/addForm";
    }

    @PostMapping("/create")
    public String createBoard(@ModelAttribute Board board) {
        boardRepository.save(board);
        board.setDate(new Date());


        return "redirect:/basic/boards/" + board.getId();

    }

• 같은 Url 이지만 Post, Get 둘다 다른 메소드를 사용
• @GetMapping: 은 상품을 등록하는 폼을 보여준다.
• Post-Html Form 방식으로 요청이 오면 @PostMapping 매핑 후 @ModelAttribute로 Board 객체 생성 후 Model에 담는다.
• PRG: Post / Redirect / Get 방식을 사용해 해당 내용을 새로 고침 시 Post 요청이 계속 되는것을 막음

• 게시글 등록 후 리스트 확인을 하면 게시글이 등록된 걸 알 수 있다.

게시글 수정 / 삭제

 @GetMapping("/edit/{boardId}")
    public String editForm(@PathVariable Long boardId, Model model){
        Board findBoard = boardRepository.findById(boardId);

        model.addAttribute("board", findBoard);

        return "basic/edit";
    }

    @PostMapping("/edit/{boardId}")
    public String edit(@PathVariable Long boardId, @ModelAttribute Board board){
        boardRepository.upDate(boardId, board);

        return "redirect:/basic/boards/{boardId}";
    }

    @GetMapping("/delete/{boardId}")
    public String delete(@PathVariable Long boardId){
        boardRepository.deleteBoard(boardId);

        return "redirect:/basic/boards";
    }

• 세부 리스트에서 수정하기를 누르면 해당 리스트를 수정하는 폼
• 해당 아이디와 @PostMapping으로 온 데이터를 Create와 동일하게 @ModelAttribute로 진행
• 이 방식 PRG 방식 진해
• 삭제는 해당 아이디를 받아 @PathVariable로 아이디를 받아 삭제 진행 후 리다이렉트

• 결과적으로 제목 1이 수정된 걸 알 수있다.
  
• 수정된 결과물 삭제 완료 !!

마무리

• 추후에는 제목을 검색하면 세부 검색으로 넘어가는 기능과 조회수 기능 대댓글 기능까지 구현을 해 볼 것이다.. mvc2편을 듣고 로그인 기능과 검증 기능 까지 ..?