댓글 삭제의 개요마지막으로 댓글 삭제 기능을 구현할 것인데 댓글 삭제는 2단계로 진행이 된다.댓글 삭제 버튼을 추가하고 삭제 버튼을 클릭해 REST API 요청을 보낼 것인데, 요청을 보낼 시에 버튼을 통해 댓글의 id 값을 전달해 주어야 한다는 점을 주의해서 처리해 주어야 한다.댓글 삭제 버튼 추가하기댓글 수정 버튼 오른쪽에 아래 코드를 추가하여 댓글 삭제 버튼을 생성해준다.삭제자바스크립트로 댓글 삭제하기이제 수정과 유사한 과정으로 댓글 삭제 스크립트를 구현해 볼 것인데, 먼저 삭제 버튼을 선택하고 버튼 클릭 이벤트까지의 과정의 코드를 추가 후 정상적으로 작동되는지 확인한다.위의 이미지와 같이 콘솔에 로그가 정상적으로 찍히긴 하지만 두 번째 댓글의 삭제 버튼을 클릭 시 이벤트는 감지되지 않는다.quer..

댓글 수정의 개요앞 장에서 댓글 생성 뷰 페이지를 만들고 자바스크립트로 새 댓글을 다는 예제를 실습했다.이 장에서는 댓글 수정 뷰 페이지를 만들고 자바스크립트의 이벤트 처리를 통해 댓글을 수정해 볼 것이다.댓글 수정 페이지는 부트스트랩에서 제공하는 모달 기능을 이용해 만들 것이다.댓글 수정 뷰 페이지 만들기수정 버튼의 경우 _list.mustache 파일을 열어 닉네임 옆에 들어가도록 아래 코드를 추가해 준다.수정부트스트랩으로 가서 부분도 복사하고 수정 버튼 클릭 시 모달이 잘 나오는지 확인한다.가져온 모달 코드의 필요 없는 부분인 modal-footer 부분과 모달 제목 변경 등 코드를 수정 후 다시 확인한다.이제 몸 달 본문에 댓글 수정 폼을 넣을 것인데 수정 폼은 태그를 이용할 것이다.댓글 생성..

댓글 등록의 개요16장에서 댓글 목록 게시글 아래 출력했으나 새 댓글을 등록하는 부분은 아직 구현하지 않았다.새 댓글을 등록하기 위한 뷰 페이지를 만들고 자바스크립트 코드로 RESP API를 호출해 보도록 하겠다.더 자세히 설명하자면 document.querySelector()로 웹 페이지에서 특정 요소를 찾아 반환하고,addEventListener()로 이벤트 발생 시 특정 동작을 수행하게 하고 fetch()로 웹 페이지에서 REST API 요청을 보낸다.댓글 생성 뷰 페이지 만들기댓글 생성 뷰 페이지인 _new.mustache 파일을 열어 아래와 같이 코드를 추가해 준다. 닉네임 ..

댓글 보기의 개요15장에서 댓글 CRUD를 위한 서버의 여러 구성요소를 만들었다면, 이 장에서는 서버에서 처리한 댓글을 사용자가 볼 수 있도록 뷰페이지를 만들고 출력할 것이다.보통 게시판의 특정 글을 클릭하면 상세 페이지가 뜨면서 그 아래 댓글이 보인다.댓글 영역은 크게 두 가지로 나뉘는데 기존 댓글을 보여 주는 영역과 새 댓글을 입력하는 영역이다.두 영역은 별도의 뷰 페이지를 만들어 상세 페이지 아래에 삽입하는 형태로 구현한다.댓글 뷰 페이지 삽입하기게시글 5번의 상세 페이지에 접속해보도록 할 것인데 아래와 같이 나와야 정상이다.이제 이 화면 아래에 댓글을 출력해 볼 것인데 상세 페이지 뷰 페이지인 show.mustache 파일을 열어준다.페이지 맨 밑에 댓글을 넣기로 했으니 푸터 바로 위에 댓글 뷰 ..

댓글 REST API의 개요14장에서 댓글 엔티티와 레파지토리를 만들었다면 15장에서는 댓글 REST 컨트롤러, 서비스, DTO를 만들어 볼 것이다.댓글 REST 컨트롤러에서는 클라이언트 요청에 응답하며 뷰가 아닌 데이터를 반환할 것이고,서비스에서는 처리 흐름을 담당하며 예외 상황 발생 시 트랜잭션으로 롤백시킬 것이고,DTO에서는 사용자에게 보여 줄 댓글 정보를 담은 것으로 단순히 클라이언트와 서버 간에 댓글 JSON 데이터를 전송할 것이다.댓글 CRUD를 하려면 REST API 주소가 필요한데 아래 그림과 같이 여기에선 설계할 것이다.댓글 컨트롤러와 서비스 틀 만들기api 패키기에 CommentApiController라는 이름으로 REST 컨트롤러를 생성해 주는데,서비스와 협업할 수 있도록 댓글 서비스..

