[JavaScript] : localStorage 'data' 삭제 기능 구현해보기.

해당 영화의 상세페이지에서, localStorage 에 저장된 댓글을 삭제하는 기능을 구현하고자 한다.

---

로직 생각 해보기.

1. 댓글마다 삭제하는 버튼이 있으면 되겠다.

2. 버튼을 누르면 addEventListener() 이벤트가 발생하면서, 댓글을 삭제하는 로직이 실행되면 되겠다.

---

코드 구현
1. 댓글이 달리는 html에 있는 삭제하기 button 추가, class도 달아주었다.

return `<li class="review" data-number="${index}">
            <p class="comment-contents">${contents}</p>
            <p class="commnet-writer">작성자: ${writer}</p>
            <div>
              <button class="update">수정하기</button>
              <button class="delete">삭제하기</button>
            <div>
        </li>`

위와 같이 댓글을 작성하면 아래 수정하기와 삭제하기 버튼이 추가되어서 기록된다.

2. 삭제 버튼을 변수에 할당하기.

const deleteBtns = document.querySelectorAll(".delete"); // 클래스에 접근할때는 온점, id에 접근할때는 #을 사용한다.
  console.log(deleteBtns); // 항상 콘솔로 확인해보는 습관을 들이자.

지정한 삭제 버튼이 콘솔에 잘 찍히는지 확인.

현재 댓글에 있는 갯수만큼 정확히 가져왔다.

3. 각 버튼마다 이벤트를 달아주기 위해 forEach 로 반복문을 돌려 이벤트 발생시키기.

// 매개변수에 index도 들어갈 수 있다는건 오늘 처음알았다.
// 기본적으로 내장하고 있는 기능이라고 함. 이걸 통해서 오늘 보다 수월하게(?) 기능을 실현시킨것 같다.

deleteBtns.forEach((deleteBtn, index) => {
    deleteBtn.addEventListener("click", function () {
    	console.log("잘 작동하나요?")
  });
});

그리고 가서 삭제하기 버튼을 눌러본다.

오케이 이벤트 작동 확인했고,

4. toSpliced 메서드 사용

// 어떤식으로 데이터를 삭제해야 할지 계속 고민을 하다가, data 와 index의 값을 찍어보았다.
// 여기서 index가 사용됨 !!

deleteBtns.forEach((deleteBtn, index) => {
    deleteBtn.addEventListener("click", function () {
      console.log(data);
      console.log(index);
  });
});

다시 삭제하기 버튼을 눌러보면,

제일 첫번째 리뷰의 삭제하기 버튼을 눌렀더니 콘솔에 찍은 data의 값과, 첫번째 삭제버튼의 index가 나왔다.

여기서 어떤 메서드를 쓰는게 좋을까 하다 toSpliced를 사용해보기로 했다.

사용법은 mdn 문서를 참조했다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced

Array.prototype.toSpliced() - JavaScript | MDN

// 사용법 : 메서드 앞에 배열이 오고, 메서드를 사용한 후 새 배열을 반환함.
// index 자리에는 start index가 오고, 숫자 "1" 자리에는 delete number 제거할 개수를 나타내는 숫자가 온다.
// 해석 : index에서 시작해서 "1"만큼 delete 하는 메서드

data.toSpliced(index, 1)

deleteBtns.forEach((deleteBtn, index) => {
    deleteBtn.addEventListener("click", function () {
      console.log(data.toSpliced(index, 1));
    });
  });
  
  // 이렇게 코딩을 한 이유 : 내가 누르는 댓글의 index 번호를 콘솔로 확인했으니,
  // index 자리에는 해당 버튼을 가진 index가 들어가면 되고,
  // 삭제버튼을 클릭한 댓글만 삭제해줄 거니까, delete count 는 1로 고정시키면 된다.

첫번째 리뷰를 지우고자 할 때 콘솔로 찍어보면,

0번째 index인 1로 이루어진 데이터가 사라지고 남은 data가 콘솔에 찍히는걸 확인했다.

