[VanilaJs] 게시판 만들기 (3) - 글 삭제와 등록

저번에 만들었던 모달창을 활용하여 글을 삭제하고, 등록 하는 기능을 만들려고 한다.

 

1. 글 삭제

먼저 삭제버튼을 만들기 위해 각 열마다 삭제 버튼을 추가해 주려고 한다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

bootstrap 아이콘을 사용하기 위해 cdn 링크를 추가해 주었다.

 

기존 boardListAction 함수에 action 영역을 만들어주고,

상세 페이지 아이콘에 상세페이지 동작(detailItem)함수와, 삭제 아이콘에 삭제 동작(deleteItem)함수를 추가하고, 해당 고유값(data.no)를 넘겨 주었다.

 

열마다 아이콘이 추가된 모습.

 

function deleteItem(no){
  if (confirm(no +'번 글을 삭제하시겠습니까?') === true) {
    _storageData = _storageData.filter(function(data) {
      return data.no != no;
    });
    window.localStorage.setItem('storageList',JSON.stringify(_storageData));
    boardListAction();
  } else {
    return false;
  }
}

deleteItem 함수에서는

넘겨받은 고유값(data.no)를 가지고 filter함수를 사용하여 로컬 스토리지에 있는 고유값(data.no)를 제외하고 새로운 배열을 반환 하여,

해당 값을 다시 로컬 스토리지에 저장하는 방식으로 삭제를 구현 하였다.

삭제 후에는 boardListAction() 함수를 통하여 테이블 목록을 재 랜더링 하게 된다.

 

 

2. 글 등록

글 등록을 하기 위해서 저번에 만들었던 모달창을 사용하려 하는데, 모달창 템플릿에서는 3가지 기능을 가능하게 하려고 한다.

1. 글 등록 = 'Add'

2. 글 상세 조회 = 'Detail'

3. 글 수정 = 'Edit'

각각의 기능의 이름을 위와 같이 명명하고 mode 라는 이름의 글로벌 변수에 텍스트로 집어넣어서 구분하려고 한다.

이번 게시물에서는 등록(Add)만 진행한다.

Add버튼을 눌러서 열리는 모달창의 mode는 Add로 대입한다.

index.html
...
 <button onclick="modalOpen('Add')" type="button" class="btn btn-primary">Add</button>
 ...

 

board.js

//모달창을 여는 함수
function modalOpen(type) {
  document.getElementsByClassName("modal-backdrop")[0].style.display = "block";
  document.getElementsByClassName("modal")[0].style.display = "block";
  mode = type;
  modalModeSet();
}

//모달 모드 세팅
function modalModeSet() {
  let titleType = document.getElementById("titleType");
  let modalButton = document.getElementById("modalButton");
  if(mode == 'Add') {
    titleType.innerHTML = '글 등록';
    modalButton.innerHTML = '등록';
  } else if(mode == 'Detail') {
    titleType.innerHTML = '글 상세';
    modalButton.innerHTML = '수정모드';
  } else if(mode == 'Edit') {
    titleType.innerHTML = '글 수정';
    modalButton.innerHTML = '수정';
  }
}

mode에 따라서 모달창의 title과 button의 텍스트를 변경하도록 하였다.

 

글 등록과 삭제 이후에는 html상에서 목록을 다 지우고 재랜더링 하도록 처리하였다.

1. 글을 등록or삭제 한다. (로컬스토리지의 데이터를 추가or삭제 한다.)

2. 화면상 html 목록을 지운다.

3. 로컬스토리지의 데이터를 다시 불러와서 html목록을 만든다.

 

기존에는 새로고침 할 때마다 매번 data.json을 읽어들여 바인딩 시키게 처리되어 있었는데, 

로컬스토리지에 'storageList' 키값이 없을 때만 data.json을 읽어들여 데이터를 바인딩 시키게 하였다.

 

전체소스

https://github.com/Jo-App/vanillaJs_Board/tree/board-3

GitHub - Jo-App/vanillaJs_Board