[VSCode] React + nodejs + mySQL로 게시판 만들기 8편 - 게시물 쓰기, 수정, 삭제(3)

이번 포스팅은 길고 길었던 리액트 입문자의 게시판 만들기 마지막 편이다.

휴가로 쉬는 동안 전혀 안 했다.

 

처음부터 천천히 다시 보고 싶으신 분들은 1편부터 시작하면 된다.

 

리액트 게시판 만들기 1편

https://artistjay.tistory.com/20

 

먼저, 오랜만에 포스팅이니 해야 할 일과 완료된 일을 다시 정리해보자.

 

a) 작성 완료 버튼 event 추가

b) 제목과 내용을 DB에 insert/update 하는 서버 API 코드 작성

c) 수정하기 버튼 event 추가

d) 게시글 상세 조회 select 하는 서버 API 코드 작성

e) 삭제하기 버튼 event 추가

f) 게시글 삭제 delete 하는 서버 API 코드 작성

 

 

게시글 삭제 기능은 간단했다.

부모 컴포넌트의 상태를 체크할 필요도 없었고, 목록 화면에서 바로 삭제 API를 호출하면 된다.

 

반응형

 

 

그럼 BoardList.tsx 파일만 수정해보자.

 

1. 삭제하기 버튼에 클릭 event를 추가한다.

 

<Button variant="danger" onClick={this.handleDelete}>
    삭제하기
</Button>

 

그리고 handleDelete 메서드도 만들어준다.

 

handleDelete = () => {
    if (this.state.checkList.length == 0) {
        alert("삭제할 게시글을 선택하세요.");
        return;
    }

    let boardIdList = "";

    this.state.checkList.forEach((v: any) => {
        boardIdList += `'${v}',`;
    });

    Axios.post("http://localhost:8000/delete", {
        boardIdList: boardIdList.substring(0, boardIdList.length - 1),
    })
        .then(() => {
            this.getList();
        })
        .catch((e) => {
            console.error(e);
        });
};

 

2. 게시글 삭제 서버 API 코드를 작성한다.

 

app.post("/delete", (req, res) => {
  const id = req.body.boardIdList;

  const sqlQuery = "DELETE FROM BOARD WHERE BOARD_ID IN (?)";
  db.query(sqlQuery, [id], (err, result) => {
    console.log(err);
    res.send(result);
  });
});

 

 

그리고 삭제하기 버튼을 눌러서 테스트를 해보자.

그런데 오류가 발생했다.

 

Error: ER_TRUNCATED_WRONG_VALUE: Truncated incorrect DOUBLE value: '6','5'

 

해결 방법은 따로 포스팅하였다.

 

https://artistjay.tistory.com/42

 

 

다행히 간단하게 해결완료 후 삭제가 정상적으로 되었다.

 

이렇게 리액트 + node express + mysql을 활용한 게시판 CRUD 기능 구현이 끝났다.