롤 전적 사이트 구현 - 게시판 목록

Read

글쓰기가 파일 업로드 때문에 까다로워서 일단 두고 상세나 게시판 목록을 먼저 구현 했다.
DB에 데이터 넣어놓고 호출만 하면 되는 거라서 어렵진 않았는데

DTO, Entity 를 나눠놓는 구조로 변경하면서 그게 좀... 힘들었다
지금 DB 는 File, Board 테이블이 서로 분리되어 있지만 글 쓰기나 상세, 수정, 삭제 할 때는 두 테이블이 서로 영향을 줄 수 밖에 없다. 각각 넣어줘야 하는데.....

API 호출을 두번해서 File, Board 에 데이터를 따로 넣어도 되지만 그건 너무 번거롭고 굳이? 싶기도 하고... 아무도 그렇게 하지 않는다. 난 전에 그렇게 해봤는데 쉽긴 함ㅋㅋ

이번엔 한 번에 다 받는 로직을 짤 수 밖에 없었는데 안 해본 걸 해보려니까......에휴.

뭐 여튼 BoardFileDTO 를 새로 만들었다.
데이터를 넣거나 데이터를 꺼내와서 쓰려고 get,set 해줬다

package com.site.opgg_be.board;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class BoardFileDTO {
    private int bno;
    private String title;
    private String id;
    private String content;
    private int viewcount;
    private String board_date;
    private int fno;
    private String org_file;
    private String stored_file;


    public BoardEntity toBoard() { // BoardEntity 에 Data 넣기
        BoardEntity board = new BoardEntity();
        board.setBno(this.getBno());
        board.setTitle(this.getTitle());
        board.setId(this.getId());
        board.setContent(this.getContent());
        board.setViewcount(this.getViewcount());
        board.setBoard_date(this.getBoard_date());
        return board;
    }
    
    public FileEntity toFile() { // FileEntity 에 Data 넣기
        FileEntity file = new FileEntity();
        file.setFno(this.getFno());
        file.setBno(this.getBno());
        file.setOrg_file(this.getOrg_file());
        file.setStored_file(this.getStored_file());
        return file;
    }
    
    public void fromBoard(BoardEntity board) { // BoardEntity 에서 Data 꺼내기
        this.setBno(board.getBno());
        this.setTitle(board.getTitle());
        this.setId(board.getId());
        this.setContent(board.getContent());
        this.setViewcount(board.getViewcount());
        this.setBoard_date(board.getBoard_date());

    }

    public void fromFile(FileEntity file) { // FileEntity 에서 Data 꺼내기
        this.setFno(file.getFno());
        this.setBno(file.getBno());
        this.setOrg_file(file.getOrg_file());
        this.setStored_file(file.getStored_file());

    }

}

(줄이겠다)BTD에 있는 로직을 활용해서 Impl에선 그걸 넣고 빼고 난리쳤따

---

게시판 목록 - back

백단에서 List<> 이용해서 배열로 보내줬고
필요한 데이터만 보내줘야하는데 귀찮아서

Mapper

@Select("select * from board order by bno desc")
    public List<BoardFileDTO> getBoardList();

이렇게 다 조회했다ㅋㅋ

Controller

@GetMapping("/board/list")
    public List<BoardFileDTO> getBoardList(){
        List<BoardFileDTO> boardlist = boardService.getBoardList();
        return boardlist;
    }

---

게시판 목록 - front

앞단에서 state 사용해서 [] 로 받아왔다.

  lists: [],

ㅋㅋ

바인딩은 for in 문 (v-show) 돌려서 뿌려주면 끝이다
list 를 구현 하는 건 어렵지 않았는데
detail 한테 파라미터로 bno(게시글 번호) 를 넘겨주는게 좀... 힘들었다

<a @click="getBno(`${row.bno}`)">{{ row.title }}</a>

bno 을 가져와서

getBno(bno) {
      this.$store.dispatch("getBoardDetail", bno);
      this.$router.push("/board/bno");
    },

이렇게 넘겨주는데 이걸 생각하기가 진짜 어려웠다..
동적라우팅.. 간단해보였는데 막상 하려니까 자꾸 파라미터가 안 넘어가고 뭔 undefined 나오고 api 호출도 안 되고 이래서 진짜 가슴이 먹먹했다..
하지만 gpt 가 해결해줬다
따봉 gpt 야 고마워~
++
gpt 죽였다 ㅋㅋ
정적으로 라우팅돼서 다음게시글에서 고침 ㅗㅗㅗㅗㅗ

플젝을 진행중일 때 정리를 하려고 했는데 머리가 복잡해서 그러기가 어렵다. 오늘은 하다가 말았던 글쓰기를 마저 하고 수정도 할 건데 할 수 있을까?
할 수 있겠지...

---

++ 했다.
인간 승리. 아니 인간 말고 내가 승리함 ㅋㅋ