my practice

기존과 비슷할 것이라 예상 가능

버튼을 추가하고

버튼을 눌렀을 때 스크립트를 띄우는 식

댓글 수정 역시 자바스크립트로 

댓글 수정 페이지는 부트스트랩에서 제공하는 모달 기능 이용해서 만든다.

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

모달 창이 뜨면 기존 창은 비활성 상태가 되고, 모달 창을 종료해야만 원래 화면으로 돌아갈 수 있다.

모달 창 처리 안하면 기존 창은 상호작용이 안되는 식

댓글 추가하는 형태와 비슷하다. 단지 닉네임 옆의 수정 버튼을 누르면

수정을 위한 모달이 나오고, 모달 안에서 댓글을 수정한다.

- 수정할 때 원래 닉네임과 본문이 입력창 안에 뜨도록 하기위해 임시 변수 data-bs-nickname 등에 값을 저장해두고 불러와서 출력해놓는다.

그 후 수정한 내용을 수정 완료 버튼을 눌렀을 때 fetch를 통해 DB에 PATCH 로 업데이트 할 수 있도록 한다.

새 댓글을 등록하기 위한 뷰 페이지를 만들고 자바스크립트 코드로 댓글 생성 요청을 보낸 후 응답받기

댓글 등록:

1. 댓글을 생성할 수 있는 뷰 페이지 양식을 만들기 _new.mustache

2. 댓글 작성 버튼을 눌러 REST API 요청 보내기

실제 게시판에서는 해당 웹페이지에서 바로 요청을 보낸다. 이를위한 자바스크립트 API

document.querySelector() : 웹 페이지에서 특정 요소(버튼)을 찾아 반환

addEventListener() : 특정 요소에 이벤트가 발생(버튼 클릭) 했을 때 특정 동작 (댓글 객체 전달)을 수행

fetch() : 웹 페이지에서 REST API 요청(POST 요청)을 보낸다.

댓글 생성 뷰 페이지 만들기

_new . mustache 만들면 보이긴 한다.

이제 자바스크립트로 입력 받은 내용을 서버에 저장하는 과정 작성

웹 페이지에서 자바스크립트를 사용하여 REST API 호출하기

1. 버튼 클릭 이벤트 감지하기

_new.mustache 코드 맨 아래에 <script> 추가, 안쪽 {} 으로 감싸기

자바 스크립트 querySelector() 메서드 사용, 웹 페이지에서 특정 요소를 선택할 때 사용, 

이때 id, name, class, HTML 태그 등 값 입력하면 해당 속성 값을 가진 대상을 반환

<script> 안쪽에

자바스크립트 문으로 댓글을 등록한다.

자료형 변수명 = document.querySelector("#id_값"); : 문서 내 특정 요소를 변수로 받아오기

버튼 이벤트 감지

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

댓글 객체는 

const comment = { id = ~.document.querySelector("# ~~ );

REST API 호출과 응답 처리

fetch 함수로 

fetch ( 'API 주소', { method, headers, body} . then(response => { 응답 처리문})

댓글을 뷰페이지에서 직접 CRUD 하도록 구현

서버에서 처리한 댓글을 사용자가 볼수 있도록 뷰 페이지 만들고 출력하기

게시판의 특정 글을 클릭하면 상세 페이지 show 가 뜨며 그 아래 댓글이 보인다.

댓글 영역은 크게 2가지,

기존 댓글을 보여주는 영역 _list

새 댓글을 입력하는 영역 _new

/articles/5 페이지는 5번 게시글의 title, content 가 보여진다.

show.mustache와 5번 게시글 정보 사용

댓글이 페이지 맨 아래 보이게 하도록 하기 위해 

footer 위 댓글 뷰 파일 삽입하기

footer처럼 {{>comments/_comments}} 로 삽입

comments에는 _line과 _new 영역이 존재하고 

_comments 안에 둘다 레이아웃으로 삽입

mustache 파일 구조 만들어도 웹 뷰 페이지가 보이지 않는다.

--> MVC 패턴에서 화면에 필요한 데이터를 모델에 등록해야 한다.

다시 컨트롤러에서 show 메서드 확인, article/id  보여달라는 요청이 들어오면

리파지토리에서 해당 id의 게시글을 검색해서 show.mustache 뷰 파일을 보여주는 메서드이다.

이 메서드에서 commentDtos를 불러온다 -> 입력받은 id (부모 게시글의 id) 에 해당하는 댓글을 리스트로 가져와서

모델에 addAttribute("commentDtos", commentDtos)로 등록해준다.

이러면 mustache 뷰 파일에서 모델에있는 commentDtos 에 있는 nickname과 body를 출력해줄 수 있다.