『Server 11 』[React][Express] 수정, 삭제 버튼 만들기

📖 개요

이전 포스팅에서 만든 HTML 코드를 불러와서 수정하거나 삭제하는 방법을 알아보자!

 

완성된 화면 보기 👉 REACT

 

 

📁 폴더 구조

Server_react

웹서버는 페이지별로 폴더를 나누었다. 그 중에서 페이지네이션처럼 공통으로 쓰는 부분은 Common폴더를 만들어 넣어주었다. 각 폴더에는 Create, Detail, Page, Post 이렇게 4가지의 js 파일이 있을 예정이다.

 

_Create : 문서를 만들어서 저장하고, DB에 해당 값을 저장하는 페이지

_Detail : 생성된 문서를 읽어오는 페이지, 전송 버튼이 있어 Electron 앱에 해당 문서를 띄워주는 역할을 한다.

_Page : 테이블을 만들어주는 페이지 (이전 Client에서 BoardList 페이지 역할)

_Post : DB에서 데이터 받아와서 테이블에 뿌려주는 역할

 

오늘은 Template_Detail에서 버튼을 눌러 DB내용을 수정하고, 삭제하는 버튼을 만들 예정이다.

 

Server

서버는 config와 route로 나누었다. config는 db 정보등 설정정보에 대한 파일들이 들어있고, route는 라우팅 정보들이 담겨있다. 

예를 들어, Template.js는 /template/board, /template/insert 등의 /template 이하 라우팅 정보를 가지고 있다.

 

/board BoardList에 뿌려줄 정보를 가지고 있다. ( SQL 쿼리 SELECT문)

/insert DB에 저장할 라우팅 (SQL 쿼리 INSERT문)

/update DB를 수정할 라우팅 (SQL 쿼리 UPDATE문)

/delete DB에 있는 정보를 삭제할 라우팅 (SQL 쿼리 DELETE문)

 

오늘은 update를 통해 DB 값을 수정하고, delete를 통해 삭제 할 예정이다.

💻 삭제 버튼 구현

onClick 이벤트를 다음과 같이 만들었다. 

버튼을 누르면 'http://localhost:8000/template/delete" 로 POST 요청을 보낸다. 

(주소가 생략된 이유는 사전에 만들어둔 custom한 axios를 가져와서 쓰기 때문!)

파라미터로 삭제할 컬럼을 찾는 idx를 전송해줘서 해당 idx를 삭제할 것이다.

 

.then 이하를 보면 res가 돌아오면 "삭제 완료!" 라는 알림창을 띄워주고 

이전 페이지로 돌아가게 했다. (현재 페이지는 /template/idx/ )

const onClickDelete = async (e) => {
    await axios_db({
        url:'/template/delete',
        method:'POST',
        headers: {
          "Content-Type": "application/json"
        },
        params: {
          'idx': idx,
      }
    })
    .then((res)=>{
    alert('삭제 완료!');
    navigate('/template');
    })
}

button 에 onClick 이벤트를 넣으면 프론트 단은 끝이다.

<button onClick={onClickDelete}>삭제</button>

 

💻 Server에 query문 작성 (delete문)

서버를 실행 시키는 메인 함수에 route를 시켜준다. 

/template 으로 들어오는 요청은 template.js를 바라보게 된다.

//server.js
const template = require('./routes/template');
app.use('/template',template);

post를 아래와 같이 설정했다.

프론트에서 보낸 파라미터를 req.query로 받아서 WHERE(조건)절에 넣어주면 끝!

//template.js
router.post("/delete",(req, res) => {
    const idx = req.query.idx;

    const sqlQuery = "DELETE FROM template WHERE idx=?";
    db.query(sqlQuery, [idx], (err, result) => {
        res.send('success!');
    });
});

이제 삭제 버튼을 누르면 알림창이 뜨고, /template으로 이동하는 것을 확인할 수 있다.

 

💻 수정 버튼 구현

수정할 Content를 넣어줄 useState를 선언한다.

const [inputContent, setInputContent] = useState('');

전반적으로 onClickDelete랑 똑같은데, if문을 추가했다.

  const onClickUpdate = async (e) => {
    if(inputContent == ''){
      alert("소스 버튼 해제 후 수정해주세요!!");
    }else{
    await axios_db({
      url:'/template/update',
      method:'POST',
      headers: {
        "Content-Type": "application/json"
      },
      params: {
        'idx': idx,
        'Content': inputContent,
    }
  })
  .then((res)=>{
    alert('수정 완료!');
  })
  }}

<button class="button" onClick={onClickUpdate}>수정</button>

현재 CKEditor로 Template을 생성, 수정하고 있는데,

소스코드가 보이는 상태로 저장하면 inputContent가 다 날라간다.

 

따라서 inputContent가 비어있으면 소스버튼을 눌렀다는 상황을 가정해서 알림창을 설정해줬다.

(아래 사진을 보면 Content에 내용이 있음에도 불구하고, 없다고 판단하는 것을 확인할 수 있다.)

 

💻 Server에 query문 작성 (update문)

/update 까지 post 설정해주면,

//template.js
router.post("/update",(req, res) => {
    const Content = req.query.Content;
    const idx = req.query.idx;
    const sqlQuery = "UPDATE server.template SET Content =? WHERE idx='" + idx +"'";
    db.query(sqlQuery, [Content], (err, result) => {
        res.send('success!');
    });
});

수정 버튼이 작동한다!