스프링부트3 백엔드 17장~19장

17장 웹 페이지에서 댓글 등록하기

17.1 댓글 등록의 개요

1. 댓글 생성 뷰 페이지(_new)에 댓글 입력 폼 만들기
2. [댓글 작성] 버튼을 클릭해 REST API 요청 보내기

 

• document.querySelector(): 웹 페이지에서 특정 요소(버튼)을 찾아 반환한다
• addEventListener(): 특정 요소에 이벤트가 발생(버튼 클릭)했을 때 특정 동작(댓글 객체 전달)을 수행한다
• fetch(): 웹 페이지에서 REST API 요청(POST 요청)을 보낸다

 

17.2 댓글 생성 뷰 페이지 만들기

부트스트랩에서 코드를 복사해주고

_new.mustache에 추가한 후 조금 수정해준다

수정 완료!

 

17.3 자바 스크립트로 댓글 달기

17.3.1 버튼 클릭 이벤트 감지하기

 

17.3.2 새 댓글 자바스크립트 객체 생성하기

새로 작성한 닉네임과 댓글 본문을 자바스크립트 객체로 만들어 출력해보자

 

17.3.3 자바스크립트로 REST API 호출하고 응답 처리하기

fetch 함수를 작성했다. 전송 본문은 comment 객체를 JSON 형태로 변환해 전송하기 위해 JSON.stringfy() 메서드를 이용한다.

콘솔에도 추가된 걸 확인할 수 있다

댓글 등록 완료 팝업을 출력하기 위한 코드

잘 작동한다!

18장 웹 페이지에서 댓글 수정하기

18.1 댓글 수정의 개요

모달(modal): 웹 페이지에 새 창을 띄우는 팝업 창과 달리 같은 웹 페이지 내부에서 상위 레이어를 띄우는 방식으로 사용하는 창

 

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

18.2.1 수정 버튼과 모달 추가하기

• data-bs-toggle="modal": 클릭하면 모달이 나타나고 다시 클릭하면 사라짐(토글 역할)
• data-bs-target="#exampleModal": 해당 id의 모달 실행

 

부트스트랩에서 paste해줬다

modal 창 확인 가능~

코드를 약간 수정해서 바꿔주었다

 

18.2.2 수정 폼 삽입하기

_list.mustache를 수정해준다

모달이 변경된 것 확인 가능

 

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

18.3.1 트리거 데이터 전달하기

댓글 수정 버튼을 클릭했을 때 수정폼에 이전 댓글 데이터가 전달될 수 있도록 해보자

먼저 데이터 속성을 추가해주고

모달 이벤트 처리를 해준다.

 

<모달 동작과 관련한 이벤트 타입>

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

 

 

<이벤트 핸들러> :특정 이벤트 처리를 담당하는 함수

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

 

이벤트 처리를 마저 해주고 빌드해보면

수정 폼에 데이터가 반영된 것을 확인할 수 있다

 

18.3.2 자바스크립트로 REST API 호출하고 응답 처리하기

모달 창 정보로 댓글을 수정해보자

fetch함수 추가

댓글 수정 확인 가능하도록 구현

잘 동작하는지 확인

 

19장 웹 페이지에서 댓글 삭제하기

19.1 댓글 삭제 개요

1. 댓글 [삭제]버튼 추가하기
2. [삭제] 버튼 클릭해 REST API 요청 보내기

 

19.2 댓글 삭제 버튼 추가하기

 

19.3 자바스크립트로 댓글 삭제하기

19.3.1 클릭 이벤트 처리하기

백틱 사용시 변수 넣을 수 있어 편리하다

 

19.3.2 자바스크립트로 REST API 호출하고 응답 처리하기