이제하네

댓글 삭제 버튼 추가하기 _list.mustache 파일을 열고 수정 버튼 아래에 태그로 삭제 버튼을 만듬 _list.mustache 수정 삭제 자바스크립트로 댓글 삭제하기 클릭 이벤트 처리하기 _list.mustache 파일의 맨 아래 빈 공간에 자바스크립트로 REST API 호출하고 응답 처리하기 url 변수에 API 주소를 저장 여기서는 백틱(')을 사용해서 API 주소를 저장 백틱 : 문자열을 정의하는 방법으로 백틱을 사용하면 ${} 문법으로 문자열에 변수 또는 식을 넣을수 있음 형식 : `삭제 버튼 클릭: ${commentId}번 댓글` // 백틱(`) 문자열에 변수 삽입 "삭제 버튼 클릭: " + commentId + "번 댓글" // 큰따옴표 문자열을 덧셈 연결 ​ fetch() 함수 작성 ..

댓글 수정 뷰 페이지 만들기 수정 버튼과 모달 추가하기 _list.mustache 파일에 {{nickname}} 다음행에 태그 넣기 부트스트랩 페이지에서 modal 를 검색해서 Modal components를 찾은후 Live demo 찾고 부분을 복사 _list.mustache 파일 복사한 코드를 {{nickname}} 아래에 붙여 넣고 줄정리 하기 버튼 제목을 변경 data-bs-toggle="modal" : 클릭하면 모달이 나타나고 다시 클릭하면 사라짐 (토글 역활) data-bs-target="#exampleModal": 해당 id의 모달이 실행 부트스트랩에서 부분도 복사하고 _list.mustache 코드의 맨 아래 붙여 넣은후 줄 정리 하기 부분의 코드 수정 모달의 id 를 comment-edi..

댓글 생성 뷰 페이지 만들기 부트스트랩 홈페이지에서 card 로 검색해 Body 스타일을 찾은후 코드를 복사 _new.mustahce 파일에 복사한 코드를 붙혀 넣기 태그에 class 속성을 card m-2로 수정하고 id는 comments-new 추가 카드 본문에 적혀 있는 텍스트 삭제 댓글 작성 폼은 부트스트랩에 form으로 검색후 OverView 스타일을 찾은후 코드를 복사 복사한 코드를 카드 본문 영역에 붙여 넣고 다음과 같이 설정 맨위에 댓글 작성 폼이라는 주석을 추가 태그중 세번째는 필요 없으므로 삭제 나머지 코드는 다음과 같이 수정하고 각 요소의 id도 이해하기 쉽게 변경 첫번째 태그는 닉네임 입력 폼으로 작성하기 위해 label의 요소의 for="exampleInputEmail1" 속성을 ..

댓글 뷰 페이지 삽입하기 comment 디렉터리를 생성하고 그 안에 _comment.mustache파일 생성 show.mustache파일에 푸터 바로 위에 댓글 뷰 파일을 삽입 _comment.mustache파일에 태그로 레이아웃을 잡고 안쪽을 2개의 영억으로 나누어 원래 댓글목록은 _list.mustache파일로 새 댓글을 _new.mustache 파일로 작성. 이 두 파일도 comment 디렉터리 안에 파일 생성 _list.mustache파일에 원래 댓글 목록 불러오기 태그로 댓글 목록 전체를 보여주는 영역을 만들고 id는 comment-list로 설정 조회한 댓글을 하나씩 꺼내서 순회할수 있도록 {{#commentDtos}}…{{/commentDtos}}를 추가 {{#commentDtos}}…{{/..

댓글 REST API의 개요 댓글 REST 컨트롤러 , 서비스, DTO를 만들어 CURD를 위한 REST API 완성 REST 컨트롤러 : 댓글 REST API를 위한 컨트롤러로 서비스와 협업, 클라이언트 요총을 받아 응답하며 뷰(view)가 아닌 데이터 반환 서비스: REST 컨트롤러와 리파지터리 사이에서 비즈니스 로직, 즉 처리 흐름을 담당하며 예외 상황이 발생했을 때 @Transactional로 변경된 데이터 롤백 DTO : 사용자에게 보여 줄 댓글 정보를 담은 것, 단순히 클라이언트와 서버 간에 댓글 JSON 데이터 전송 댓글 CRUD에 필요한 REST API 주소가 필요함 GET : 댓글 조회 POST : 댓글 생성 PATCH : 댓글 수정 DELETE : 댓글 삭제 댓글 컨트롤러와 서비스 틀 ..

댓글 기능의 개요 게시판을 보면 하나의 게시글에 수많은 댓글이 달림 이러한 관계를 one-to-many, 즉 일대다(1:n)관계 댓글 입장에서 보면 여러 댓글이 하나의 게시글에 달리므로 many-to-one, 즉 다대일(n:1) 관계 아래 그림을 보면 article 테이블과 comment 테이블이 id를 기준으로 관계를 맺고 있음 두 테이블 모두 자신을 대표하는 id가 있는데, id와 같이 자신을 대표하는 속성을 대표키(PK,Primary Key)라고함 (대표키는 동일 테이블 내에서 중복된 값 X) comment 테이블에는 연관 대상을 가리키는 article_id와 같이 연관 대상을 가리키는 속성을 외래키(FK, Foreign Key)라고함 (외래키는 항상 연관된 테이블의 대표키를 가르킴)댓글과 게시글의..

테스트: 프로그램의 품질을 검증하는 것으로, 의도대로 프로그램이 잘 동작하는지 확인 하는 과정 테스트 도구를 이용해 반복적인 검증 절차를 자동화 가능 다양한 문제를 미리 예방 하고 코드 변경 등으로 인해 발생하는 부작용도 조기 발견 가능 테스트가 통과하면 지속적인 리팩터링으로 코드를 개선 테스트가 실패하면 잘못된 부분을 찾아 고치는 디버깅을 함 테스트 코드 작성 단계 예상 데이터 작성하기 실제 데이터 획득하기 예상 데이터와 실제 데이터 비교해 검증하기 테스트 주도 개발(TDD, Test Driven Development) 먼저 테스트 코드를 만든후 이를 통과하는 최소한의 코드부터 시작해 점진적으로 코드를 개선 및 확장해 나가는 개발 방식 테스트 코드 작성하기 테스트 코드 기본 틀 만들기 프로젝트의 src..

서비스와 트랜잭션의 개념 서비스(service) : 컨트롤러와 리파지터리 사이에 위치하는 계층으로 서버의 핵심 기능(비지니스 로직)을 처리하는 순서를 총괄 트랜잭션(transaction) : 모두 성공해야 하는 일련의 과정 , 쪼갤수 없는 업무 처리의 최소 단위 서비스 업무 처리는 트랜잭션 단위로 진행 만약 트랜잭션이 실패로 돌아갈 경우 진행 초기 단계로 돌리는 것을 롤백(rollback)라고 함 서비스 계층 만들기 ArticleApiController 내에 모든 코드를 주석 처리 객체 주입된 리파지터리를 서비스로 변경후 밑에코드작성 @Autowired private ArticleService articleService; // 서비스 객체 주입 service 라는 새 패키지 생성 service 패키지 안..

REST API의 구현 과정 조회 요청 : /api/articles 또는 /api/articles/{id} → GET 메서드로 Article 목록 전체 또는 단일 Article을 조회 생성 요청 : /api/articles → POST 메서드로 새로운 Article을 생성해 목록에 저장 수정 요청 : /api/articles/{id} → PATCH 메서드로 특정 Article의 내용을 수정 삭제 요청 : /api/articles/{id} → DELETE 메서드로 특정 Article의 내용을 삭제 REST API 구현하기 REST 컨트롤러 맛보기 api 패키지를 생성후 FirstApiController.java 파일 생성 REST API를 구현할떄는 @Controller(일반 컨트롤러) 대신 @RestCo..

REST API 와 JSON 의 등장 배경 REST API(Representational State Transfer API)는 서버의 자원을 클라이언트에 구애받지 않고 사용할 수 있게 하는 설계방식 REST API 방식에서는 HTTP 요청에 대한 응답으로 서버의 자원을 반환 서버에서 보내는 응답이 독점 기기에 종속되지 않도록 모든 기기에서 통용될수 있는 데이터를 반환 서버는 클라이언트의 요청에 대한 응답으로 화면 (view)이 아닌 데이터(data)를 전송, 이때 사용하는 응답 데이터는 JSON(JavaScript Object Notation) , 과거에는 XML을 많이 사용했지만 최근에는 JSON으로 통일되는 추세 더보기 ※ API (Application Programming Interface) 애플리..