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기~3기 진행할때쯤? 인스타그램으로 모집 요청을 보았고, 그때는 한창 대전에서 바쁘게 있을 때라 할 시간이 없어서 나중에 해봐야지~ 하다 이번 9기에 시작하게 되었다. 매번 채용공고를 보면서 스프링 해야지, 스프링 해야하는데 하고 미루고 미루다 이렇게 있다간 영원히 안할 것 같아 한 달동안 꼭 완독해내고 말겠단 생각에 시작한 것도 있다.(꾸준히 후기 쓰면 포인트도 주니까... 그게 제일 컸다)1주차 DAY 1 ~ 5처음 인텔리제이를 설치하고 예전에 깔아둔 오라클과의 충돌때문에 에러가 나서 설정을 많이 손 봤던 기억이 있다.MVC 패턴을 쉽게 설명..

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

댓글 생성 뷰 페이지에 댓글 입력 폼 생성1. 부트 스트랩에서 card body 스타일을 찾아 복사 붙여넣기한 후 수정한다.2. 히든 인풋으로 부모 게시글의 id를 넣는다.3. 전송 버튼을 만든다 닉네임 댓글 내용 {{#article}} {{/article}} 댓글 작성 .댓글 작성 버튼에 REST api 연결하여..

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

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