[ Spring Boot ] 맨날 까먹는 나를 위한 복습 - 18 -

18.1 댓글 수정의 개요

• 모달이란?
  • 웹 페이지에 새 창을 띄우는 팝업 창과 달리 같은 웹 페이지 내부에서 상위 레이어를 띄우는 방식으로 사용하는 창
  • 모달 창이 뜨면 기존 창은 비활성 상태가 되고, 모달 창을 종료해야만 원래 화면으로 돌아갈 수 있음.

 

18.2 댓글 수정 뷰 페이지 만들기

• 트리거(trigger)란?
  • 영어로 방아쇠라는 뜻인데, 방아쇠를 당기면 총알이 날아가듯이 모달 트리거 버튼을 클릭하면 모달이 실행된다는 뜻
  • data-bs-toggle="modal" : 클릭하면 모달이 나타나고 다시 클릭하면 사라짐(토글 역할)
  • data-bs-target="#exampleModal" : 해당 id의 모달 실행

 

18.3 자바스크립트로 댓글 수정하기

• data-로 시작하는 속성을 데이터 속성이라고 함
• 데이터 속성이란?
  • HTML 요소에  추가 정보를 저장하고 싶을 때 사용함
  • 개수에 제한이 없으므로 하나의 요소에 여러 데이터 속성을 사용할 수 있음
  • 속성 이름은 data-로 시작하고 그 다음에 자유롭게 붙이면 됨

 

 

• 모달 이벤트 처리란?
  • 받아온 데이터를 모달의 각 폼에 출력하는 것

 

• addEventListener()로 이벤트 감지하는 법

요소명.addEventListener("이벤트_타입", 이벤트_처리_함수)

 

• show.bs.modal은 모달 동작의 이벤트 타입

이벤트 타입	설명
show.bs.modal	모달이 표시되기 직전 실행되는 이벤트
shown.bs.modal	모달이 표시된 후 실행되는 이벤트
hide.bs.modal	모달이 숨겨지기 직전 실행되는 이벤트
hidden.bs.modal	모달이 숨겨진 후 실행되는 이벤트

 

• function(event)는 모달이 열리는 이벤트를 매개변수로 받아 실행되는 함수
• 이렇게 특정 이벤트 처리를 담당하는 함수를 이벤트 핸들러 라고 함
• "show.bs.modal" : 모달이 열리기 직전 발생하는 이벤트
• function(event) : 이벤트를 받아 처리하는 함수, 즉 이벤트 핸들러
• function(event)의 event : 발생된 이벤트 정보를 가리키는 매개변수, 여기서는 show.bs.modal을 가리킴

 

• 모달 트리거 버튼은 매개변수로 받은 event의 relatedTarget 즉, event.relatedTarget으로 선택할 수 있음
• show.bs.modal 이벤트에서 event.target은 모달이 되고, event.relatedTarget은 트리거 버튼이 됨. 이벤트의 주체가 모달이기 때문

 

• 응답 처리는 fetch().then(response => { 응답 처리문 }) 구문을 이용함. 여기서 response는 API 요청을 보내고 받은 응답 객체