🔥 TIL - Day 41

📌 체크박스로 여러 건 선택해서 삭제하기

AWS Lambda 에서 게시판 구현 중에 기억해두고 싶은 기능이 있어서 기록한다.

게시글, 상품리스트 등 어떤 목록의 아이템들이 있을 때 한 번에 여러 건을 선택해서 삭제하는 기능이다. 한 개씩이 아니고 체크박스로 한 번에 여러 건을 선택하는 것이 효율적이다.

아래와 같이 게시판에 여러 글들이 있고 타이틀 옆에 체크박스를 두었다.
삭제하고 싶은 체크박스를 누르고 삭제버튼을 누르면 체크된 게시글이 삭제되야 한다.

📌 클라이언트측 처리

이 기능을 구현하려면 삭제버튼이 눌렸을 때 체크된 체크박스의 값을 가져와야 한다.
이 부분은 Jquery를 이용해서 구현했다.

일단 체크박스는 아래와 같이 구현했다.

<td>
   <input class="form-check-input" type="checkbox" name="idxs" value="${data['idx']}">
</td>

체크된 체크박스의 값 가져오기
name이 idxs인 input 태그에 대해 checked된 객체를 가져오는 것이다.
가져온 체크박스 객체는 value로 idx값을 갖고 있기 때문에 해당 idx값으로 list를 구성한다.

var check_list = []
$.each($("input[name='idxs']:checked"), function() {
  check_list.push($(this).val())
})

이제 체크된 값들을 서버로 보내야 한다.
처음에 든 생각은 check_list를 하나씩 순회하면서 삭제해야 하나? 라는 생각이였지만 금방 접었다. 너무 비효율적이잔아 ....

리스트를 통째로 서버로 보내보자.

$.ajax({
  url: `${url}?type=deleteAll&idxs=${check_list}`,
  method: "DELETE",
  success: function (res) {
    getList()
  },
})

이렇게 서버로 보냈을 때 만약 check_list의 값이 1,2,3 이라면 아래와 같이 요청 uri가 생성된다.
localhost:5000/api?type=deleteAll&idxs=1,2,3

서버가 QueryString으로 받는 값은 String이다.
idxs의 값으로 문자열 1,2,3이 넘어오는 것이다.

📌서버측 처리

SQL in 쿼리를 이용해서 서버측 삭제처리를 구현해보자.

[ idxs = '1,2,3' ]
delete from table where idx in (idxs);

위와 같은 쿼리가 실행되면 idx가 1 또는 2 또는 3인 행이 삭제된다.
리스트를 넘기면 ,로 구분되어 문자열 형태로 넘어오는 QueryString의 특징을 잘 사용한 부분이다.

파이썬 코드에서 사용할 때 in 절은 아래와 같이 사용하면 된다.

conn = db_ops()
cursor = conn.cursor()
result = cursor.execute("delete from bbs where idx in("+idxs+")")
conn.commit()            

📌 결과