온보딩)방명록 시스템 개선: HTML 구조 변경과 삭제 기능 오류 수정

최근 프로젝트에서 방명록 시스템의 HTML 구조가 변경되었고, 이로 인해 삭제 기능에서 오류가 발생했다.

이 글에서는 변경 사항과,  문제를 어떻게 해결했는지 작성 하려고 한다(엄청 간단하게 해결!!).

기존 HTML 및 JQUERY  구조

먼저, 기존 댓글 카드의 HTML 구조는 다음과 같다.

    var comment_html = 
                    <div class="card mb-3" id="${id}">
                        <div class="card-body">
                            <h3 class="card-text dbtext">${name} 
                            <i class="bi bi-trash3 delete-btn" id="${id}"></i>
                            </h3>
                            <p class="card-title">${guestBook}</p>
                            <input type="hidden" id="${password}"/>
                        </div>
                    </div>;

$('.comments').append(comment_html)

$(document).on('click', '.delete-btn', function () {
 				-생략-
  var password =  $(this).siblings('input').attr('id');
  				-생략-
  })

설명

.delete-btn을 클릭시 형재 인풋태그를 찾고 인풋태그 아이디 값을 password 변수에 담는 것이다.

 

변경된 HTML 구조

var comment_html = `
                      <div class="card" id="${id}">
                        <div class="card-header">
                          ${name} <i class="bi bi-trash3 delete-btn" id="${id}"></i>
                        </div>
                        <div class="card-body">
                          <h5 class="card-title">${guestBook}</h5>
                          <input type="hidden" id="${password}"/>
                        </div>
                      </div>`

$('.comments').append(comment_html)

 

팀원분의 코드 변경이유(추측)

가독성과 유지보수성을 개선하기 위해 HTML을 팀원분이 변경 하신것 같다. 

 

발생한 문제

기존 jQuery 코드가 삭제 버튼 클릭 시 올바른 input 요소를 찾지 못하는 문제가 발생했다.

 

문제 해결: 올바른 요소 선택

$(document).on('click', '.delete-btn', function () {
					-생략-
  var password = $(this).closest('.card').find('input[type="hidden"]').attr('id');
  					-생략-
});

문제를 해결하기 위해, 삭제 버튼 클릭 시 closest와 find 메소드를 사용하여 올바른 input 요소를 선택하도록 수정했습니다:

 

수정된 코드 설명

• $(this).closest('.card'): 클릭된 삭제 버튼에서 가장 가까운 .card 요소를 찾는다.
• .find('input[type="hidden"]'): 찾은 .card 요소 안에서 input[type="hidden"] 요소를 찾는다.
• .attr('id'): 해당 input 요소의 id 값을 가져온다.

 

코드를 변경뒤 나는 정말 내 자신을 바보라고 말 했다.

그냥 인풋 태그를 .card-header div에 옮기면 되는걸 하드 코딩을 해버렸다.

    var comment_html = `
                      <div class="card" id="${id}">
                        <div class="card-header">
                          ${name} <i class="bi bi-trash3 delete-btn" id="${id}"></i>
                          <input type="hidden" id="${password}"/>
                        </div>
                        <div class="card-body">
                          <h5 class="card-title">${guestBook}</h5>
                        </div>
                      </div>`

 

이렇게 변경하고 기존 jquery로 다시 변경뒤에 코드를 실행하니 잘 됐다.

느낀 점

이번 방명록 시스템 개선 작업을 통해 협업에서 소통이 얼마나 중요한지 다시 한 번 깨달았다.

팀원이 HTML 구조를 변경하면서 내가 작성한 기존 jQuery 코드가 제대로 동작하지 않았다.

이 과정에서 몇 가지 중요한 교훈을 얻었다.

1. 소통의 중요성: HTML 구조가 변경될 때, 이런 변경 사항을 팀 내에서 미리 공유하고 논의하는 게 정말 중요하다는 걸 느꼈다.
2. 유연한 사고: 예상치 못한 문제에 직면했을 때, 새로운 접근 방식을 적용해보고 문제를 해결할 수 있는 유연한 사고가 필요하다는 걸 깨달았다.

이번 경험을 통해 팀워크와 소통의 중요성을 다시 한 번 느낄 수 있었고, 앞으로도 이를 바탕으로 더 나은 협업을 이어가고자 한다.