728x90

코딩 자율학습단/학습 일지 20

[DAY 20] 댓글 삭제 View 페이지 구현 및 자바스크립트 이벤트 처리

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

[DAY 19] 댓글 수정 View 페이지 구현 및 자바스크립트 이벤트 처리

댓글을 수정하는 페이지를 모달 기능을 활용하여 만든다.모달(modal)웹 페이지 내부에서 상위 레이어를 띄우는 방식, 모달 창이 뜨면 기존 창은 비활성 상태가 되고, 모달 창을 종료해야만 원래 화면으로 돌아갈 수 있음view 페이지 구현 흐름1. 댓글 목록 페이지에서 수정 버튼 코드를 넣는다. 이 버튼은 모달 트리거 버튼이 되어, 이 버튼을 클릭하면 모달이 실행된다.2. 부트스트랩의 라이브 모달 코드를 복사하여 댓글 목록 페이지에 넣는다.3. 모달의 id와 제목 등을 수정해주고, 수정 form 코드를 modal-body에 삽입한다.form 코드의 id 값이나 내용을 수정에 맞게 수정해주면 view 페이지 구현은 완료된다.자바스크립트로 댓글 수정하기이제 자바스크립트로 기존 댓글 정보를 가져오고, 자바스크립..

[DAY 17] 댓글 목록 View 페이지 구현 및 모델 등록하기

댓글에 관한 CRUD 및 REST API 구현이 끝났다.이제 해당 기능을 웹페이지 화면에서 사용할 수 있도록 mustache를 이용하여 뷰 페이지를 만들어기존 게시글 페이지에 삽입해야 한다.보통의 게시판은 게시글의 상세 페이지에 들어가면 게시글의 내용이 보이고, 하단에 댓글이 보이는 목록과 댓글을 입력하는 영역이 나누어져 있다.부트스트랩의 카드 요소를 이용하여 댓글 뷰 페이지를 생성하고, 상세 페이지의 푸터 바로 위에 뷰 파일을 삽입한다.// show.mustache...{{>comments/_comments}} {{>layouts/footer}}뷰 페이지에서 사용한 변수는 반드시 모델에 등록해야 사용할 수 있다.모델은 컨트롤러에서 해당 메서드를 호출하여 등록해야한다. // 데이터 조회 요청 접수 ..

[DAY 16] 댓글 REST API - Create, Update, Delete 구현

모든 작업의 흐름은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..

[DAY 15] 댓글 REST API - 서비스, 컨트롤러, Read 구현

어제 댓글 기능을 위해 엔티티와 리파지터리를 만들었으므로 이제 남은 건 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..

[DAY 14] 댓글 CRUD : InvalidDataAccessApiUsageException 에러

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

[DAY 13] JUnit5 테스트 코드 작성

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

[DAY 12] 컨트롤러 쪼개기 : 서비스 계층 구현과 트랜잭션

지금까지 일은 컨트롤러가 다 했다... 컨트롤러는 사실 웨이터였고 실주방장이 나설 차례.컨트롤러 안의 로직을 조각내어서 서비스가 처리하도록 리팩토링해야 한다. // 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()); // ..

[DAY 11] REST API 구현

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..

728x90