Web/AppFirebase

6.Firebase DB수정 삭제

DB 수정

selectedKey라는 전역변수를 만들고 아래의 두 함수를 추가하면 데이터는 수정이 가능하다. 이때 수정하는 부분의 ref함수의 인자에 selectedKey가 삽입된 것을 확인할 수 있다.

Firebase
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function fn_get_data_one(key) {
    selectedKey = key;
    var memoRef = database.ref('memos/' + userInfo.uid + '/' + key).once('value').then(function(snapshot){
    var txt = $(".textarea").val(snapshot.val().txt);
  });

}

function save_data() {
      var memoRef = database.ref('memos/' + userInfo.uid);
      var txt = $(".textarea").val();

      // 유효성 검사
      if ( txt == '') {
        return;
      }

      if ( selectedKey ) {

        // 전역변수  selectedKey가 있으면 update
         memoRef = database.ref('memos/' + userInfo.uid + '/' + selectedKey);
        memoRef.update({
          txt : txt,
          createDate : new Date().getTime(),
          updateDate : new Date().getTime(),
        })
      }else{
        memoRef.push({
          txt : txt,
          createDate : new Date().getTime()
        })
      }
}

title이 문장의 맨윗줄만 나오도록 하기 위해 on_child_added의 title변수에 txt.substr(0, txt.indexOf(‘\n’));을 대입하자

Firebase
1
2
3
4
5
function on_child_added(data){
      ...
      var title = txt.substr(0, txt.indexOf('\n'));
      ...
}

이번에는 + 버튼을 눌러 메모를 추가할 수 있도록 확인해보자
버튼에 onClick = ‘initMemo();’ 를 추가하고 다음의 함수를 추가하자.

Firebase
1
2
3
4
function initMemo() {
  $('.textarea').val('');
  selectedKey = null;
}

이제 + 버튼을 누르면 새로운 메모를 입력할 수 있게된다.

이제 데이터가 변경되었을 때 왼쪽 리스트가 변경되도록 해보자
get_momo_list 함수에 아래의 코드를 추가하여 변경에 대한 처리를 추가한다.

Firebase
1
2
3
4
5
6
7
memoRef.on('child_changed', function(data){
  var key = data.key;
  var txt = data.val().txt;
  var title = txt.substr(0, txt.indexOf('\n'));
  $("#"+ key + "> .title").text(title);
  $("#"+ key + "> .txt").text(txt);
})

이제 삭제기능을 구현해보자
HTML에 다음을 추가하자

Firebase
1
"<a href=\"#!\" onclick=\"fn_delete_data('"+key+"')\" class=\"secondary-content\"><i class=\"material-icons\">grade</i></a>"

그리고 다음 함수를 추가하여 삭제기능 구현하자

Firebase
1
2
3
4
5
6
7
8
9
function fn_delete_data(key) {
  if(!confirm('삭제하시겠습니까')) {
    return;
  }

  var memoRef = database.ref('memos/' + userInfo.uid + '/' + key);
  memoRef.remove();
  $("#"+key).remove();
}
Share