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

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

15장. 댓글 컨트롤러와 서비스 만들기 (1) 15.1. 댓글 REST API의 개요 · REST 컨트롤러 - 댓글 REST API를 위한 컨트롤러 - 서비스와 협업, 클라이언트 요청을 박아 응답하며 뷰(View)가 아닌 데이터(JSON) 반환 · 서비스 - REST 컨트롤러와 리파지터리 사이에서 비즈니스 로직, 즉 처리 흐름을 담당 - 예외 상황이 발생하면 @Transactional로 변경된 데이터 롤백 · DTO - 사용자에게 보여 줄 댓글 정보를 담은 것 - 단순히 클라이언트와 서버 간에 댓글 JSON 데이터 전송 · 엔티티 - DB 데이터를 담는 자바 객체 - 엔티티를 기반으로 테이블 생성 - 리파지터리가 DB 속 데이터를 조회하거나 전달할 때 사용 · 리파지터리 - 엔티티를 관리하는 인..

14장. 댓글 엔티티와 리파지터리 만들기 14.1. 댓글 기능의 개요 14.1.1. 댓글과 게시글의 관계 게시판을 보면 하나의 글에 수많은 댓글이 달리는데, 이러한 관계를 one-to-many, 즉 일대다(1:N) 관계라고 한다. 거꾸로 댓글의 관점에서 보면 여러 댓글이 하나의 게시글에 달리므로 many-to-one, 즉 다대일(N:1) 관계라고 한다. 그림을 보면 article 테이블과 comment 테이블이 id를 기준으로 관계를 맺고 있다. 두 테이블 모두 각각 자신을 대표하는 id가 있는데, id와 같이 자신을 대표하는 속성을 대표키라고 한다. 대표키는 동일 테이블 내에 중복된 값이 없어야 한다. comment 테이블을 보면 연관 대상을 가리키는 article_id가 하나 더 있는데, articl..

13장. 테스트 코드 작성하기 13.1. 테스트란? 최근에는 테스트 도구를 이용해 반복적인 검증 절차를 자동화하고 있다. 테스트 도구를 활용해 코드를 검증한다는 것은 테스트 코드(test code)를 작성해 실행한다는 것이다. 작성한 코드가 테스트를 통과하면 지속적인 리팩터링으로 코드를 개선하고, 통과하지 못하면 잘못된 부분을 찾아 고치는 디버깅(debugging)을 해야 한다. · 테스트(test) - 프로그램의 품질을 검증하는 것 - 의도대로 프로그램이 잘 동작하는지 확인하는 과정 · 테스트 주도 개발(TDD, Test Driven Development) - 일단 테스트 코드를 만든 후 이를 통과하는 최소한의 코드부터 시작해 점진적으로 코드를 개선 및 확장하는 개발 방식 13.2. 테스트 코드 작성하..

12장. 서비스 계층과 트랜잭션 12.1. 서비스와 트랜잭션 개념 · 서비스 - 컨트롤러와 리파지터리 사이에 위치하는 계층 - 서버의 핵심 기능(비지니스 로직)을 처리하는 순서를 총괄 · 트랜잭션 - 모두 성공해야 하는 일련의 과정 - 쪼갤 수 없는 업무 처리의 최소 단위 · 롤백 - 트랜잭션이 실패로 돌아갈 경우 진행 초기 단계로 돌리는 것 앞서 작성한 REST 컨트롤러 코드를 보면 컨트롤러의 역할과 서비스의 역할을 동시에 하는 1인 2역 코드이다. 따라서 클라리언트의 요청을 받고 응답하는 컨트롤러의 역할 코드와 리파지터리에서 데이터를 가져오도록 하는 서비스 역할 코드를 나눠서 분리해야 한다. 12.2. 서비스 계층 만들기 먼저 객체 주입된 리파지터리를 서비스로 바꾸고 ArticleService 클래스..

11장. HTTP와 REST 컨트롤러 11.1. REST API 의 동작 이해하기 · REST - HTTP URL로 서버의 자원을 명시하고, - HTTP 메서드(POST, GET, PATCH, DELETE)로 해당 자원에 대해 CRUD(생성, 조회, 수정, 삭제)하는 것. · API - 클라이언트가 서버의 자원을 요청할 수 있도록 서버에서 제공하는 인터페이스(interface) 클라이언트가 보내는 HTTP 요청 메시지의 첫 줄에는 시작 라인인 요청 라인(request line)이 있고, 그 아래에는 헤더(header)와 본문(body)가 있다. 응답 메시지의 첫 줄에도 시작 라인인 상태 라인(status line)이 있고, 그 아래 헤더(header)와 본문(body)가 있다. 응답으로 오는 상태 코드는..