5. 데이터를 localStorage 에 저장.

deleteBtns.forEach((deleteBtn, index) => {
    deleteBtn.addEventListener("click", function () {
      const deletedData = data.toSpliced(index, 1); // toSpliced 메서드를 사용한 데이터값을 변수에 할당.
      console.log(deletedData); // 콘솔로 확인
      const deletedArr = JSON.stringify([...deletedData]); // data값을 가진 변수를 spread operator를 사용해 풀어주고 JSON.stringify를 사용해 문자열로 변환
      console.log(deletedArr);
    });
  });
  
  // data 값을 가진 deletedData를 새로운 변수에 다시 할당하는 이유 : 에러가 발생하기 때문.

콘솔로 확인해보면,

위의 콘솔 = 스플라이스 메서드 사용한 데이터를 할당한 변수에 콘솔 찍은 값.

아래 콘솔 = 위의 data 값이 할당된 변수를 [] 배열에 spread operator를 사용해 풀어주고, JSON.stringify를 사용해 문자열로 변환해 준 값.

문자열로 변환한 이유 : storage에 저장된 데이터는 모두 문자열만 사용 가능하기 때문에, data를 문자열로 변환해 주었다.
                                   값은 반드시 문자열로 저장됨
https://velog.io/@bgo517/LocalStorage 참조.

toSpliced 메서드를 통해 생성한 배열을 새로운 변수에 할당하는 이유는, 해당 메서드가 순환참조 이어서 그렇다.
순환참조는 throw error -> toSpliced가 순환참조여서 에러가 발생 -> 새로운 변수에 얕은복사
이 부분은 명확하게 설명을 하진 못해서, 조금 더 오류를 만나봐야 알 것 같다.

이제는 내가 원하는 값이 문자열로 정리된 data로 콘솔에 찍히는 걸 확인 했으니, localStorage에 setItem메서드를 이용해 저장해주면 된다.

  const deleteBtns = document.querySelectorAll(".delete");
  console.log(deleteBtns);
  deleteBtns.forEach((deleteBtn, index) => {
    deleteBtn.addEventListener("click", function () {
      const deletedData = data.toSpliced(index, 1);
      const deletedArr = JSON.stringify([...deletedData]);
      localStorage.setItem(`comment${movieId}`, deletedArr); // `comment${movieId}` 이 자리는 key값이 들어가고, deletedArr 이 자리는 문자열로 이루어진 value 값이 들어가야 한다.
      window.location.reload(); // 창 새로고침.
    });
  });

위 코드는 완성코드다. 이제 상세페이지에 가서 정상작동 하는지 확인을 해보자 !!

제일 첫번째 리뷰를 삭제해 본다.

버튼을 클릭하면 정상적으로 삭제가 되고, 자동 새로고침으로 창이 최신화 된것을 볼 수 있다.

그럼 현재 localStorage에는 내가 원하는 data만 들어가있는지 확인한다.

1로 이루어진 데이터가 사라진채로 남은 데이터가 잘 저장되어있는걸 확인 할 수 있다.

이렇게 댓글  삭제 기능을 구현해 보았다.

---

시도해 본 것들
오류

시작조차 어떻게 해야될 지 몰라 무작정 localStorage에 있는 데이터를 부분삭제 시도해보기

아래의 숫자들은 맨 처음 생각해보았던 삭제기능 구현 로직 순서이다.

// 1. 해당영화의 상세페이지에있는 local storage에서 데이터를 변수에 할당한다.
const userComment = JSON.parse(localStorage.getItem("comment385687"));
console.log(userComment);

// // 2. 값을 할당한 변수에 toSpliced메서드를 넣어준다.
console.log(typeof userComment.toSpliced(0, 1)); // data의 값이 어떤 type인지 확인하는 typeof 메서드이다.
console.log(userComment.toSpliced(0, 1));

