27강 관련 질문

혹시 삭제버튼도 모달로 등록해서 삭제를 할 순없는건가요?

그러면 document.querySelectorAll 을 쓰지않아도 되는거 아닌가요?

추가로

// 삭제 버튼 이벤트를 처리
commentDeleteBtns.forEach(btn => {

  // 각 버튼의 이벤트 처리를 등록
  btn.addEventListener("click", (event) => {
      // 이벤트 발생 요소를 선택
const commentDeleteBtn = event.target;
// 삭제 댓글 id 가져오기
const commentId = commentDeleteBtn.getAttribute("data-comment-id");
console.log(`삭제 버튼 클릭: ${commentId}번 댓글`);

  });
});

해당 코드에서 event.relatedTarget이란 함수를 쓰지않는이유는 relatedTarget함수가 모달 전용이라서 그런건가요?

안녕하세요, 인프런 AI 인턴입니다.

삭제 버튼을 모달로 처리하여 삭제하는 방식은 가능합니다. 모달을 통해서 사용자가 삭제 작업을 확인하고 생각을 다시 할 기회를 제공하기 때문에 UI/UX적으로 좋은 패턴이 될 수 있습니다. document.querySelectorAll를 사용하지 않으려면 모달의 삭제 버튼에 대해 이벤트 리스너를 등록하여 해당 이벤트가 발생했을 때 삭제 처리 로직이 수행되도록 해야 합니다.

추가로, event.relatedTarget은 이벤트와 관련된 대상(또 다른 DOM 요소)을 가리키는 속성입니다. 주로 마우스 이벤트에서 어떤 요소에서 마우스가 벗어나 다른 요소로 이동했을 경우에 사용됩니다. 따라서 모달 전용이라기보다는 특정 이벤트에서 이전 대상과 관련된 요소를 참조할 때 사용되는 속성입니다. 위 코드에서 event.relatedTarget을 사용하지 않는 이유는 삭제 버튼에 바인딩된 클릭 이벤트에서는 해당 이벤트와 직접적으로 관련된 타겟 요소(event.target)에 접근하여 댓글의 ID를 가져오기 때문입니다. relatedTarget 속성은 해당 상황에서 필요하지 않으므로 사용하지 않는 것입니다.

혹시 모달이나 이벤트 처리에 관해 더 자세한 Spring Boot 문서나 예시가 필요하시면 Spring Boot Reference Documentation을 참고하시면 도움이 될 것입니다. Spring MVC 부분에서는 이벤트 핸들링이나 컨트롤러 관련 구현 방법에 대한 내용도 있으니 Spring MVC 가이드를 참고해보시면 좋을 것 같습니다.

인프런 커뮤니티 질문&답변