19장. 웹 페이지에서 댓글 삭제하기 19.1. 댓글 삭제의 개요 댓글 삭제는 2단계로 진행한다. 1. 댓글 [삭제] 버튼 만들기 2. [삭제] 버튼 클릭해 REST API 요청 보내기 어느 댓글에서 삭제 요청했는디 알아야 서버를 통해 댓글을 삭제할 수 있기 때문에 [삭제] 버튼 클릭 이벤트를 처리할 때 [삭제] 버튼을 통해 댓글의 id를 전달할 것이다. 19.2. 댓글 삭제 버튼 추가하기 댓글 [삭제] 버튼은 댓글 [수정] 버튼 옆에 위치할 예정이다. class 속성 값으로는 comment-delete-btn을 추가해, 댓글 삭제 시 클릭 이벤트 처리를 위한 선택자로 사용한다. 17-18장에서는 아이디 선택자(#id)를 이용해 HTML 문서의 요소를 선택했는데, 이번에는 클래스 선택자(.class)로 ..

18장. 웹 페이지에서 댓글 수정하기 18.1. 댓글 수정의 개요 댓글 수정 페이지는 부트스트랩에서 제공하는 모달 기능을 이용해 만든다. 모달(modal)은 웹 페이지에서 새 창을 띄우는 팝업 창과 달리 같은 웹 페이지 내부에서 상위 레이어를 띄우는 방식으로 사용하는 창이다. 모달 창이 뜨면 기존 창은 비활성화가 되고, 모달 창을 종료해야만 원래 화면으로 돌아갈 수 있다. 18.2. 댓글 수정 뷰 페이지 만들기 18.2.1. 수정 버튼과 모달 추가하기 [수정] 버튼을 댓글 리스트에 나타나는 닉네임 옆에 만들어보자. src > main > resources > templates > comments > _list.mustache {{nickname}} // 수정 버튼을 넣을 위치 [수정] 버튼을 눌렀을 때..

17장. 웹 페이지에서 댓글 등록하기 17.1. 댓글 등록의 개요 이번에는 새 댓글을 등록하는 부분을 구현해보자. 댓글 등록 구현을 댓글 생성 뷰(View) 페이지에 댓글 입력 폼을 만드는 것과 [댓글 작성] 버튼을 클릭해 REST API 요청을 보내는 2가지로 나눠서 진행하겠다. 그동안 REST API 요청을 보낼 때 Talend API Tester를 이용했는데, 실제 게시판에서는 해당 웹 페이지에서 바로 요청을 보내므로 자바스크립트 API를 사용해 구현해보자. · document.querySelector() - 웹 페이지에서 특정 요소(버튼)을 찾아 반환한다. · addEventListener() - 특정 요소에 이벤트(버튼 클릭)가 발생했을 때 특정 동작(댓글 객체 전달)을 수행한다. · fetch..

16장. 웹 페이지에서 댓글 목록 보기 16.1. 댓글 뷰 페이지 삽입하기 게시글의 상페 페이지 화면 아래에 댓글을 출력해보자. 상세 페이지를 보여 달라는 요청을 받아서 처리하는 ArticleController를 다뤄야 한다. 여기서 show() 메서드가 .../articles/{id} 요청 URL에 대하여 template/articles 디렉터리의 show.mustache 페이지를 반환한다. 댓글 페이지 맨 밑에 넣기로 했으니 푸터(footer) 바로 위에 댓글 뷰 파일을 삽입한다. src > main > resources > templates > articles > show.mustache Edit Delete Go to Article List {{>comments/_comments}} {{>layo..

15장. 댓글 컨트롤러와 서비스 만들기 (2) 15.4. 댓글 생성하기 15.4.1. 요청을 받아 응답할 컨트롤러 만들기 @PostMapping()으로 댓글 생성을 요청 받는다. 첫 번째 매개변수에는 댓글이 달릴 부모 게시글의 id를 받고, @PathVariable을 통해 요청 URL 의 articleId를 가져온다. 두 번째 매개변수는 생성할 댓글 정보를 가져온다. HTTP 요청의 Body로부터 JSON 데이터를 받아와야 하므로 @RequestBody를 이용해 CommentDto dto로 받는다. ★ @RequestBody 어노테이션은 HTTP 요청 본문에 실린 내용(XML, JSON, YAML)을 자바 객체로 변환해준다. src > test > java > com.example.firstproject..

15장. 댓글 컨트롤러와 서비스 만들기 (1) 15.1. 댓글 REST API의 개요 · REST 컨트롤러 - 댓글 REST API를 위한 컨트롤러 - 서비스와 협업, 클라이언트 요청을 박아 응답하며 뷰(View)가 아닌 데이터(JSON) 반환 · 서비스 - REST 컨트롤러와 리파지터리 사이에서 비즈니스 로직, 즉 처리 흐름을 담당 - 예외 상황이 발생하면 @Transactional로 변경된 데이터 롤백 · DTO - 사용자에게 보여 줄 댓글 정보를 담은 것 - 단순히 클라이언트와 서버 간에 댓글 JSON 데이터 전송 · 엔티티 - DB 데이터를 담는 자바 객체 - 엔티티를 기반으로 테이블 생성 - 리파지터리가 DB 속 데이터를 조회하거나 전달할 때 사용 · 리파지터리 - 엔티티를 관리하는 인..

14장. 댓글 엔티티와 리파지터리 만들기 14.1. 댓글 기능의 개요 14.1.1. 댓글과 게시글의 관계 게시판을 보면 하나의 글에 수많은 댓글이 달리는데, 이러한 관계를 one-to-many, 즉 일대다(1:N) 관계라고 한다. 거꾸로 댓글의 관점에서 보면 여러 댓글이 하나의 게시글에 달리므로 many-to-one, 즉 다대일(N:1) 관계라고 한다. 그림을 보면 article 테이블과 comment 테이블이 id를 기준으로 관계를 맺고 있다. 두 테이블 모두 각각 자신을 대표하는 id가 있는데, id와 같이 자신을 대표하는 속성을 대표키라고 한다. 대표키는 동일 테이블 내에 중복된 값이 없어야 한다. comment 테이블을 보면 연관 대상을 가리키는 article_id가 하나 더 있는데, articl..

13장. 테스트 코드 작성하기 13.1. 테스트란? 최근에는 테스트 도구를 이용해 반복적인 검증 절차를 자동화하고 있다. 테스트 도구를 활용해 코드를 검증한다는 것은 테스트 코드(test code)를 작성해 실행한다는 것이다. 작성한 코드가 테스트를 통과하면 지속적인 리팩터링으로 코드를 개선하고, 통과하지 못하면 잘못된 부분을 찾아 고치는 디버깅(debugging)을 해야 한다. · 테스트(test) - 프로그램의 품질을 검증하는 것 - 의도대로 프로그램이 잘 동작하는지 확인하는 과정 · 테스트 주도 개발(TDD, Test Driven Development) - 일단 테스트 코드를 만든 후 이를 통과하는 최소한의 코드부터 시작해 점진적으로 코드를 개선 및 확장하는 개발 방식 13.2. 테스트 코드 작성하..