스트링 부트3 자바 백엔드 개발 입문 16~19장

16장: 댓글 레이아웃 및 뷰 구성

댓글 레이아웃 구조

• 기존 댓글 영역: 저장된 댓글들을 나열하여 보여줌.
• 새 댓글 입력 영역: 사용자로부터 댓글을 입력받는 폼 제공.

---

댓글 뷰 파일 구성

1. 댓글 전체 영역 파일: 댓글 리스트 + 입력 영역 포함.
2. 댓글 목록 파일: 반복하여 댓글 하나씩 출력.
3. 새 댓글 작성 파일: 댓글 작성 폼 포함.

---

머스테치 문법 ({{#commentDtos}} {{/commentDtos}})

• 모델에 등록된 commentDtos 리스트를 반복 출력.
• #은 해당 블록의 시작, /은 끝을 나타냄.

{{#commentDtos}}
  <div>{{nickname}}</div>
  <div>{{body}}</div>
{{/commentDtos}}

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

댓글 등록 절차

1. 댓글 입력 폼을 뷰 페이지에 작성
2. [댓글 작성] 버튼 클릭 시 REST API 요청을 서버로 전송

버튼 요소 변수화

• HTML 요소를 변수로 받아오기 위해 querySelector() 사용

let 변수명 = document.querySelector("#id값");

버튼 이벤트 감지

• 웹 페이지에서 발생하는 이벤트(클릭, 마우스오버 등)를 감지하려면 addEventListener() 사용

변수명.addEventListener("click", 함수);

자바스크립트 댓글 객체 생성 방법

1. 객체 리터럴 방식

let reply = {
  key1: value1,
  key2: value2
};

2. 생성자 함수 방식
3. Object.create() 방식

REST API 요청 및 응답 처리

• fetch() 함수로 요청을 보냄
• 보낼 데이터가 자바스크립트 객체일 경우 JSON 문자열로 변환하여 전송

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(객체)
});

---

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

모달 (Modal)

• 같은 브라우저 내에 상위 레이어 창을 띄우는 방식
• 모달이 열리면 기존 화면은 비활성화
• 모달을 닫아야만 다시 원래 화면으로 돌아갈 수 있음

댓글 수정 절차

1. 모달 창에 수정 폼을 작성
2. 수정 버튼 클릭 시 기존 댓글 데이터를 폼에 반영
3. 수정된 내용을 REST API를 통해 서버에 전송

트리거 정보 전달 절차

• 트리거: 버튼을 클릭하면 모달이 실행됌

1. 모달 트리거 버튼에 댓글 정보를 data-속성으로 저장
2. show.bs.modal 이벤트를 통해 모달이 열릴 때 이벤트 감지
3. 이벤트 핸들러에서 트리거 버튼을 변수화
4. 트리거 버튼의 data-속성에서 댓글 정보 추출 → 수정 폼에 적용

let modal = document.querySelector("#modalId");
modal.addEventListener("show.bs.modal", function (event) {
  let button = event.relatedTarget; // 트리거 버튼
  let replyId = button.getAttribute("data-id"); // 댓글 id
  // 폼에 값 삽입
});

---

• show.bs.modal : 모달이 표시되기 직전 실행되는 이벤트
• shown.bs.modal : 모달이 표시된후 실행되는 이벤트
• hide.bs.model : 모달이 숨겨지기 직전 실행되는 이벤트
• hidden.bs.model : 모달이 숨겨진 후 실행되는 이벤트

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

댓글 삭제 절차

1. [삭제] 버튼을 댓글 항목에 추가
2. 삭제 버튼 클릭 시 REST API 요청을 통해 해당 댓글 삭제

querySelectorAll()

• 선택자로 지정한 모든 요소를 NodeList로 반환

let buttons = document.querySelectorAll(".delete-button");

forEach()

• 배열 또는 유사 배열을 순회하며 각 요소에 대해 함수 실행

buttons.forEach(function(button) {
  button.addEventListener("click", 함수);
});

백틱(`) 문자열 사용

• 키보드 숫자 1 왼쪽의 ` 키로 감싼 문자열
• 문자열 내에 변수를 삽입할 수 있음

let message = `댓글 번호는 ${replyId}입니다`;

인메모리 데이터베이스

• 데이터를 디스크가 아닌 메모리에 저장하기 때문에 다른 DB보다 데이터 접근 속도가 빠름