2023 - 06 - 06 댓글 CRUD 기능 2. Delete (삭제)

오늘 할일

CRUD구성하기 : 삭제 (Delete)

 

오늘 배운 것

CRUD구성하기 : 댓글 삭제 (Delete)

 

 

먼저, 댓글을 삭제하려면 기존에 입력한 '비밀번호'를 다시 입력해야 한다.

그래서 입력창과 버튼을 만들고, 그 버튼에 onclick함수를 걸어 버튼 클릭시 삭제 함수가 실행되게 한다.

 

<form id="removeForm">
<input type="text" class="removepassword" placeholder="비밀번호를 입력하세요"></input>
<button type="button" onclick="remove()">삭제</button>
</form>

 

그럼, 이제 댓글 삭제 로직을 먼저 생각해보자.

 

먼저 입력저장된 ID, PW, Comment 의 값들은 다 key값에 저장되어 있으므로 저장된 localStorage에서 가져와야 한다.

참고로, localStorage에는 문자열만 저장된다.

 

따라서 문자열화된 localStorage의 내용을 자바스크립트 객체or배열로 갖고오려면 JSON.parse() 함수를 쓴다.

(반대로 자바스크립트 객체or배열을 localStorage에 저장할때는 문자열로 바꿔야 하므로 JSON.stringify() 함수를 쓴다.)

 

localStorage에 setItem으로 저장 시 => JSON.stringify() 

localStorage에 getItem으로 출력 시 => JSON.parse() 

 

배열 형태로 전체 값을 가져와야 한다. localStorage에서 가져온 값에서 key값만 가져오도록

즉 Object.keys()을 첫 번째로 변수선언한다.

 

참고로 여기서 key값이란, 아래 8개의 배열에서 각각의 배열의 0번째 인덱스, 즉 랜덤배정된 id값을 의미한다.

0['1686139717521', '{"id":1686139717521,"name":"123123","pw":"ss","content":"ss"}']

1['1686141188794', '{"id":1686141188794,"name":"dd","pw":"dd","content":"dd"}']

2['1686139871937', '{"id":1686139871937,"name":"ss","pw":"ss","content":"ss"}']

3['1686142963977', '{"id":1686142963977,"name":"123","pw":"123","content":"123"}']

4['1686141512031', '{"id":1686141512031,"name":"dd","pw":"dd","content":"dd"}']

5['1686141193654', '{"id":1686141193654,"name":"dd","pw":"dd","content":"dd"}']

6['1686142621554', '{"id":1686142621554,"name":"123","pw":"123","content":"123"}'] 

7['1686141512799', '{"id":1686141512799,"name":"dd","pw":"dd","content":"dd"}']

 

key값, value값, 또는 key와 value를 묶어 가져오는 매서드 Object.

1. Object.keys() : key값을 가져오는 메서드
keys=> [ 'name', 'age', 'gender' ]

2. Object.values() : value값을 가져오는 메서드
values=> [ '홍길동', 30, '남자' ]

3. Object.entries() : key와 value를 묶어서 가져오는 배열 (2차원 배열)
entries => [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

 

 

querySelector 매서드를 사용해 html의 비밀번호 입력 input태그에 입력된 비밀번호 value를 두 번째로 변수선언한다.

 

즉 첫번째로 선언한 변수는 이미 저장된 key값이고, 두번쩨로 선언한 변수는 입력된 비밀번호값이다.

 

그리고, 첫번째로 선언된 변수에 filter함수를 걸어 화살표함수를 사용해 매개변수에 key값으로 임의의 k값을 넣고,

if문을 돌려 localStorage에 저장된 key값을 Json.parse()로 객체로 바꾼 값, 즉 미리 저장된 값에서

이전시간에 댓글생성할때 객체 obj의 value중 password의 key값에 썼던 pw를 뒤에 점 찍고 이어붙이고,

(점 찍고 이어붙이면 문자열의 형태로 나온다.)

 

두번째로 선언한 변수, 즉 새로 입력한 비밀번호와 동일할 시 key값인 k를 리턴하도록 한다.

 

이 filter값이 return된 모든 함수를 다시 세번째로 변수 선언처리 한다.

즉 세번째 변수는 filter문을 통과한, 비밀번호가 일치하는 변수다.

 

그리고나서

localStorage에 저장된 값들 중 세번째 변수의 0번째 인덱스는 localStorage에서 removeItem으로 삭제한다.

이는 당연히 fitler가 다 돌고나서 실행되어야 하므로 filter문 밖에서 실행하여야 한다.

 

마지막으로 항상 바로바로 업데이트될수 있게 window.location.reload();를 쓴다. 이는 reload실행시 조회의 onload가 바로 실행되어 바로 조회 창에 뜬다. 중요한 점은, reload를 전체 함수 바깥에서 쓰지 않도록 한다. 이는 함수내부에서 함수가 실현될 때만 사용되도록 하기 위함이며, 함수 밖에 reload를 쓰면 계속해서 업데이트상태가 되어 화면이 뜨지 않는다.

 

function remove(){

    const array = Object.keys(localStorage);
    const savedPassword = document.querySelector('.removepassword').value;

    const data = array.filter(k => {

    if(JSON.parse(localStorage.getItem(k)).pw === savedPassword){
        return k;
    }
    });
    localStorage.removeItem(data[0]);
    
      window.location.reload(); // 삭제시 바로 새로고침 되도록 마지막에 쓴다.
}