10장. REST API와 JSON 10.1. REST API와 JSON 등장 배경 웹 서비스를 사용하는 클라이언트는 웹 브라우저 뿐만 아니라 스마트폰, 스마트워치, 태블릿, CCTV, 각종 센서 등으로 다양하다. 따라서 서버는 이러한 모든 클라리언트의 요청에 응답해야 하고 웹 브라우저 뿐만 아니라 어떤 기기가 와도 기기에 맞는 뷰 페이지를 응답해야 하는데, 이것이 REST API가 필요한 이유이다. · REST API (Representational State Transfer API) - 서버의 자원을 클라이언트에 구애받지 않고 사용할 수 있게 하는 설계 방식 - REST API 방식에서는 HTTP 요청에 대한 응답으로 서버의 자원을 반환한다. - 이 때 서버에서 보내는 응답이 특정 기기에 종속되지 않..

9장. CRUD와 SQL 쿼리 종합 서버에서 데이터의 생성, 조회, 수정, 삭제 등을 요청하면 JPA의 리파지터리가 DB에 해당 요청을 전달하고, 요청을 받은 DB는 SQL로 쿼리를 작성해 데이터를 관리한다. 9.1. JPA 로깅 설정하기 · 쿼리(Query) - DB에 정보를 요청하는 구문 데이터 관리 SQL HTTP 데이터 생성(Create) INSERT POST 데이터 조회(Read) SELECT GET 데이터 수정(Update) UPDATE PATCH (PUT) 데이터 삭제(Delete) DELETE DELETE ·로깅(Logging) - 시스템이 작동할 때 당시의 상태와 작동정보를 기록하는 것 9.1.1. 로깅 레벨 설정 + 쿼리 줄 바꿈 + 매개변수 보여주기 src > main > resour..

8장. 게시글 삭제하기 : Delete 8.1. 데이터 삭제 과정 (1) 클라이언트가 HTTP 메서드로 특정 게시글의 삭제를 요청 (2) 컨트롤러는 리파지터리를 통해 DB에 저장된 데이터를 삭제, (기존에 데이터가 있는 경우에만 수행) (3) 삭제 완료 후 클라이언트를 결과 페이지로 리다이렉트 · RedirectAttributes - 결과 페이지로 리다이렉트할 때 클라이언트에 삭제 완료 메시지도 같이 띄워주기 위한 클래스 - RedirectAttributes 객체의 addFlashAttribute() 메서드를 통해 리다이렉트된 페이지에서 사용할 일회성 데이터 등록 8.2. 데이터 삭제하기 8.2.1. Delete 버튼 추가 src > main > resources > template > articles ..

7장 : 게시글 수정하기 : Update 7.1. 데이터 수정 과정 7.1.1. 만들고 기존 데이터 불러오기 - 상세 페이지에서 [Edit] 버튼 누르기 - 요청 받은 컨트롤러가 해당 글의 id로 DB에서 데이터 가져오기 - 컨트롤러가 가져온 데이터를 뷰에서 사용하도록 모델에 등록 - 모델에 등록된 데이터를 에서 보여주기 7.1.2. 데이터를 수정해 DB에 반영 후 결과를 볼 수 있게 로 리다이렉트 - 폼 데이터(수정 요청 데이터)를 DTO에 담아 컨트롤러에서 받기 - DTO를 엔티티로 변환 - DB에서 기존 데이터를 수정 데이터로 갱신 - 수정 데이터를 로 리다이렉트 7.2. 수정 페이지 만들기 7.2.1. Edit 버튼 만들기 src > main > resources > template > artic..

6장 : 게시판 내 페이지 이동하기 6.1. 링크와 리다이렉트란? · 링크 - 미리 정해 놓은 요청을 간편히 전송하는 기능 - 보통 페이지 이동을 위해 사용 - HTML의 태그 혹은 태그로 작성 · 리다이렉트 - 클라이언트가 보낸 요청을 마친 후 계속해서 처리할 다음 요청 주소를 제시 - 분리된 기능을 하나의 연속적인 흐름으로 연결 가능 6.2. 링크와 리다이렉트를 이용해 페이지 연결하기 6.2.1. 새 글 작성 링크 만들기 src > main > resources > template > articles > index.mustache New Article {{>layouts/footer}} # 목록 페이지에 새 글을 작성하는 링크 추가하기 6.2.2. 입력 페이지 To 목록페이지 src > main > ..

5장. 게시글 읽기 : Read 5.1. 데이터 조회 과정 (1) 사용자가 데이터를 조회해달라고 웹페이지에서 URL 요청 (2) 컨트롤러가 요청을 받고 해당 URL에서 찾으려는 데이터 정보를 리파지터리에 전달 (3) 리피지터리가 정보를 가지고 DB에 데이터 조회를 요청 (4) DB가 데이터를 찾고 엔티티로 변환 (5) 엔티티는 모델을 통해 뷰 템플릿으로 전달 (6) 뷰 페이지가 화면에 출력 5.2. 단일 데이터 조회하기 5.2.1. URL 요청받기 · 게시글 1번 조회 URL : localhost:8080/articles/1 · 게시글 2번 조회 URL : localhost:8080/articles/2 · 게시글 1000번 조회 URL : localhost:8080/articles/1000 src > m..

