Java/Spring Boot24 [Day 18] 웹 페이지에서 댓글 수정하기 1. 댓글 수정의 개요댓글 수정 페이지는 모달 기능을 이용해 만든다.모달(modal)이란?웹 페이지에서 새 창을 띄우는 팝업 창과 달리 같은 웹 페이지 내부에서 상위 레이어를 띄우는 방식으로 사용하는 창이다. 모달 창이 뜨면 기존 창은 비활성 상태가 되고, 모달 창을 종료해야만 원래 화면으로 돌아갈 수 있다.2. 댓글 수정 뷰 페이지 만들기resources > articles > Comments > _list.mustache 코드 추가 실행 결과3. 자바스크립트로 댓글 수정하기트리거 데이터 전달모달 트리거 버튼에 data-*속성을 이용하면 데이터를 모달로 전달할 수 있다.모달 트리거 버튼에 수정할 댓글 정보를 data-* 속성 값으로 저장한다.show.bs.modal 이벤트를 감지해 핸들러에서 모달 트리.. 2024. 8. 14. [Day 17] 웹 페이지에서 댓글 등록하기 1. 댓글 등록의 개요크게 2가지로 진행된다.댓글 생성 뷰 페이지(_new)에 댓글 입력 폼 만들기[댓글 작성] 버튼을 클릭해 REST API 요청 보내기사용하는 자바스크립트 APIdocument.querySelector(): 웹페잊에서 특정 요소(버튼)를 찾아 반환addEventListener(): 특정 요소에 이벤트가 발생(버튼 클릭)했을 때 특정 동작(댓글 객체 전달)을 수행fetch(): 웹 페이지에서 REST API 요청(POST 요청)을 보낸다.2. 댓글 생성 뷰 페이지 만들기resources > articles > Comments > _new.mustache 코드3. 자바스크립트로 댓글 달기// 해당 id 값을 가진 요소를 찾아 변수에 저장하기자료형 변수명 = document.querySel.. 2024. 8. 13. [Day 16] 웹 페이지에서 댓글 목록 보기 1. 댓글 보기의 개요댓글의 영역은 크게 2가지로 나뉜다.기존 댓글을 보여주는 댓글 목록 뷰(_list)새 댓글을 입력하는 댓글 생성 뷰(_new)2. 댓글 뷰 페이지 삽입하기resources > articles > Show.mustache 코드 추가 resources > articles > Comments > _comments.mustache 만들기 resources > articles > Comments > _list.mustache 만들기3. 댓글 목록 가져오기controller > ArticleController 코드 추가 실행 결과 2024. 8. 13. [Day 15] 댓글 컨트롤러와 서비스 만들기 1. 댓글 REST API의 개요REST 컨트롤러: 댓글 REST API를 위한 컨트롤러로 서비스와 협업, 클라이언트 요청을 받아 응답하며 뷰(View)가 아니 데이터 변환(CommentApiController)서비스: REST 컨트롤러와 리파지터리 사이에서 비즈니스 로직, 즉 처리 흐름을 담당하여 예외 상황이 발생했을 때 @Transactional로 변경된 데이터 롤백(CommentService)DTO: 사용자에게 보여 줄 댓글 정보를 담은 것, 단순히 클라이언트와 서버 간에 댓글 JSON 데이터 전송(CommentDto)엔티티: DB 데이터를 담는 자바 객체로 엔티티를 기반으로 테이블 생성, 리파지터리가 DB 속 데이터를 조회하거나 전달할 때 사용(Comment)리파지터리: 엔티티를 관리하는 인터페이.. 2024. 8. 12. [Day 14] 댓글 엔티티와 리파지터리 만들기 1. 댓글 기능의 개요1. 댓글과 게시글의 관계하나의 게시글에 수많은 댓글이 달린다. 이러한 관계를 일대다(1:n) 관계라고 한다. 거꾸로 댓글 입장에서 여러 댓글이 하나의 게시글에 달리는 것은 다대일(n:1) 관계라고 한다. article : comment = 1 : n 관계article_id와 같이 자신을 대표하난 속성을 기본키(PK, Primary Key)라고 하고 comment 테이블에서 article_id와 같이 연관 대상을 가리키는 속성을 외래키(FK, Foreign Key)라고 한다. 2. 댓글 엔티티와 리파지터리 설계엔티티: DB 데이터를 담는 자바 객체로, 엔티티를 기반으로 테이블 생성리파지터리: 엔티티를 관리하는 인터페이스로 데이터 CRUD 등의 기능 제고 Repository: 최상의 .. 2024. 8. 10. [Day 13] 테스트 코드 작성하기 1. 테스트란?테스트(test)란?프로그램의 품질을 검증하는 것으로, 의도대로 프로그램이 잘 동작하는지 확인하는 과정이다. 테스트 도구를 이용해 반복적인 검증 절차를 자동화할 수 있어서 다양한 문제를 미리 예방하고 코드 변경 등으로 인해 발생하는 부작용도 조기에 발견할 수 있다. 테스트 도구를 활용해 코드를 검증한다는 것은 테스트 코드를 작성해서 실행한다는 뜻이다. 테스트 코드의 과정은 3단계로예상 데이터 작성하기실제 데이터 획득하기예상 데이터와 실제 데이터 비교해 검증하기작성한 코드가 테스트를 통과하면 지속적인 리팩터링으로 코드를 개선한다. 테스트를 통과하지 못하면 잘못된 부분을 찾아 고치는 디버깅(debugging)을 해야 한다. 테스트 코드는 다양한 경우를 대비해 작성한다. 이를 테스트 케이스(t.. 2024. 8. 10. 이전 1 2 3 4 다음