// 3. toSpliced 메서드를 통해 생성한 배열을 새로운 변수에 할당
const newUserComment = userComment.toSpliced(0, 1);
const arr = JSON.stringify([...newUserComment]);
console.log(newUserComment);
console.log(arr);

// 4. 해당 변수를 다시 set해준다.

// set 하는 방법 중에 첫 번째 생각한 방법 / 오류 발생

// 4-1. 
console.log(localStorage.setItem("comment385687", arr));
localStorage.setItem("comment385687", arr);

// toSpliced 메서드를 사용한 값을 localStorage 에 set을 시켜보면 Uncaught TypeError: JSON.stringfy is not a function

Uncaught TypeError: JSON.stringify is not a function

// 오류 발생,

위의 오류에 제이슨 스트링기파이가 함수가 아닙니다라는 오류를 보고 그럼 함수에 로직에 할당해야 하나 싶어서

다른 방법을 구상해 보았다,

// 4-2. 로컬저장소에 [{key: comment385687, value: data}] 가 있으면 불러오고, 그렇지 않다면 [] 빈 배열을 할당.

const newData = () => {
  const dataArray = JSON.parse(localStorage.getItem("comment385687")) || [];
  dataArray.push(newUserComment);
  localStorage.setItem("comment385687", JSON.stringify(dataArray));
};
newData();

// 위 코드의 문제점 : 기존 로컬저장소에 저장된 기존 정보 + toSpliced 된 데이터가 누적됨
// (로컬저장소 = 삭제를 원했던 기존의 데이터들 + toSpliced 되어 삭제 후 넣어준 변경된 데이터)

위 코드는 수정한 데이터가 localStorage에 저장하는데 까지는 성공했으나, 기존 데이터의 겉으로 계속 쌓여나갔다.

// 4-3. key가 아닌 특정 value만 삭제하고 싶을 때
// 로컬저장소에 데이터를 담고있는 배열에서
// 삭제하고 싶은 데이터의 id 값을 받아와 해당 값이 아닌 데이터들만 필터링하여 leftData에 담고 그 leftData를 localStorage에 새롭게 setItem()을 해줘야 합니다.
// 로컬저장소에 있는 value를 직접 가공하려고 시도한다면, value의 타입은 Object이므로 object에 filter함수를 적용하면 filter is not a function로 나타난다.
// 이를 위해 데이터를 새로운 배열에 담거나 Object.values(객체이름).filter()를 사용해야한다.

const deleteData = function (i) {
  const [userComment, newData] = useState([]); // const [상태값, 상태함수] = useState(초기값)
  const newUserComment = userComment.filter((i) => i.writer !== writer);
  localStorage.setItem("comment385687", JSON.stringify(newUserComment));
  newData(newUserComment);
};

그렇게 localStorage의 데이터를 삭제하는 방법을 구글링하다가 useState 라는 Hook 에 대해서 알게 되었다.

옆에 변수 선언도 구조분해할당이 들어가면서, 많은 정보를 접하게 되는 유익한 시간이었지만 아쉽게도 React에서 사용되는 문법이라고 한다.

나의 과제는 오로지 자바스크립트만 사용한 바닐라자바스크립트 과제이기 때문에 다른 방법을 계속 찾아 보았고, 맨 위에 소개한 addEventListener를 사용한 forEach 구문으로 삭제기능을 구현시킬 수 있었다.

---

내 손으로 처음 구현해본 추가기능이다.

2~3일에 걸쳐 구현한 추가기능이다. 아직 기능을 구현하기까지의 메인로직을 떠올리는데 있어서, 어려움이 많다.

task 분석을 좀 더 신경써서 해보아야겠다. 여기저기 귀동냥을 통해 정보를 얻음에 있어 로직 구현하는데 많은 도움이 되었다.

후후후후후훟후후...... 앞으로도 빠탱 !!

 

#localStorage #setItem #toSpliced #JSON_stringify_is_not_a_function #spread_operator #addEventListener #delete_기능구현 #삭제기능추가 #forEach_index_매개변수_기본내장속성