🐣구현 순서

• 백엔드
  ① DB테이블 생성
  ② Mapper XML 작성 | SQL→CRUD
  ③ DAO/DTO 작성 & 테스트
  ④ Service 작성 & 테스트
  ⑤ Controller 작성 & 테스트

• 프론트엔드
  ⑥ view(UI) 작성 & 테스트 | HTML, CSS, JS, JQuery
  

① DB테이블 생성

② Mapper XML 작성 | SQL→CRUD

③ DAO/DTO 작성 & 테스트

④ Service 작성 & 테스트

✔️ 댓글 추가/삭제 시 boardDao(comment_cnt)에도 영향이 가기 때문에 boardDao와 commentDao 둘 다 주입을 받아야함
✔️ 인스턴스 변수로 주입받으면 @Autowired를 일일이 붙여주어야 하고 오류 발생 시 발견하기 어렵기 때문에 생성자로 주입받기를 권장

⑤ Controller 작성 & 테스트

✅ Path Variable: 특정 인덱스에 대한 조회. 어떤 자원를 식별하고 싶을 때 사용
✅ Query String: 쿼리스트링은 특정 값으로 필터링. 정렬이나 필터링을 할 때 용이

@DeleteMapping("/comments/{cno}")  // /comments/1?bno=1085
public ResponseEntity<String> remove(@PathVariable Integer cno, Integer bno, HttpSession session) { }

✅ @RestController : @Controller + @ResponseBody

---

⑥ view(UI) 작성 & 테스트

✔️ $0 : 선택한 element에 대한 참조
✔️ dir( ) : element의 속성을 모두 볼 수 있음
✔️ data-... : 사용자 정의 attribute       ex) data-cno, data-bno

✔️ 자바스크립트 trim() : 문자열 양끝 공백 제거, 문자열 중간 공백은 유지
✔️ 비동기 요청에 이벤트를 적용시키려면 동적 요소인 비동기가 아닌 고정된 요소에 걸어야 함
ex) $("#commentList").on("click", ".delBtn", function(){
commentList가 고정된 요소, delBtn은 비동기 요청이 오기 전 이벤트가 걸리지 않음

---

참고) 자바의 정석 | 남궁성과 끝까지 간다