Chapter 1. 프로젝트 팀원 코드 이해

Realtime Database 관련 코드 이해

visitorlogfunc.js

ref()

: 데이터베이스의 루트로 접근하는 메서드

on(”value”, …)

: 데이터베이스의 특정 위치에서 데이터의 값이 변경될 때 감지하고 처리하는 역할을 함. (화면이 새로고침될 때도 실행)

// 방명록 데이터 가져오기
const dbRef = database.ref('logs'); // 'logs'라는 경로의 루트 참조 생성
dbRef.on("value", (snapshot) => { // logs 경로에서 데이터의 모든 내용 불러옴
    snapshot.forEach((child) => { // snapshot에 대한 루프 실행

        const object = child.val(); // logs 경로의 자식 데이터의 값 가져옴
        let temp = `
    <div class="log">
        <div class="input-group mb-3">
            <span class="input-group-text">${object.date}</span>
            <span class="input-group-text">${object.name}</span>
            <span><input type="text" id="deleteLogPw" placeholder="Password" aria-label="Password" class="form-control"></span>
            <button class="btn btn-secondary" type="button" id="deleteLogBtn">삭제</button>
            <div class="logText" id = ${child.ref.key}>
                ${object.content}
            </div>
        </div>
    </div>
    `
        $('#logBox').append(temp)

    });
});

• Firebase Realtime Database는 JSON 트리 구조로 데이터를 저장하며, 경로를 통해 데이터에 접근한다.
• 참조(Reference) 객체
  • Firebase Realtime Database에서는 “참조를 얻다”, “참조를 생성하다”는 데이터베이스의 특정 경로나 위치에 대한 참조(Reference) 객체를 생성하거나 가져오는 것을 의미
  • 데이터베이스의 특정 위치를 가리키는데 사용되며, 이를 통해 해당 경로의 데이터를 읽거나 쓸 수 있음
  • 파이어베이스에서 이를 이용해 데이터베이스의 특정 위치에 접근하고 데이터를 조작함
  • 참조객체를 얻는 방법
    • database.ref(’경로’)
    • : 메서드를 사용하여 특정 경로에 대한 참조 객체를 생성
    • child(’하위경로’)
    • : 이미 존재하는 참조에서 해당 메서드를 사용해 하위 경로에 대한 참조 객체 생성

---

push()

: 데이터를 추가하는 메서드

// 방명록 데이터 추가하기
$(document).on("click", "#logPushBtn", function () {

    let name = $('#logName').val();
    let pw = $('#logPassword').val();
    let content = $('#logContent').val();
    const today = new Date();
    let day = today.getDate();
    let month = today.getMonth() + 1;
    let year = today.getFullYear();

    let date = `${year}-${month}-${day}`;

    let doc = {
        'name': name,
        'pw': pw,
        'content': content,
        'date': date
    }

    database.ref('logs').push(doc); // doc 데이터를 logs 경로에 추가

    window.location.reload();
});

---

// 방명록 데이터 삭제하기

$(document).on("click", "#deleteLogBtn", function () {

    let parentDiv = $(this).closest('div'); // id가 deleteLogBtn인 요소와 가까운 div 태그
    let textDiv = parentDiv.children('.logText'); // class가 logText이고 prentDiv의 자식요소인 태그
    let pwInput = parentDiv.find('input'); // parentDiv의 하위요소인 input태그

    let id = textDiv.attr('id');
    let password = pwInput.val();

    const dbRef = database.ref('logs'); // logs라는 루트의 참조객체 생성

    dbRef.on("value", (snapshot) => { // logs 경로의 모든 데이터 불러옴
        snapshot.forEach((child) => { // snapshot에 대한 루프 실행
            const object = child.val(); // logs 경로의 자식 데이터 값을 가져옴

            if (id == child.ref.key) { // 자식 데이터의 참조 객체의 식별자가 id와 같고
                if (object.pw == password) { // object의 pw가 입력받은 password와 같으면
                    dbRef.child(id).remove(); // 식별자가 id인 자식 요소를 삭제
                }
                else {
                    alert("잘못된 비밀번호");

                }
            }
        });
    });
    window.location.reload();
});

• closet()과 parents()의 차이
  • closet()
    ⇒ 단 하나의 결과만 리턴
  • parents()
    ⇒ document root 까지 검색하기 때문에 결과가 1개 이상일 수 있음

• find()
  : 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용하는 메서드

---

visitcomments.js

• orderByChild()
   : 정렬함수. 지정된 하위 키로 정렬을 하게 됨.
  • 해당 메서드를 사용하려면 .indexOn 규칙을 통해 색인을 생성할 키를 정의해야 함. indexOn을 사용하게 되면 성능이 크게 향상됨.
• limitToLast()
  : 가장 최근에 만들어진 데이터를 기점으로 특정 개수의 데이터를 가져오는 메서드

// 방명록 최근 데이터 3개 가져오기

const dbRef = database.ref('logs').orderByChild('ups').limitToLast(3); // logs 경로에서 최근 3개의 데이터만 가져옴
// 사실 orderByChild('ups') 메서드는 해당 코드에서 굳이 쓸 필요 없음. 
// 그리고 ups라는 필드가 없기 때문에 문법적으로도 잘못된 것.
    dbRef.on("value", (snapshot) => { // logs 경로의 모든 데이터를 불러옴
        snapshot.forEach((child) => { // snapshot에 대한 루프 실행

            const object = child.val();
            let temp = `
            <p>${object.content} (${object.name})</p>
            `

            $('#visit-comment').append(temp);

        });
    });

• firebase에서 orderBy 함수는 한 번에 하나만 사용 가능
• firebase의 realtime DB는 firestore 와는 다르게 push()가 생성하는 id가 타임 스탬프를 기반하기 때문에 시간순으로 정렬됨