2023 - 06 - 08 댓글 CRUD 기능 4. Update (수정)

오늘 할일

CRUD 댓글 수정기능 구현

 

오늘 배운 것

CRUD 댓글 수정기능 구현

 

HTML 부분

<form>
    <input type="text" class="updateusername" placeholder="아이디를 입력하세요."></input><br>
    <input type="password" class="updatepw" name="update" placeholder="비밀번호를 입력하세요."></input><br>
    <input type="text" class="updatecontent" placeholder="변경할 내용을 입력하세요."></input><br>
    <button type="button" onclick="resave()">입력</button><br>
</form>

 

댓글 생성창과 마찬가지로, 아이디, 비밀번호, 변경내용 3가지를 입력하게 헀다.

로직

1. 입력된 아이디값과 기존의 아이디값이 일치할 경우

2. 입력된 비밀번호와 기존의 비밀번호가 일치할 경우

1, 2번의 조건이 충족되면 변경내용 업로드.

 

html에서 onclick버튼을 클릭해야 함수가 실행되도록 구현한다.

우선Object.entries로 로컬스토리지에 저장된 key값과 value값 다 가져온다.

querySelector를 이용해 html에서 입력한 아이디값과 비밀번호의 value값을 가져온다.

그리고 가져온 값들을 변수처리한다.

 

로컬스토리지에서 가져온 Object.entries 변수선언해놓은 값을 forEach를 돌려서,

입력된 아이디와 비밀번호를 하나하나 돌려본다.

forEach문은 함수의 끝까지 사용된다.

 

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"}']

여기서 가져올 값은 각각 배열마다 1번째 인덱스의 name값과 pw값임.

JSON.parse로 해당 인덱스 값에서 필요한 정보를 점 찍고, 변수선언한다.

그리고 아래 객체 obj 선언에 필요하므 id값도 점 찍어서 가져오고 변수선언한다.

 

그리고 아이디 비번이 일치할 경우 유저가 새로 작성한 댓글을 등록해야 하므로

querySelector매서드를 사용해 유저 댓글창의 value값 가져오고 변수 선언한다.

 

 

if조건문 사용.

위에 선언한 변수들을 활용한다.

유저가 입력한 아이디가 기존 아이디와 불일치한 경우 alert 경고문

유저가 입력한 패스워드가 기존 패스워드와 불일치한 경우 alert경고문

마지막으로 아이디도 일치하고 패스워드도 일치한 경우 (and조건)

 

 

객체선언해서 각각 id, name, pw, content를 입력한다.

이는, 댓글 생성할때 선언했던 객체 obj와 동일하다. 변경해야 할 부분은 content 부분이므로 

객체obj에서 content의 value값을 위에 선언한 유저가 입력한 댓글 값으로 바꾼다.

 

그리고 로컬스토리지에 setItem으로 해서 key값(배열인덱스0번째값), value값(obj를 문자열화)

저장하면 됨.

 

마지막에 새로고침함수.

 

 

여기서 증요한 점이 있다.

(1)

유저가 확인하기 위해 입력한 아이디와 비밀번호는 기존 아이디와 비교하기 위한 입력값일 뿐

그 입력된 아이디와 비밀번호를 변수 선언해서 조건문의 조건이 다 충족될 경우의 실행문에 쓰면 안된다.

기존 로컬스토리지에 저장된 아이디와 비밀번호를 parse해서 가져온 값을 써야한다. (선언된 값 쓴다)

 

(2) obj 객체에서 key값으로 id를 가져올 때, 댓글생성create부분에서 처음에 랜덤값을 줘서 그것을

조회부분read에서 어떻게 가져올수있을지 헷갈릴수 있으나, 그 값은 k의 0번째 인덳스 값임.

이는 key값으로 사용되는 값이므로 value에 있는 아이디를 써서는 안됨!

 

function resave(){
    const entries = Object.entries(localStorage);
    const newId = document.querySelector(".updateusername").value;
    const newPw = document.querySelector(".updatepw").value;

    entries.forEach(k => { 
            const username = JSON.parse(k[1]).name; // 문자열을 빼온 것
            const password = JSON.parse(k[1]).pw;
            const newComment = document.querySelector(".updatecontent").value; 
            const key = JSON.parse(k[1]).id; // obj에 넣기위한 key값

            // const key = JSON.parse(k[0]) => id를 가져오는 것은 같으나 다른위치에서 가져온다 (key값에서 가져옴)

        if(newId !== username){
            alert('아이디가 일치하지 않습니다. 다시 확인해주세요.');
        } else if (newPw !== password){
            alert('비밀번호가 일치하지 않습니다. 다시 확인해주세요.');
        } else if (newId === username && newPw === password){

            // 이렇게하면안됨
            // const username = document.querySelector(".updateusername").value; // 새로운입력값:비교하는 용도, 새로운 입력값을 사용하면안됨
            // const password = document.querySelector(".updatepw").value;       // 비교가 완료되면 기존DB를 그대로 가져다 씀
            // const newComment = document.querySelector(".updatecontent").value;   
            // key위치의 변수명은 변경되면 안됨 (value값만 변경가능)  

            const obj = {
                id: key,
                name : username,
                pw: password,
                content: newComment
            };    
            localStorage.setItem(k[0], JSON.stringify(obj));
            alert('댓글 수정이 완료되었습니다.')

            window.location.reload(); //새로고침함수 => 새로고침되면 read.js의 onload를 실행
        }
    })        
}