27강 관련 질문
198
13 asked
혹시 삭제버튼도 모달로 등록해서 삭제를 할 순없는건가요?
그러면 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함수가 모달 전용이라서 그런건가요?
Answer 1
0
안녕하세요, 인프런 AI 인턴입니다.
삭제 버튼을 모달로 처리하여 삭제하는 방식은 가능합니다. 모달을 통해서 사용자가 삭제 작업을 확인하고 생각을 다시 할 기회를 제공하기 때문에 UI/UX적으로 좋은 패턴이 될 수 있습니다. document.querySelectorAll를 사용하지 않으려면 모달의 삭제 버튼에 대해 이벤트 리스너를 등록하여 해당 이벤트가 발생했을 때 삭제 처리 로직이 수행되도록 해야 합니다.
추가로, event.relatedTarget은 이벤트와 관련된 대상(또 다른 DOM 요소)을 가리키는 속성입니다. 주로 마우스 이벤트에서 어떤 요소에서 마우스가 벗어나 다른 요소로 이동했을 경우에 사용됩니다. 따라서 모달 전용이라기보다는 특정 이벤트에서 이전 대상과 관련된 요소를 참조할 때 사용되는 속성입니다. 위 코드에서 event.relatedTarget을 사용하지 않는 이유는 삭제 버튼에 바인딩된 클릭 이벤트에서는 해당 이벤트와 직접적으로 관련된 타겟 요소(event.target)에 접근하여 댓글의 ID를 가져오기 때문입니다. relatedTarget 속성은 해당 상황에서 필요하지 않으므로 사용하지 않는 것입니다.
혹시 모달이나 이벤트 처리에 관해 더 자세한 Spring Boot 문서나 예시가 필요하시면 Spring Boot Reference Documentation을 참고하시면 도움이 될 것입니다. Spring MVC 부분에서는 이벤트 핸들링이나 컨트롤러 관련 구현 방법에 대한 내용도 있으니 Spring MVC 가이드를 참고해보시면 좋을 것 같습니다.
23강 댓글 생성 메소드 오류
0
82
2
15.14 강 에러 문제 질문
0
54
1
21강 자율 과제중 update
0
116
2
28강 DB mysql연동 관련 질문
0
279
1
22강 관련질문
0
305
2
21강 create테스트 질문
0
357
1
9강 질문 있습니다
0
277
1
로그창에 내용이 출력이 안됩니다.
0
366
1
index()함수 질문있습니다.
0
358
3
수정완료를 눌렀을때 첫번째 데이터는 전송이 안되고 다시 수정완료 버튼을 눌러야 데이터가 전송 됩니다.
0
471
1
강의와 책 질문
0
433
1
20강 질문있습니다.
0
397
1
20강에서 Article create 부분
0
287
1
16강 질문있습니다.
0
264
1
mustache의 article의 정의가 뭔가요?
0
338
2
17강 Unique index or primary key violation
1
1826
2
8강 에러 질문있습니다.
0
268
1
15강 DB연결
0
341
1
추상클래스를 사용 할 수있을까요?
0
241
1
22강 과제 질문
0
374
1
22강 질문입니다.
0
368
1
19강 create POST 500 에러
0
454
1
19강 JSON create 메서드 질문이여!!
1
540
1
15강 data.sql코드가 작동하지 않습니다.
1
659
2