댓글 기능의 개요게시판을 보면 하나의 게시글에 수많은 댓글이 달리는데 이러한 관계를 1:n 관계라고 한다.댓글 입장에서 보면 여러 댓글이 하나의 게시글에 달리므로 n:1 관계라고 한다.위의 그림을 보면 article 테이블과 comment 테이블이 id를 기준으로 관계를 맺고 있다.두 테이블 모두 자신을 대표하는 id가 있는데 이것을 대표키 즉 PK라고 하며 PK는 중복된 값이 없어야 한다.comment 테이블에는 연관 대상을 가리키는 article_id가 하나 더 있는데 이런 것을 외래키라고 한다.외래키를 따라가면 해당 댓글이 어떤 게시글에 달린 것인지 알 수 있다.게시판 작성을 위해 Article 엔티티와 ArticleRepository를 작성한 것처럼,댓글 작성을 위한 Comment 엔티티와 Com..

테스트란테스트란 프로그램의 품질을 검증하는 것으로 의도대로 프로그램이 잘 동작하는지 확인하는 과정을 말한다.초기에는 사람이 직접 요청을 보내고 응답을 받아 일일이 확인했지만,이제는 다양한 테스트 도구들을 이용해 반복적인 검증 절차를 통해 자동화 할 수 있다.테스트 도구를 활용해 코드를 검증한다는 것은 테스트 코드를 작성해 실행한다는 말이다.테스트 코드는 보통 3단계로 작성하는데 예상 데이터를 먼저 작성하고,실제 데이터를 획득 후 예상 데이터와 실제 데이터 비교해 검증한다.작성한 코드가 통과하면 지속적인 리팩터링으로 코드를 개선하는데 테스트를 통과하지 못하면 디버깅을 해야 한다.테스트 코드는 다양한 경우를 대비해 작성하는데 이를 테스트  케이스라고 한다.테스트 케이스는 성공할 경우 뿐만 아니라 실패할 경우..

서비스와 트랜잭션의 개념서비스란 컨트롤러와 레파지토리 사이에 위치하는 계층으로 서버의 핵심 기능을 처리하는 순서를 총괄한다.웨이터에게 주문이 들어오면 주방장이 요리를 총괄하고 보조 요리사가 필요한 재료가 있다면 이를 가져온다.여기서 웨이트는 컨트롤러, 주방장은 서비스, 보조 요리사는 레파지토리라고 생각하면 쉬운데 그림으로 보면 아래와 같다.또 하나 알아야 할 개념은 트랜잭션인데 트랜잭션이란,모두 성공해야 하는 일련의 과정을 뜻하며 쪼갤 수 없는 업무 처리의 최소 단위이다.서비스 계층 만들기11장에서 만든 REST 컨트롤러 코드를 열고 보면 이 컨트롤러는 레파지토리와 협업해 게시판의 데이터를 CRUD를 했다.여기에 서비스 계층을 추가해서 컨트롤러와 서비스 레파지토리의 역할을 분업할 것이다.먼저 객체 주입된..

REST API의 동작 이해하기클라이언트가 보내는 HTTP 요청 메시지의 첫 줄에는 시작 라인인 요청 라인이 있고 그 아래에는 헤더와 본문이 있고, 응답 메시지의 첫 줄에도 시작 라인인 상태 라인이 있고 그 아래 헤더와 본문이 있다.응답으로 오는 상태 코드 요청이 성공했을 때는 200, 데이터 생성을 완료했을 때는 201을 반환한다.요청한 정보를 찾을 수 없을 시에는 404, 서버 오류는 500을 반환한다.위의 이미지와 같이 JSON은 키와 값의 쌍으로 된 속성으로 데이터를 표현하는데, JSON의 값으로 또 다른 JSON 데이터나 배열을 넣을 수도 있다.마지막으로 REST와 API의 의미를 알아보자면, 먼저 REST는 HTTP URL로 서버의 자원을 명시하고 HTTP 메서드로 해당 자원에 대해 CRUD ..