YOUNG's coding log

1. 댓글 삭제 버튼 추가수정 버튼 옆에 삭제 버튼을 추가하기 위해 수정 버튼 구현한 부분 바로 아래에 삭제 버튼 코드를 작성한다. 삭제2. 삭제 버튼 클릭하여 REST API 요청 보내기 { // 삭제 버튼 선택 const commentDeleteBtns = document.querySelectorAll(".comment-delete-btn"); // 삭제 버튼 이벤트 처리 // commentDeleteBtn.addEventListener("click", function() { // console.log("삭제 버튼이 클릭됐습니다..!"); // }); commentDeleteBtns.forEach(btn..

모든 작업의 흐름은1. 컨트롤러 만들기2. 서비스 만들기로 이루어진다. 또한 생성, 수정, 삭제는 DB에 접근하기 때문에 @Transactional 어노테이션을 주어야 한다.댓글 생성1. 컨트롤러 만들기// CommentApiController.java // 2. 댓글 생성 @PostMapping("/api/articles/{articleId}/comments") public ResponseEntity create(@PathVariable Long articleId, @RequestBody CommentDto dto) { // 서비스에 위임 CommentDto createdDto = c..

어제 댓글 기능을 위해 엔티티와 리파지터리를 만들었으므로 이제 남은 건 DTO, REST 컨트롤러, 서비스다.API 주소 설계GET /articles/articleId/commentsPOST /articles/aritcleId/commentsPATCH /comments/idDELECT /comments/id 댓글 조회1. 컨트롤러2. 서비스3. dto순서대로 만들면 된다이때 서비스에서 for문으로 댓글 엔티티를 하나씩 꺼내서 dto로 변환하는데 이를 스트림 문법으로 리팩토링하는 구문이 나온다. public List comments(Long articleId) { // 1. 댓글 조회 List comments = commentRepository.findByArticleId(a..

Many-To-One게시글과 댓글은 1:N, 즉 다대일 관계이다. 게시글 하나당 n개의 댓글이 달리기 때문이다.그리하여 댓글 CRUD를 위한 엔티티를 생성할때, @manytoone 어노테이션을 선언해주고, 외래키 매핑을 해주어야 한다.또한 댓글은 CRUD 뿐만 아니라 페이지별로 정렬하여 나타내야하기때문에 CrudRepository를 상속받는 것이 아닌 JpaRepository를 상속 받아 ListCrudRepository와 ListPagingAndSortingRepository 기능을 사용할 것이다.외래키 매핑@JoinColumn(name="외래키_이름")댓글 엔티티는 게시글 엔티티의 id를 외래키로 사용한다. 그러므로 name은 article_id가 된다특정 게시글의 모든 댓글 조회해당 메서드에서 조회..

TDD테스트 주도 개발, 일단 테스트 코드를 만들고 이를 통과하는 최소환의 코드부터 개발을 시작하여 점진적으로 코드를 리팩토링하며 확장해나가는 개발방법론테스트 코드 작성 흐름1. 예상 데이터 작성2. 실제 데이터 받기3. 비교 및 검증 테스트 생성법 : 테스트하고 싶은 함수 ALT + Insert > Test > member 로 해당 메서드 체크 후 ok테스트 결과 실패시 나타나는 화면예상 결과값과 실제 결과값 비교해줌(실패한 이유 : 테스트 코드에 id 값을 모두 1L로 적어서)테스트 성공시 화면진행한 테스트 옆에 체크 표시 > 테스트 성공한 것 Trouble Shooting문제 상황create() 메소드 테스트 하려니 에러 발생.  required: no arguments found: ,java.la..

지금까지 일은 컨트롤러가 다 했다... 컨트롤러는 사실 웨이터였고 실주방장이 나설 차례.컨트롤러 안의 로직을 조각내어서 서비스가 처리하도록 리팩토링해야 한다. // PATCH @PatchMapping("/api/articles/{id}") public ResponseEntity update(@PathVariable Long id, @RequestBody ArticleForm dto) { // 1. DTO -> 엔티티 변환 Article article = dto.toEntity(); log.info("id: {}, article: {}", id, article.toString()); // ..

REST API URI 설계 조회 요청 (GET) : /api/articles or /api/articles/{id}생성 요청 (POST) : /api/articles수정 요청 (PATCH) : /api/articles/{id}삭제 요청 (DELETE) : /api/artcles/{id}\ 여태 만들었던 일반 컨트롤러와 REST 컨트롤러의 차이일반 컨트롤러는 mustache 파일은 반환한다. 즉, 백엔드단에서 만들어둔 뷰페이지 파일(html)을 반환한다.그러나 지금부터 만들 REST 컨트롤러는 JSON이나 텍스트와 같은 데이터를 반환한다.조회 요청 (GET) // GET @GetMapping("/api/articles") public List index() { return a..

흐름1. 클라이언트가 HTTP 메서드로 특정 게시글의 삭제 요청 (상세 페이지에 Delete 버튼 추가)2. 삭제 요청을 받은 컨트롤러가 리파지터리를 통해 DB에 저장된 데이터를 찾아 삭제 (ArticleController에 delete() 메서드 추가, @Getmapping 사용 - findById(id) 메서드로 id 찾은 후 null이 아닌지 확인하고 null이 아니라면 삭제)3. 삭제 완료됐다면 클라이언트를 결과 페이지로 리다이렉트 및 삭제 메시지 남기기 (삭제 후 목록으로 돌아가야하므로 redirect:/articles 설정) 삭제 완료 메세지 남기기RedirectAttributes 객체의 addFlashAttribute() 메서드 사용.addFlashAttribute() : 리다이렉트 시점에서..

흐름데이터 수정 1단계 : 수정 페이지를 만들고 기존 데이터 불러오기1. 수정 페이지 요청 (상세 페이지에 edit 버튼 추가, ArticleController에 edit() 메서드 추가, url : /articles/{id}/edit)2. DB에서 데이터를 찾아 서버로 전송(articleRepository의 findById(id) 메서드 이용)3. 가져온 데이터를 모델에 등록4. 뷰 페이지 출력 (edit.mustache 추가) 데이터 수정 2단계 : 데이터를 수정해 DB에 반영한 후 결과를 볼 수 있게 상세 페이지로 리다이렉트1. 폼 데이터 전달 (form 태그는 patch 사용 불가, post로 하되 id값을 넘겨야하므로 input에 hidden 설정으로 value="{{id}}" 추가)2. DTO..

링크 (Link)미리 정해 놓은 요청을 간편히 전송하는 기능, 페이지 이동을 위해 사용한다html의 , 태그로 작성, 클라이언트가 링크를 통해 어느 페이지로 이동하겠다고 요청하면 서버는 결과 페이지를 응답함리다이렉트 (Redirect)클라이언트가 보낸 요청을 마친 후 계속해서 처리할 다음 요청 주소를 재지시하는 것.이를 통해 부리된 기능을 하나의 연속적인 흐름으로 연결할 수 있다.리다이렉트 지시를 받은 클라이언트는 해당 주소로 다시 요청을 보내고 서버는 이에 대한 결과를 응답함.실습 다 하고 블로그 적을 때 보니까 헷갈려서 코드 보고 다시 그림 그리면서 복습했음!