[memo-app] Firebase 7.데이터 수정과 삭제

 

 데이터 수정하기 

선택한 메모 수정하기

if (selectedKey) {
    // key가 있다면 메모 update
    let memoRef = database.ref(
        "memos/" + userInfo.uid + "/" + selectedKey
    );

    // 메모 내용
    let memo = {
        txt: txt,
        updateDate: new Date().getTime(),
    };

    // 메모 업데이트
    memoRef.update(memo);
}

만약 선택된 메모가 수정이 된다면 해당 내용을 데이터 베이스에 다시 저장합니다.

하지만 수정이 되었다고 화면에서 곧바로 변경되지 않습니다.

 

 

화면에 수정된 내용 갱신하기

// 메모 수정
function on_child_changed(data) {
    console.log(data.key);
    console.log(data.val());

    let memoData = data.val(); // memos 배열
    let key = data.key; // key

    let txt = memoData.txt;
    let title = txt.substr(0, txt.indexOf("\n"));

    // 데이터가 변경되었을 때 바로 갱신
    $("#" + key + " > .title").text(title);
    $("#" + key + " > .txt").text(txt);
}

on_child_change() 함수를 만들어 데이터가 변경될 때의 데이터를 가져와 바로 화면에 갱신합니다.

 

// db 내 메모 리스트 가져오기
function get_memo_list() {
    console.log("userInfo: ", userInfo.uid);
    let memoRef = database.ref("memos/" + userInfo.uid);

    memoRef.on("child_added", on_child_added);
    memoRef.on("child_changed", on_child_changed);
}

이를 위해선 db에서 메모 리스트를 가져올 때, memoRef 를 통해서 해당 위치의 데이터 child 가 변경되었을 시 콜백함수가 수행되도록 설정해야 합니다.

 

 

 

 결과 화면 

데이터가 올바르게 수정이 되고 화면에 즉각적으로 갱신이 되는 것을 확인할 수 있습니다.

 

 

 

 데이터 삭제하기 

리스트 추가시 함수 실행되도록 하기

// 화면에 리스트 그리기
let html = `<li id='${key}' class="collection-item avatar" onclick="fn_get_data_one(this.id)">
        <i class="material-icons circle red">${firstTxt}</i>
        <span class='title'>${title}</span>
        <p class='txt'>${txt}</br></p>
        <a href='#!' class='secondary-content' onclick="fn_delete_data('${key}')">
            <i class="fa-solid fa-trash-can"></i>
        </a>
        </li>`;

화면에 리스트를 그릴 시의 html 코드를 변경해줍니다.

a 태그에 onclick 시 fn_delete_data() 함수가 수행되도록 설정해줍니다.

해당 함수는 매개변수로 key 를 받습니다.

 

 

아이콘 사용

<!-- font awesome -->
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
/>

또한 font awesome 아이콘을 사용하기 위해 head 안에 해당 cdn 스크립트를 넣습니다.

 

 

선택한 메모 삭제하기

// 메모 삭제
function fn_delete_data(key) {
    // confirm 알림으로 확인
    if (!confirm("삭제하시겠습니까?")) {
        return;
    } else {
        let memoRef = database.ref(
            "memos/" + userInfo.uid + "/" + key
        );
        memoRef.remove(); // db 삭제
        $("#" + key).remove(); // element 삭제
        initMemo();
    }
}

fn_delete_data() 함수를 만들어 선택한 메모를 삭제를 합니다.

먼저 confirm() 함수를 통해 삭제를 할건지 안할건지 boolean 값을 받아 확인하도록 합시다.

memoRef 의 remove() 메소드를 통해 db 에서 삭제를 하고 화면에서도 즉각적으로 삭제할 수 있도록 remove()를 사용합니다.

그런 다음 메모란이 비워질 수 있도록 initMemo() 함수를 만들어 호출합니다.

 

 

메모란 비우기

function initMemo() {
    $(".textarea").val("");
}

해당 함수를 통해서 메모 란을 비울 수 있습니다.

 

 

 

 결과 화면 

확인 알림이 뜨고 해당 메모를 올바르게 삭제하는 것을 확인할 수 있습니다. ✌️

 

 

 

 

firebase update

firebase remoce

firebase 데이터 수정

firebase 데이터 삭제

---