4장. 롬복(Lombok)과 리팩터링 4.1. 롬복이란? · 롬복(Lombok) - 코드를 간소화해주는 라이브러리 - 생성자 코드 생략 : @AllArgsConsturctor - toString() 메서드 생략 : @ToString - println() 문을 로깅 기능으로 대체 : @Slf4j · 리팩터링 - 코드의 기능에 변함없이 코드의 구조 또는 성능을 개선하는 작업 4.2. 롬복을 활용해 리팩터링하기 4.2.1. 롬복 설치 build.gradle dependencies { compileOnly 'org.projectlombok:lombok' annotationProcessor 'org.projectlombok:lombok' (중략) } 4.2.2. DTO 리팩터링하기 · 생성자 지우기 : @AllA..

3장. 게시판 만들고 새 글 작성하기 : Create 3.1. 폼 데이터란? · Form Data - HTML 요소인 태그에 실려 전송되는 데이터 - 태그는 웹브라우저에서 서버로 데이터를 전송할 때 사용 · DTO - 태그에 실어 보낸 데이터는 서버의 컨트롤러가 객체에 담아 받는다. - 이 객체를 DTO라고 한다. 3.2. 폼 데이터를 DTO로 받기 3.2.1. 입력 폼 만들기 src > main > resources > template > articles > new.mustache {{>layouts/header}} 제목 내용 Submit {{>layouts/footer}} 3.2.2. 컨트롤러 만들기 src > main > java > com.example.firstproject > controlle..

2장. MVC 패턴 이해와 실습 2.1. 뷰 템플릿과 MVC 패턴 2.1.1. 뷰 템플릿이란? - 화면을 담당하는 기술 - 웹 페이지(View)를 하나의 틀(Template)로 만들고, 변수를 삽입해 다른 페이지로 보여준다. - 이 책에서는 머스테치(Mustache)라는 도구를 사용한다. - 머스테치(Mustache) 외의 템플릿 엔진으로는 Thymeleaf, JSP 등이 있다. 2.1.2. MVC 패턴 · Model - 모델 - 데이터를 관리하는 역할. · View - 뷰 - 화면을 담당하는 뷰 템플릿을 간단히 '뷰'라고 부른다. - 사용자가 보는 화면 · Controller - 컨트롤러 - 클라이언트의 요청에 따라 서버에서 이를 처리하는 역할을 한다. 2.2. MVC 패턴을 활용해 뷰 템플릿 페이지 ..

1장 스프링부트 시작하기 1.1. 스프링 부트란? 자바 웹 프로그램을 쉽고 빠르게 만들기 위한 도구 - 외부 라이브러리 최적화 제공. - 내부에 웹 애플리케이션 서버인 톰캣을 보유. 1.2. 개발환경 설정 (1) JDK 17 (2) IDE - 인텔리제이 (3) Spring Initializer 설정 - https://start.spring.io · Project : Gradle - Groovy · Language : Java · Spring Boot : 3.1.0 (기본값) · Packaging : Jar · Java : 17 · Dependencies : H2 Database, Mustache, Spring Data JPA 1.3. 웹 서비스의 동작원리 1.3.1. 클라이언트 - 서버 구조 · 클라이언..

📌 배열이란? ▶︎ 배열이 필요한 이유 ➞ 같은 타입의 변수를 반복해서 선언하고, 사용하는 문제를 해결하고자 사용한다.// 학생 수가 증가함에 따라 int 변수를 계속해서 추가해야 한다.int student1 = 90;int student2 = 80;int student3 = 70;int student4 = 60;int student5 = 50;// 변수의 이름이 다 다르기에 반복문으로 표현할 수 없다.System.out.println("학생1 점수: " + student1); System.out.println("학생2 점수: " + student2); System.out.println("학생3 점수: " + student3); System.out.println("학생4 점수: " + student4)..

📌 조건문 ▶︎ 조건문이란? ➞ 특정 조건에 따라 다른 코드를 실행하는 것➞ 조건문에는 if문, switch문이 있다.  ① if문 - if 와 else ➞ 특정 조건이 참(True)인지 거짓(False)인지 확인하고, 그 조건이 참(True)일 경우 특정 코드 블럭을 실행한다.➞ 코드 블럭 : 중괄호({ }) 사이에 있는 코드➞ else문 : if문에서 만족하는 조건이 없는 경우에 실행한다.if (condition) { // 조건이 참(True)일 때 실행되는 코드} else { // 만족하는 조건이 없을 때 실행되는 코드}  ② else if문 - 연관된 조건 ➞ 서로 연관된 조건들을 비교할 때는 else if문을 사용한다.➞ 이미 조건을 만족함에도 불필요한 다음 조건을 계속 검사하는 것..

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

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

1. 배열의 선언과 생성 public class Array1 { public static void main(String[] args) { int[] students ; // 배열 변수 선언 students = new int[5]; // 배열 생성 // 변수 값 대입 students[0] = 90; students[1] = 80; students[2] = 70; students[3] = 60; students[4] = 50; // 배열의 길이 int length = students.length; // 변수값 사용 : 리팩터링 for (int i = 0; i < length; i++) { System.out.println("학생" + (i + 1) + " 점수 : " + students[i]); } } } ..