2024 07 16 TIL : 간단?하게 만든 방명록 CRUD

 

firebase를 이용한 데이터베이스 사용법을 간단하게 배운 뒤, 곧 있을 미니프로젝트를 위해 빠르게 간단한 방명록 CRUD를 만들고싶었다. 기본적인 아이디어는 

 

C : 이름, 비밀번호, 글 내용을 딕셔너리로 입력받고, 게시글 하나당 문서 하나로 데이터베이스에 저장한다. . 

R : 데이터베이스에 저장된 문서를 읽어와서 게시글 형식으로 뿌려준다. 

U : 수정 버튼을 누르면 그 게시물의 ID값을 가져오고, 그 ID값을 가진 문서의 '내용' 부분을 수정한 뒤, 업데이트 한다. 

D : 삭제 버튼을 누르면 그 게시물의 ID값을 가져오고, 그 ID값을 가진 문서를 삭제한다. 

 

C,R까지 막힘없이 만들었지만, U,D에서 '게시물의 ID값을 가져오고, 그 ID값을 가진 문서를 찾기'를 할 줄 모른다는 사실을 깨달았다. 

그냥 수정 버튼을 누르면 그 수정버튼을 누른 게시글이 알아서 선택되는 줄 알고 계속 id값을 불러와보라고 요청을 넣었지만 컴퓨터는 대체 어디서 무슨 ID를 찾아오라는 명령이 없었으므로 오류만 뿜어대는통에 골머리를 썩었다. 그렇게 아무것도 모르는 채로 씨름을 하다가, ID값도 게시글에 넣으면 된다는 생각이 드디어 났고, 게시글에는 저장되지만, 사용자에겐 보이지 않게 ID를 저장할 방법이 없을까 찾아보다가 데이터-속성 라는 것을 찾아냈다. 

let temp_html = `
    <div class="post" data-id = "${doc.id}">
        <p>${name} &ensp;| &ensp; ${date}</p>
        <p id="postcontent">${postingcontent}</p>
        <button id = "edit">수정</button>
        &emsp;
        <button id = "delete">삭제</button>
    </div>
    `;
            $('#posts').append(temp_html);

(doc.id라는 '문서의 ID값'을 저장한 코드)

 

이후에는 U,와 D를 간단하게 완성했다고 생각했다. 

 

 

첫번째 수정 버튼은 잘 작동했으나 두 번째에 있는 수정버튼은 작동을 안 한다는 사실을 알아버렸다. 

 

 $('#edit').click(async function () {
 어쩌구저쩌구
        })

(원래 쓰였던 코드)

 

아직 동적으로 생성된 무언가에 전부 같은 기능이 작동해야 하는 것을 만들지 않아봐서 몰랐지만, 이런 식으로 코드를 짜면 

버튼 클릭 이벤트 핸들러가 동적으로 생성된 각 게시물의 수정버튼에 할당되지 않는다는 사실을 알았다. 

이 문제를 해결하기 위해서는 이벤트 위임을 사용하면 동적으로 생성된 무언가에서도 이벤트 핸들러를 적용할 수 있다고 한다. 

 

$(document).on('click', '#edit', function () {
    어쩌구저쩌구
});

(이벤트 위임을 사용하여 쓴 코드) 

 

저렇게 코드를 짜고나니 페이지가 원하는대로 잘 작동한다는 것을 알았다. 

 

아직 모르는 게 많아서 왜 안 되지 싶은 게 너무 많지만, 하나하나 알아간다는 것이 아직 너무 즐겁고 내일은 또 뭐가 있을지 기대된다.