19장. 웹 페이지에서 댓글 삭제하기 19.1. 댓글 삭제의 개요 댓글 삭제는 2단계로 진행한다. 1. 댓글 [삭제] 버튼 만들기 2. [삭제] 버튼 클릭해 REST API 요청 보내기 어느 댓글에서 삭제 요청했는디 알아야 서버를 통해 댓글을 삭제할 수 있기 때문에 [삭제] 버튼 클릭 이벤트를 처리할 때 [삭제] 버튼을 통해 댓글의 id를 전달할 것이다. 19.2. 댓글 삭제 버튼 추가하기 댓글 [삭제] 버튼은 댓글 [수정] 버튼 옆에 위치할 예정이다. class 속성 값으로는 comment-delete-btn을 추가해, 댓글 삭제 시 클릭 이벤트 처리를 위한 선택자로 사용한다. 17-18장에서는 아이디 선택자(#id)를 이용해 HTML 문서의 요소를 선택했는데, 이번에는 클래스 선택자(.class)로 ..

18장. 웹 페이지에서 댓글 수정하기 18.1. 댓글 수정의 개요 댓글 수정 페이지는 부트스트랩에서 제공하는 모달 기능을 이용해 만든다. 모달(modal)은 웹 페이지에서 새 창을 띄우는 팝업 창과 달리 같은 웹 페이지 내부에서 상위 레이어를 띄우는 방식으로 사용하는 창이다. 모달 창이 뜨면 기존 창은 비활성화가 되고, 모달 창을 종료해야만 원래 화면으로 돌아갈 수 있다. 18.2. 댓글 수정 뷰 페이지 만들기 18.2.1. 수정 버튼과 모달 추가하기 [수정] 버튼을 댓글 리스트에 나타나는 닉네임 옆에 만들어보자. src > main > resources > templates > comments > _list.mustache {{nickname}} // 수정 버튼을 넣을 위치 [수정] 버튼을 눌렀을 때..

17장. 웹 페이지에서 댓글 등록하기 17.1. 댓글 등록의 개요 이번에는 새 댓글을 등록하는 부분을 구현해보자. 댓글 등록 구현을 댓글 생성 뷰(View) 페이지에 댓글 입력 폼을 만드는 것과 [댓글 작성] 버튼을 클릭해 REST API 요청을 보내는 2가지로 나눠서 진행하겠다. 그동안 REST API 요청을 보낼 때 Talend API Tester를 이용했는데, 실제 게시판에서는 해당 웹 페이지에서 바로 요청을 보내므로 자바스크립트 API를 사용해 구현해보자. · document.querySelector() - 웹 페이지에서 특정 요소(버튼)을 찾아 반환한다. · addEventListener() - 특정 요소에 이벤트(버튼 클릭)가 발생했을 때 특정 동작(댓글 객체 전달)을 수행한다. · fetch..

16장. 웹 페이지에서 댓글 목록 보기 16.1. 댓글 뷰 페이지 삽입하기 게시글의 상페 페이지 화면 아래에 댓글을 출력해보자. 상세 페이지를 보여 달라는 요청을 받아서 처리하는 ArticleController를 다뤄야 한다. 여기서 show() 메서드가 .../articles/{id} 요청 URL에 대하여 template/articles 디렉터리의 show.mustache 페이지를 반환한다. 댓글 페이지 맨 밑에 넣기로 했으니 푸터(footer) 바로 위에 댓글 뷰 파일을 삽입한다. src > main > resources > templates > articles > show.mustache Edit Delete Go to Article List {{>comments/_comments}} {{>layo..

1. 클래스가 필요한 이유 학생 정보 출력 프로그램을 만들어보면서 클래스가 필요한 이유에 대해 알아보자. · 요구 사항 : 1. 첫 번째 학생의 이름은 "학생1", 나이는 15, 성적은 90입니다. 2. 두 번째 학생의 이름은 "학생2", 나이는 16, 성적은 80입니다. 3. 각 학생의 정보를 다음과 같은 형식으로 출력해야 합니다: "이름: [이름] 나이: [나이] 성적: [성적]" 4. 변수를 사용해서 학생 정보를 저장하고 변수를 사용해서 학생 정보를 출력해야 합니다. 1.1. 변수 사용 학생 2명을 다루어야 하기 때문에 각각 다른 변수를 사용해야 하고, 학생이 늘어날 때마다 변수와 출력하는 코드를 추가해야 한다. public class ClassStart1 { public static void ma..

15장. 댓글 컨트롤러와 서비스 만들기 (2) 15.4. 댓글 생성하기 15.4.1. 요청을 받아 응답할 컨트롤러 만들기 @PostMapping()으로 댓글 생성을 요청 받는다. 첫 번째 매개변수에는 댓글이 달릴 부모 게시글의 id를 받고, @PathVariable을 통해 요청 URL 의 articleId를 가져온다. 두 번째 매개변수는 생성할 댓글 정보를 가져온다. HTTP 요청의 Body로부터 JSON 데이터를 받아와야 하므로 @RequestBody를 이용해 CommentDto dto로 받는다. ★ @RequestBody 어노테이션은 HTTP 요청 본문에 실린 내용(XML, JSON, YAML)을 자바 객체로 변환해준다. src > test > java > com.example.firstproject..

1. 메서드 정의 public static int add(int a, int b) { System.out.println(a + "+" + b + " 연산 수행"); int sum = a + b; return sum; } 메서드는 크게 메서드 선언과 메서드 본문으로 나눌 수 있다. 1.1. 메서드 선언 public static int add(int a, int b) · public static ▶ public : 다른 클래스에서 호출할 수 있는 메서드라는 뜻. (접근 제어 과정에서 자세하게 다룰 예정) ▶ static : 객체를 생성하지 않고 호출할 수 있는 정적 메서드라는 뜻. · int add(int a, int b) ▶ int : 반환 타입을 지정 ▶ add : 메서드에 이름을 부여, 해당 이름을 통..

1. 일반적인 for문 int[] numbers = {1, 2, 3, 4, 5}; // 일반 for문 for (int i = 0; i < numbers.length; i++) { int number = numbers[i]; System.out.println(number); } 일반적인 for문을 살펴보면, 배열에 있는 값을 순서대로 읽어서 number변수에 넣고 출력한다. 배열은 처음부터 끝까지 순서대로 읽어서 사용하는 경우가 많기에 인덱스를 탐색하는 변수 int i를 선언해야 한다. 그리고 i < number.length 같은 배열의 끝 조건도 지정하고 인덱스를 증가(i++)시키는 등 번잡한 일들을 해주어야 한다. 2. 향상된 for문 (for-each) int[] numbers = {1, 2, 3, ..