$$config title: ? 스프링부트 - QNA 서비스 v24-09 keywords: - IT - 13708 $$ --- --- # 수업 - [주소 : https://slog.gg/p/13708#f](https://slog.gg/p/13708#f) # 관련링크 - [책 - https://wikidocs.net/book/7601](https://wikidocs.net/book/7601) - 난이도 높은 챕터 - 2-05 - 2-11 - 2-15 - [문서 - 타임리프 공식문서](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html) # 강의 # 1강 - [p 13708, 스프링 부트 QNA 게시판 만들기, 1강, 소개](https://youtu.be/AHgoolECT_8) - [책 - https://wikidocs.net/book/7601](https://wikidocs.net/book/7601) # 2강 - p 13708, 2강, QNA 게시판 만들기, 프로젝트 생성, GIT 연결 - [리포지터리 - https://github.com/sik2/sbb2310](https://github.com/sik2/sbb-qna-2409) - [GIT](https://github.com/sik2/sbb-qna-2409/commits/main) ## 스타터 - [책 - 1-05 스프링부트 도구 설치하기](https://wikidocs.net/160957) - [https://start.spring.io - empty](https://start.spring.io) - [https://start.spring.io - starter pack](https://start.spring.io/#!type=gradle-project&language=java&platformVersion=3.3.3&packaging=jar&jvmVersion=22&groupId=com.example&artifactId=sbb&name=sbb&description=Demo%20project%20for%20Spring%20Boot&packageName=com.example.sbb&dependencies=devtools,lombok,web) - ![img](https://i.imgur.com/YXs7dAX.png) ## build.gradle ```groovy plugins { id 'java' id 'org.springframework.boot' version '3.3.3' id 'io.spring.dependency-management' version '1.1.6' } group = 'com.mysite' version = '0.0.1-SNAPSHOT' java { toolchain { languageVersion = JavaLanguageVersion.of(17) } } configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' testRuntimeOnly 'org.junit.platform:junit-platform-launcher' } tasks.named('test') { useJUnitPlatform() } ``` ## 3강 프로젝트 셋팅 - [p 13708, 3강, QNA 게시판 만들기, 인텔리제이 설정 1부, 한글 깨짐, auto import, wheel zoom](https://youtu.be/VBt6s7KjoqA) - [인텔제이 한글깨짐 현상](https://www.lesstif.com/java/intellij-file-console-encoding-121012310.html) - [p 13708, 3강, QNA 게시판 만들기, 인텔리제이 설정 2부, 오토 컴파일 설정](https://youtu.be/QvuNf0uYf1E) - [p 13708, 3강, QNA 게시판 만들기, 인텔리제이 설정 3부, 점유된 포트 죽이기, 포트 변경](https://youtu.be/qurBJdNBlbE) ## 8080포트를 이미 사용 중 인 경우 - window ```bash - netstat -ano | findstr 8080 - taskkill /f /pid [아이디넘버] ``` - [참고](https://mr-dan.tistory.com/71) - mac ```bash - lsof -i :8080 - kill -9 [아이디넘버] ``` - [참고](https://88240.tistory.com/475) - 포트 변경 ```bash # application.properites server.port = 8081 ``` # 3강 - [p 13708, 3강, 스프링부트 QNA 게시판 만들기, 스프링 프로젝트의 구조](https://youtu.be/RQJEBztSQfk) - [책 - 2-01 스프링부트 프로젝트의 구조](https://wikidocs.net/160947) ## 개념 - 패키지는 폴더이다. - 자바파일을 담는 폴더를 패키지라고 함 - templates 폴더에는 오직 html 파일만 저장됨 - static 폴더에는 css, js, 이미지(png, jpg, gif 등) 파일들이 저장됨 # 4강 - [p 13708, 스프링부트 QNA 게시판 만들기, 4강, 컨트롤러](https://youtu.be/osz4ATsOHIY) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/2eb38f4) - [책 - 2-02 컨트롤러](https://wikidocs.net/160543) # 5강 - [p 13708, 스프링부트 QNA 게시판 만들기, 5강, JPA - JPA, ORM 개념 및 H2 데이터 베이스 설치 - bash 버전](https://youtu.be/-qW2Ge5zi-A) ```bash $ cd ~ $ touch local.mv.db ``` - [p 13708, 스프링부트 QNA 게시판 만들기, 5강, JPA - JPA, ORM 개념 및 H2 데이터 베이스 설치 - cmd 버전](https://youtu.be/cntI440nr_Y) ```cmd copy con local.mv.db (엔터 후 개행되면) (ctrl + z) (enter) ``` - [p 13708, 스프링부트 QNA 게시판 만들기, 5강, JPA - JPA, ORM 개념 및 H2 데이터 베이스 설치 - 메모리모드 버전](https://youtu.be/gaUnm6_Uh3g) ```groovy jdbc:h2:mem:db_dev;MODE=MYSQL ``` - [GIT](https://github.com/sik2/sbb-qna-2409/commit/b2ee22b) - [책 - 2-03 JPA](https://wikidocs.net/161164) ## 개념 - JPA는 ORM의 일종이다. - JPA 말고 다른 ORM도 있다. - ORM은 객체(Object)와 Relation(개체(테이블))과의 Mapping 해주는 기술을 말한다. - JPA는 일종의 규약이고, 우리가 실제로 사용하는 기술은 하이버네이트 이다. ## JPA가 하는 일 ### 아래 자바코드가 실행되면 ## 답변저장 ```java Question q1 = new Question(); q1.setSubject("안녕하세요"); q1.setContent("가입 인사드립니다 ^^"); questionRepository.save(q1); Question q2 = new Question(); q2.setSubject("질문 있습니다"); q2.setContent("ORM이 궁금합니다"); questionRepository.save(q2); ``` ### 아래 SQL이 실행되도록 한다. ```sql INSERT INTO question (`subject`, content) VALUES ('안녕하세요', '가입 인사드립니다 ^^'); INSERT INTO question (`subject`, content) VALUES ('질문 있습니다', 'ORM이 궁금합니다'); ``` # 6강 - [p 13708, 스프링부트 QNA 게시판 만들기, 6강, JPA 설정](https://youtu.be/tAFHGuryzYs`) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/5327e53) - [책 - 2-03 JPA](https://wikidocs.net/161164) # 7강 - [p 13708, 스프링부트 QNA 게시판 만들기, 7강, 엔티티 - Question, Answer 엔티티 추가](https://youtu.be/cn0CcgqAVpA) - Answer 클래스의 Question question 필드에 @ManyToOne 적용 - 엔티티 - 각 개체별 관계의 종류는 딱 3가지(1:1, 1:N, M:N)이고, 질문과 답변의 관계인 1:N 관계가 가장 흔하다. - Question 클래스의 answerList 필드에 @OneToMany 적용 - 엔티티 - @ManyToOne은 필수이지만, @OneToMany 는 필수가 아니다. JPA가 불일치를 해소해줌 - [GIT](https://github.com/sik2/sbb-qna-2409/commit/41f8b34) - [책 - 2-04 엔티티](https://wikidocs.net/161165) ## 답변저장 자바코드 ```java package com.mysite.sbb; import jakarta.persistence.*; import lombok.Getter; import lombok.Setter; import java.time.LocalDateTime; // answer 테이블이 생김 @Getter @Setter @Entity public class Answer { @Id // PRIMARY KEY @GeneratedValue(strategy = GenerationType.IDENTITY) // AUTO_INCREMENT private Integer id; // INT id @Column(columnDefinition = "TEXT") // TEXT private String content; private LocalDateTime createDate; // DATETIME private Integer questionId; } ``` ```java Question q1 = new Question(); q1.setSubject("안녕하세요"); q1.setContent("가입 인사드립니다 ^^"); questionRepository.save(q1); Question q2 = new Question(); q2.setSubject("질문 있습니다"); q2.setContent("ORM이 궁금합니다"); questionRepository.save(q2); Answer a1 = new Answer(); // 만약에 1번 질문에 대한 답변이라면 a1.setQuestionId(q1.getId()); // : q1.getId() => 1, 즉 이 답변은 1번 질문에 대한 답변이라는 뜻 a1.setContent("반갑습니다."); answerRepository.save(a1); ``` ## 개요 - 엔티티 관계는 3가지가 존재한다. - 1:1 - 1:N - M:N - 1:N 관계의 대표적인 예 - 회원과 그 회원의 작성글들 - 게시물과 그 게시물의 댓글들 - 게시물과 그 게시물의 좋아요들 - 질문과 그 질문의 답변들 - 자바, 즉 객체에서는 1:N 으로 관련된 2개 객체가 서로를 참조할 수 있다. - DB에서는 1:N 으로 관련된 2개 개체가 서로를 참조할 수 없다. - 오직 `N`에 해당하는 각 개체에서 `1`에 해당하는 개체를 하나 가리킬 수 있다. - 객체와 개체는 패러다임이 불일치 한다. - 이유는 필드에 List나 배열을 저장 할 수 없어서 - 하지만 JPA는 그 불일치를 해소해준다. # 8강 - [p 13708, 스프링부트 QNA 게시판 만들기, 8강, JPA sql 로그를 보는법](https://youtu.be/LtQzmJTx5M0) ```groovy # application.properites # sql 로그 보기 위한 옵션 spring.jpa.show-sql=true ``` # 9강 - [p 13708, 스프링부트 QNA 게시판 만들기, 9강, JPA sql 로그 더 자세히 보는법](https://youtu.be/kHl05c9C8Jc) ```groovy # ? 값 확인 logging.level.org.hibernate.orm.jdbc.bind=TRACE # 결과 확인 logging.level.org.hibernate.orm.jdbc.extract=TRACE ``` - [GIT](https://github.com/sik2/sbb-qna-2409/commit/246d7cd) ## 용어 정리 - DDL : CREATE, ALTER, DROP - DML : SELECT, INSERT, UPDATE, DELETE - DCL : GRANT, REVOKE # 10강 - [p 13708, 스프링부트 QNA 게시판 만들기, 10강, 리포지터리 - 데이터 저장](https://youtu.be/NizpMb4j1mI) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/72834df) - [책 - 2-05 리포지터리 - 데이터 저장](https://wikidocs.net/160890#_2) ## 개념 - 엔티티 클래스를 만들었다면 그에 대응하는 리포지터리 클래스를 만드는게 보통 - Question 클래스 => QuestionRepository 클래스 - Answer 클래스 => AnswerRepository 클래스 - 리포지터리 클래스는 특정 테이블을 관리(조회, 수정, 삭제)하는 기능을 제공해준다. - 여러분이 SQL을 직접 구현하지 않아도 된다. ## db/init.sql ```sql # 각 테이블 내용 초기화 ## 외래키 제약 끄기 SET FOREIGN_KEY_CHECKS = 0; ## 테이블 초기화 TRUNCATE answer; TRUNCATE question; # 외래키 제약 복구 SET FOREIGN_KEY_CHECKS = 1; ``` # 11강 - [p 13708, 스프링부트 QNA 게시판 만들기, 11강, 리포지터리 - 데이터 조회, 다건, 단건 조회](https://youtu.be/c_01kKt7DcA) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/b20c572) - [책 - 2-05 리포지터리 - 데이터 조회](https://wikidocs.net/160890#_3) # 12강 - [p 13708, 스프링부트 QNA 게시판 만들기, 12강, JPA 메서드 명명규칙, 조회 테스트 AND](https://youtu.be/wDPvlLgG5YY) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/fb00828) # 13강 - [p 13708, 스프링부트 QNA 게시판 만들기, 13강, JPA 메서드 명명규칙, 조회 테스트 LIKE](https://youtu.be/Rg4MlWPzEnw) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/fb00828) ## JPA 메서드 명명규칙 - [표 출처 : https://wikidocs.net/160890#_3](https://wikidocs.net/160890#_3) | 항목 | 예제 | 설명 | | --- | --- | --- | | AND | findBySubjectAndContent(String subject, String content) | 여러 컬럼을 AND 로 검색 | | Or | findBySubjectOrContent(String subject, String content) | 여러 컬럼을 OR 로 검색 | | Between | findByCreateDateBetween(LocalDateTime fromDate, LocalDateTime toDate) | 컬럼을 BETWEEN 으로 검색 | | LessThan | findByIdLessThan(Integer id) | 비교해서 칼럼의 값 보다 작은 항목 검색 | | GreaterThanEqual | findByIdGraterThanEqual(Integer id) | 비교해서 칼럼의 값 보다 크거나 같은 항목 검색 | | Like | findBySubjectLike(String subject) | LIKE 검색 | | In | findBySubjectIn(String[] subjects) | 여러 값중에 하나인 항목 검색 | | OrderBy | findBySubjectOrderByCreateDateAsc(String subject) | 검색 결과를 정렬하여 전달 | ## And - findBySubjectAndContent ```sql SELECT * FROM question WHERE `subject` = ? AND content = ? ``` ## Or - findBySubjectOrContent ```sql SELECT * FROM question WHERE `subject` = ? OR content = ? ``` ## Between - findByCreateDateBetween ```sql SELECT * FROM question WHERE create_date BETWEEN ? AND ? ``` ## LessThan - findByIdLessThan ```sql SELECT * FROM question WHERE id < ? ``` ## GreaterThanEqual - findByIdGraterThanEqual ```sql SELECT * FROM question WHERE id >= ? ``` ## Like - findBySubjectLike ```sql SELECT * FROM question WHERE `subject` LIKE ? ``` ## In - findBySubjectIn ```sql # in을 사용하면 이렇게 편해진다. SELECT * FROM question WHERE `subject` IN (?, ?, ?, ?); # 참고로 IN 없이는 아래와 같이 해야만 한다. IN은 정말 유용하다. SELECT * FROM question WHERE `subject` = ? OR `subject` = ? OR `subject` = ? OR `subject` = ?; ``` ## OrderBy - findBySubjectOrderByCreateDateAsc ```sql SELECT * FROM question WHERE `subject` = ? ORDER BY create_date ASC ``` # 14강 - [p 13708, 스프링부트 QNA 게시판 만들기, 14강, 리포지터리 - 데이터 수정하기](https://youtu.be/E3eSH_-sHsk) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/fb00828) - [책 - 2-05 리포지터리 - 데이터 수정하기](https://wikidocs.net/160890#_4) # 15강 - [p 13708, 스프링부트 QNA 게시판 만들기, 15강, 리포지터리 - 데이터 삭제하기](https://youtu.be/iSWqxhL_kpw) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/fadf65d) - [책 - 2-05 리포지터리 - 데이터 삭제하기](https://wikidocs.net/160890#_5) # 16강 - [p 13708, 스프링부트 QNA 게시판 만들기, 16강, 리포지터리 - 답변 데이터 생성 후 저장하기](https://youtu.be/6EiAgwtS8jM) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/49cbc27) - [책 - 2-05 리포지터리 - 답변 데이터 생성 후 저장하기](https://wikidocs.net/160890#_6) # 17강 - [p 13708, 스프링부트 QNA 게시판 만들기, 17강, 리포지터리 - 답변 조회하기](https://youtu.be/WYKIP1epXPQ) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/e2aaf2d) - [책 - 2-05 리포지터리 - 답변 조회하기](https://wikidocs.net/160890#_7) # 18강 - [p 13708, 스프링부트 QNA 게시판 만들기, 18강, 리포지터리 - 답변에 연결된 질문 찾기 vs 질문에 달린 답변 찾기](https://youtu.be/Hr-9fnswGXI) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/f9df2e9) - [책 - 2-05 리포지터리 - 답변에 연결된 질문 찾기 vs 질문에 달린 답변 찾기](https://wikidocs.net/160890#vs) # 19강 - [p 13708, 스프링부트 QNA 게시판 만들기, 19강, 리포지터리 - 테스트 시 @Transactional, fetch=FetchType.EAGER, fetch=FetchType.LAZY](https://youtu.be/Cn6w5WZvDOk) | | @OneToMany | @ManyToOne | | --- | --- | --- | | 엔티티 | Question | Answer | | 필드 | answerList | question | | 기본타입 | FetchType.LAZY | FetchType.EAGER | - [GIT](https://github.com/sik2/sbb-qna-2409/commit/87c7c28) # 20강 - [p 13708, 스프링부트 QNA 게시판 만들기, 20강, @Transactional, @Rollback(false), DB 반영 가능하도록](https://youtu.be/6nDfX6wHM2M) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/19c874f) # 21강 - [p 13708, 스프링부트 QNA 게시판 만들기, 21강, JPA - MariaDB 연결](https://youtu.be/IW48aeiISQY) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/f644a67) ## application.properties ``` # DATABASE spring.datasource.driverClassName=org.mariadb.jdbc.Driver spring.datasource.url=jdbc:mariadb://127.0.0.1:3306/sbb_dev?useUnicode=true&characterEncoding=utf8&autoReconnect=true&serverTimezone=Asia/Seoul spring.datasource.username=root spring.datasource.password= # JPA spring.jpa.hibernate.ddl-auto=update ``` ## db/init.sql ```sql # DB 생성 DROP DATABASE IF EXISTS sbb_dev; CREATE DATABASE sbb_dev; USE sbb_dev; ``` ## build.gradle ``` runtimeOnly 'org.mariadb.jdbc:mariadb-java-client' ``` # 22강 - [p 13708, 스프링부트 QNA 게시판 만들기, 22강, 도메인 별로 분리하기](https://youtu.be/WfcE0Xv2KCE) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/4347a1e) - [책 - 2-06 도메인 별로 분리하기](https://wikidocs.net/161187) # 23강 - [p 13708, 스프링부트 QNA 게시판 만들기, 23강, 유지보수 관점에서 보는 결합도와 응집도](https://youtu.be/VL_rNW6_6Bk) - 좋은 소프트웨어 => 유지보수성이 좋음 - 결합도 낮추고 응집도 높인다 - 메신저 어플 구축(1년) vs 메신저 어플 운영(10년+) - 개발기간 => 개발 + 리펙토링 - 애자일 방법론 - 기획 => 개발(MVP) => 피드백 (반복) # 24강 - [p 13708, 스프링부트 QNA 게시판 만들기, 24강, 타임리프 연결](https://youtu.be/oIDTqGYcw08) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/321013b) - [책 - 2-07 질문 목록과 템플릿 - 404 오류 해결하기](https://wikidocs.net/161186#404) - [책 - 2-07 질문 목록과 템플릿 - 템플릿 설정하기](https://wikidocs.net/161186#_1) - [책 - 2-07 질문 목록과 템플릿 - 템플릿 사용하기](https://wikidocs.net/161186#_2) # 25강 - [p 13708, 스프링부트 QNA 게시판 만들기, 25강, HTML로 표 만들기](https://youtu.be/DeQS_z3J284) - [CODEPEN - 표](https://codepen.io/sik2/pen/KKJZwVj) # 26강 - [p 13708, 스프링부트 QNA 게시판 만들기, 26강, 표 만들고 CSS로 표 꾸미기](https://youtu.be/-ww-z6fqtec) - [CODEPEN - 표 꾸미기](https://codepen.io/sik2/pen/VwgyYwz?editors=1100) # 27강 - [p 13708, 스프링부트 QNA 게시판 만들기, 27강, 질문 목록과 템플릿, 뷰가 모델을 통해서 받은 데이터 렌더링]() - @ToString.Exclude 사용하여 무한순환참조 방지 - [GIT](https://github.com/sik2/sbb-qna-2409/commit/48e2e5) - [책 - 2-07 질문 목록과 템플릿 - 데이터 조회하여 템플릿에 전달하기](https://wikidocs.net/161186#_3) - [책 - 2-07 질문 목록과 템플릿 - 템플릿에서 전달받은 데이터 사용하기](https://wikidocs.net/161186#_4) ## 타임리프 : questionList 변수내용 출력 ```html

[[${questionList}]]

``` ## question_list.html ```html

Hello Template!

번호	제목	작성일시

[[${questionList[0].id}]]	[[${questionList[0].subject}]]	[[${questionList[0].createDate}]]

``` # 28강 - [p 13708, 스프링부트 QNA 게시판 만들기, 28강, 타임리프 반복문(th:each) 사용하여 렌더링](https://youtu.be/K34-D8rtdPc) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/2eece85) - [책 - 2-07 질문 목록과 템플릿 - 템플릿에서 전달받은 데이터 사용하기](https://wikidocs.net/161186#_4) ## question_list.html ```html

질문 목록

번호	제목	작성일시

``` # 29강 - [p 13708, 스프링부트 QNA 게시판 만들기, 29강, ROOT URL와 리다이렉트](https://youtu.be/UUfZTlQMhH8) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/8a8808e) - [책 - 2-08 ROOT URL](https://wikidocs.net/161354) # 30강 - [p 13708, 스프링부트 QNA 게시판 만들기, 30강, HTTP 응답 상태코드 살펴보기](https://youtu.be/BFyxa1I24Xs) ## HTTP 응답 상태코드 - 2xx : 성공 - 3xx : 리다이렉트(다른 곳으로 가세요.) - 4xx : 실패(고객 잘못) - 5xx : 실패(서버 잘못) # 31강 - [p 13708, 스프링부트 QNA 게시판 만들기, 31강, QuestionService 서비스 도입](https://youtu.be/_g9F9Hu38Xo) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/27fe43e) - [책 - 2-09 서비스](https://wikidocs.net/161220) # 32강 - [p 13708, 스프링부트 QNA 게시판 만들기, 32강, 질문 상세](https://youtu.be/ULEuqb_3XUs) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/e1b3c46) - [책 - 2-10 질문 상세 - 질문 상세 링크 추가하기](https://wikidocs.net/161302#_1) - [책 - 2-10 질문 상세 - 질문 상세 컨트롤러 만들기](https://wikidocs.net/161302#_2) - [책 - 2-10 질문 상세 - 서비스](https://wikidocs.net/161302#_3) - [책 - 2-10 질문 상세 - 템플릿](https://wikidocs.net/161302#_4) - [책 - 2-10 질문 상세 - 질문 상세 확인하기](https://wikidocs.net/161302#_5) ## th:href - 타임리프에서 주소는 `@{|주소|}` 양식으로 표현하도록 약속되어 있음 - 양식 : `th:href="@{|주소|}"` => 렌더링 => `href="주소"` ### 소스 ```html ``` ### 렌더링결과(q변수에 1번 질문객체 리모콘이 저장되어 있다고 가정했을 때) ```html 1 sbb가 무엇인가요? 2023-03-22T11:12:40.935786 ``` # 33강 - [p 13708, 스프링부트 QNA 게시판 만들기, 33강, 질문 상세 - 예외처리](https://youtu.be/6LcsQFlYkrI) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/05c7ef2) # 34강 - [p 13708, 스프링부트 QNA 게시판 만들기, 34강, 질문 상세 - URL 프리픽스(prefix)](https://youtu.be/MS0RuymTbho) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/77625f3) - [책 - 2-10 질문 상세 - URL 프리픽스(prefix)](https://wikidocs.net/161302#url-prefix) # 35강 - [p 13708, 35강, 답변 등록 - 답변 등록 버튼 만들기 테스트](https://youtu.be/6NI0oyrM_zw) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/d928aba) - [책 - 2-11 답변 등록 - 답변 등록 버튼 만들기](https://wikidocs.net/161357#_1) ## HTTP METHOD 주 사용처 - GET - 링크이동(a 엘리먼트를 이용한 이동) - 브라우저의 주소창에 직접입력 - 검색폼 - 그 외 - POST - 글 작성 - 글 수정 - 댓글 작성 - 댓글 수정 - 좋아요 - 좋아요 취소 - 삭제 - GET으로 삭제하는 경우도 가끔 있다. # 36강 - [p 13708, 36강, 답변 등록 - 답변 컨트롤러 만들기](https://youtu.be/XaN5E3Oi1Eo) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/ee94bef) - [책 - 2-11 답변 등록 - 답변 컨트롤러 만들기](https://wikidocs.net/161357#_2) # 37강 - [p 13708, 37강, Intellij TODO 기능 활용 방법](https://youtu.be/M_kIyzpz2yg) # 38강 - [p 13708, 38강, 답변 등록 구현](https://youtu.be/mj44eEInP5k) - [책 - 2-11 답변 등록 - 답변 저장하기](https://wikidocs.net/161357#_3) - [책 - 2-11 답변 등록 - 질문 상세 페이지에 답변 표시하기](https://wikidocs.net/161357#_4) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/e1d274d) # 39강 - [p 13708, 39강, 스타일 적용, 부트스트랩 CDN 버전 도입](https://youtu.be/4hnz_tp9wNg) ```HTML ``` - [GIT](https://github.com/sik2/sbb-qna-2409/commit/79ee7ee) - [책 - 2-13 부트스트랩](https://wikidocs.net/161459) - [CODEPEN - container 직접 구현하고, 버튼을 안꾸밈](https://codepen.io/jangka44/pen/xxaQrJy?editors=1100) - [CODEPEN - 부트스트랩 사용해서 container 와 btn 적용](https://codepen.io/jangka44/pen/LYJXLBq?editors=1100) - [부트스트랩 - https://getbootstrap.kr/](https://getbootstrap.kr/) - [부트스트랩 - 버튼 - https://getbootstrap.kr/docs/5.2/components/buttons/](https://getbootstrap.kr/docs/5.2/components/buttons/) # 40강 - [p 13708, 스프링부트 QNA 게시판 만들기, 40강, 타임리프 레이아웃을 이용한 html 구조화](https://youtu.be/TKxyhw88xVA) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/a262ab6) ## CSS 선택자 튜토리얼 - [선택자 연습 튜토리얼 - CSS DINER](https://flukeout.github.io/) - [영상 - CSS DINER, 정답, 1단계 ~ 10단계, to2.kr/dnf](https://to2.kr/dnf) - [영상 - CSS DINER, 정답, 11단계 ~ 19단계, to2.kr/dng](https://to2.kr/dng) - [영상 - CSS DINER, 정답, 20단계 ~ 26단계, to2.kr/dnI](https://to2.kr/dnI) - [영상 - CSS DINER, 정답, 27단계 ~ 32단계, to2.kr/erk](https://to2.kr/erk) # 41강 - [p 13708, 스프링부트 QNA 게시판 만들기, 41강, 질문 등록 - view, 컨트롤러 작업](https://youtu.be/5HDWqbgkuOM) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/c345e38) - [책 - 2-16 질문 등록과 폼 - 질문 등록 버튼과 화면 만들기](https://wikidocs.net/161911_#1) # 42강 - [p 13708, 스프링부트 QNA 게시판 만들기, 42강, 질문등록 - service 작업](https://youtu.be/lfS2olmeH7g) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/c8dd766) - [책 - 2-16 질문 등록과 폼 - 질문 등록 버튼과 화면 만들기](https://wikidocs.net/161911_#1) # 43강 - [p 13708, 스프링부트 QNA 게시판 만들기, 43강, Spring Boot Validation 적용](https://youtu.be/R2g6DxrMumg) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/edf815b) - [책 - 2-16 질문 등록과 폼 - 폼 활용하기](https://wikidocs.net/161911_#4) # 44강 - [p 13708, 스프링부트 QNA 게시판 만들기, 44강, 질문 등록 에러 출력](https://youtu.be/JdOv5Fo8Bu4) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/edf815b) - [책 - 2-16 질문 등록과 폼 - 폼 활용하기](https://wikidocs.net/161911_#4) ## 액션 메서드 파라미터로 썻기 때문에 model.addAttribute 가 필요없는 케이스 ```java @GetMapping("/create") public String questionCreate(QuestionForm questionForm) { return "question_form"; } ``` ## model.addAttribute 로 처리한 케이스 ```java @GetMapping("/create") public String questionCreate(Model model) { model.addAttribute("questionForm", new QuestionForm()); return "question_form"; } ``` # 45강 - [p 13708, 스프링부트 QNA 게시판 만들기, 45강, 질문 등록 - 오류 출력 시 데이터 보존](https://youtu.be/xDNDNhDWBLE) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/25a97a1) - [책 - 2-16 질문 등록과 폼 - 폼 활용하기](https://wikidocs.net/161911_#4) # 46강 - [p 13708, 스프링부트 QNA 게시판 만들기, 46강, 답변 등록 - 폼 적용](https://youtu.be/JMfaEm4iRTw) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/695659a) - [책 - 2-16 질문 등록과 폼 - 답변 등록 기능에 폼 적용하기](https://wikidocs.net/161911_#4) # 47강 - [p 13708, 스프링부트 QNA 게시판 만들기, 47강, 에러 출력 공통 템플릿 만들기](https://youtu.be/Dj7M-6XzG00) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/e98e141) - [책 - 2-16 질문 등록과 폼 - 공통 템플릿 만들기](https://wikidocs.net/161911_#10) # 48강 - [p 13708, 스프링부트 QNA 게시판 만들기, 48강, th:object, th:field 는 id, name, value 를 자동으로 넣어준다](https://youtu.be/D9ZdMhqJ2A4) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/aa34158) # 49강 - [p 13708, 스프링부트 QNA 게시판 만들기, 49강, HTML 속성을 통한 유효성 검증](https://youtu.be/oNtHNyAqlrI) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/dd184d9) - [책 - 2-15 질문 등록과 폼 - 답변 등록](https://wikidocs.net/161873#_8) - [CODEPEN - required, autocomplete, placeholder. maxlength](https://codepen.io/jangka44/pen/GRXwyWj?editors=1100) ## MySQL 필드별 한글저장가능 개수 - VARCHAR(200) : 200자 - TEXT : 21,845자 # 50강 - [p 13708, 스프링부트 QNA 게시판 만들기, 50강, 내비게이션 바](https://youtu.be/zV1tIc2Edjg) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/858f018) - [책 - 3-01 내비게이션 바](https://wikidocs.net/) - [부트스트랩 - 예시 - 내비바 - https://getbootstrap.kr/docs/5.2/examples/navbars/](https://getbootstrap.kr/docs/5.2/examples/navbars/) # 51강 - [p 13708, 스프링부트 QNA 게시판 만들기, 51강, 내비게이션 바 코드 블럭화](https://youtu.be/iGhi-0kkg3Q) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/6406aad) - [책 - 3-01 내비게이션 바](https://wikidocs.net/) # 52강 - [p 13708, 스프링부트 QNA 게시판 만들기, 52강, 페이징 기능 구현 - 대량 테스트 데이터 만들기](https://youtu.be/Pgf84K6Fxfo) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/72f3f40) - [책 - 3-02 페이징 기능 추가하기](https://wikidocs.net/162028#_1) # 53강 - [p 13708, 스프링부트 QNA 게시판 만들기, 53강, 페이징 기능 구현 - 페이징 구현하기](https://youtu.be/NmD8LeIyfMc) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/b867bd1) - [책 - 3-02 페이징 기능 추가하기](https://wikidocs.net/162028#_2) # 54강 - [p 13708, 스프링부트 QNA 게시판 만들기, 54강, 페이징 기능 구현 - 페이지 이동 기능 추가하기](https://youtu.be/6Nbp7F61w1k) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/5e4e653) - [책 - 3-02 페이지 이동 기능 추가하기](https://wikidocs.net/162028#_3) # 55강 - [p 13708, 스프링부트 QNA 게시판 만들기, 55강, 페이징 기능 구현 - 최신순으로 데이터 조회하기](https://youtu.be/GGM6QPsnjww) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/a840ca0) - [책 - 3-02 최신순으로 데이터 조회하기](https://wikidocs.net/162028#_5) # 56강 - [p 13708, 스프링부트 QNA 게시판 만들기, 56강, 게시물에 번호 지정하기](https://youtu.be/raJeTjgPpkU) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/1a8031f) - [책 - 3-03 게시물에 번호 지정하기](https://wikidocs.net/162090) # 57강 - [p 13708, 스프링부트 QNA 게시판 만들기, 57강, 답변 개수 표시하기](https://youtu.be/sJGPBUgU7Ng) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/dd62b25) - [책 - 3-04 답변 개수 표시하기](https://wikidocs.net/162092) # 58강 - [p 13708, 스프링부트 QNA 게시판 만들기, 58강, 시큐리티 설치, 설정하기](https://youtu.be/dfstX3oRJj8) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/0636392) - [책 - 3-05 스프링 시큐리티 설치하기](https://wikidocs.net/162150#_1) - [책 - 3-05 스프링 시큐리티 설정하기](https://wikidocs.net/162150#_2) # 59강 - [p 13708, 스프링부트 QNA 게시판 만들기, 59강, H2 콘솔 오류 수정하기](https://youtu.be/aoEEXZ5m230) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/b2a74c6) - [책 - 3-05 H2 콘솔 오류 수정하기](https://wikidocs.net/162150#h2) # 60강 - [p 13708, 스프링부트 QNA 게시판 만들기, 60강, 회원 가입 기능 구성하기](https://youtu.be/vnOQb5t4Qx8) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/60bf7ac) - [책 - 3-06 회원 가입 기능 구성하기](https://wikidocs.net/162141#_1) # 61강 - [p 13708, 스프링부트 QNA 게시판 만들기, 61강, 회원 가입 기능 구성하기](https://youtu.be/dsNGS9XcoVg) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/3f5b33c) - [책 - 3-06 User 리포지터리와 서비스 생성하기](https://wikidocs.net/162141#user) - SbbApplicatgionTests.java ```java @Autowired UserService userService; @Test void testJpa13() { userService.create("test", "test@test.com", "1234"); } ``` # 62강 - [p 13708, 스프링부트 QNA 게시판 만들기, 62강, PasswordEncoder를 @Bean으로 등록, 회원가입 기능 구현](https://youtu.be/2t6UrX-BRvo) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/9678736) - [책 - 3-06 User 리포지터리와 서비스 생성하기](https://wikidocs.net/162141#user) # 63강 - [p 13708, 스프링부트 QNA 게시판 만들기, 63강, 회원가입 기능 마무리](https://youtu.be/Did25pp7hKY) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/9857324) - [책 -3-06 회원가입 기능 확인하기]( https://wikidocs.net/162141#_8) # 64강 - [p 13708, 스프링부트 QNA 게시판 만들기, 64강, 중복아이디 예외 처리](https://youtu.be/ewtaTsG7ZII) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/a3d77ce) - [책 - 중복 회원 가입 방지하기](https://wikidocs.net/162141#_9) # 65강 - [p 13708, 스프링부트 QNA 게시판 만들기, 65강, 쿠키, 세션, 캐시 란?](https://youtu.be/yWaV6pMr5lk) # 66강 - [p 13708, 스프링부트 QNA 게시판 만들기, 66강, 로그인 컨트롤러 URL 매핑 추가하기, 폼 만들기](https://youtu.be/ESazOqsaQ0Q) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/32cea8d) - [책 - 로그인 URL 등록하기](https://wikidocs.net/162255#url) - [책 - User 컨트롤러에 URL 매핑 추가하기](https://wikidocs.net/162255#user-url) # 67강 - [p 13708, 스프링부트 QNA 게시판 만들기, 67강, 로그인 기능 구현](https://youtu.be/5Ppe4rk3OA0) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/a78526f) - [책 - 로그인 템플릿 작성하기](https://wikidocs.net/162255#_2) # 68강 - [p 13708, 스프링부트 QNA 게시판 만들기, 68강, 네비바 로그인 로그아웃 상태 표시](https://youtu.be/3W1fEfZxQlU) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/57948c7) - [책 - 로그인 화면 수정하기](https://wikidocs.net/162255#_4) # 69강 - [p 13708, 스프링부트 QNA 게시판 만들기, 69강, 로그아웃 구현하기](https://youtu.be/acJaVOKAuwA) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/2410c4c) - [책 - 로그아웃 기능 구현하기](https://wikidocs.net/162255#_5) # 70강 - [p 13708, 스프링부트 QNA 게시판 만들기, 70강, 질문, 답변, 작성자 추가](https://youtu.be/b4akLpbce_Y) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/a1cb013) - [책 - 3-08 엔티티 변경 - Question 속성 추가](https://w/7f71b19ikidocs.net/162330#question) - [책 - 3-08 엔티티 변경 - Answer 속성 추가](https://wikidocs.net/162330#answer) - [책 - 3-08 엔티티 변경 - 테이블 확인](https://wikidocs.net/162330#_1) - [책 - 3-08 엔티티 변경 - author 저장](https://wikidocs.net/162330#author) # 71강 - [p 13708, 스프링부트 QNA 게시판 만들기, 71강, 답변등록 작성자 추가](https://youtu.be/fw1RmCWwnZo) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/2c7fe99) - [책 - 3-08 엔티티 변경 - author 저장](https://wikidocs.net/162330#author) # 72강 - [p 13708, 스프링부트 QNA 게시판 만들기, 72강, 질문등록 작성자 추가](https://youtu.be/PG6I9-63cgU) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/b64961e) - [책 - 질문 엔티티에 속성 추가하기](https://wikidocs.net/162330#_2) # 73강 - [p 13708, 스프링부트 QNA 게시판 만들기, 73강, 로그인한 회원만 질문 답변 등록가능하도록 처리](https://youtu.be/2-rApo99FY4) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/48b4c15) - [책 - 3-08 엔티티 변경 - 로그인이 필요한 메서드](https://wikidocs.net/162330#_4) # 74강 - [p 13708, 스프링부트 QNA 게시판 만들기, 74강, 답변 작성 막아 두기](https://youtu.be/AO0WZP29_p0) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/d991473) - [책 - 3-08 엔티티 변경 - disabled](https://wikidocs.net/162330#disabled) # 75강 - [p 13708, 스프링부트 QNA 게시판 만들기, 75강, 질문 목록 작성자 노출](https://youtu.be/1Oemr4-cXiM) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/7c2d8aa) - [책 - 3-09 글쓴이 표시](https://wikidocs.net/162413) # 76강 - [p 13708, 스프링부트 QNA 게시판 만들기, 76강, 질문 상세 페이지 작성자 노출](https://youtu.be/U5GLqa4KnpU) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/469b1dd) - [책 - 3-09 글쓴이 표시](https://wikidocs.net/162413) # 77강 - [p 13708, 스프링부트 QNA 게시판 만들기, 77강, 질문 수정기능 뷰, 컨트롤러 작업](https://youtu.be/WpV5qSRuHJI) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/1543e85) - [책 - 수정 일시 추가하기](https://wikidocs.net/162413#_1) - [책 - 질문 수정 기능 생성하기](https://wikidocs.net/162413#_2) # 78강 - [p 13708, 스프링부트 QNA 게시판 만들기, 78강, 질문 수정기능 질문등록 폼 활용하기](https://youtu.be/cByTCAWjjWQ) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/846efd4) - [책 - 질문 수정 기능 생성하기](https://wikidocs.net/162413#_2) # 79강 - [p 13708, 스프링부트 QNA 게시판 만들기, 79강, 질문 수정 기능 구현 완료](https://youtu.be/9KFhUgzOmHk) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/9358998) - [책 - 질문 수정 기능 생성하기](https://wikidocs.net/162413#_2) # 80강 - [p 13708, 스프링부트 QNA 게시판 만들기, 80강, 질문 삭제 버튼 추가](https://youtu.be/IpghVsLkFoY) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/e9bde9c) - [책 - 질문 삭제 기능 생성하기](https://wikidocs.net/162413#_7) # 81강 - [p 13708, 스프링부트 QNA 게시판 만들기, 81강, 질문 삭제 기능구현](https://youtu.be/td4eYFWATh0) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/4f5e8f1) - [책 - 질문 삭제 기능 생성하기](https://wikidocs.net/162413#_7) # 82강 - [p 13708, 스프링부트 QNA 게시판 만들기, 82강, 답변 수정 폼 구현](https://youtu.be/2YRmqr53ODk) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/3df9e8a) - [책 - 답변 수정 기능 추가하기](https://wikidocs.net/162413#_11) # 83강 - [p 13708, 스프링부트 QNA 게시판 만들기, 83강, 답변 수정 기능 구현](https://youtu.be/0-ETDuv2vDk) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/8cc1b75) - [책 - 답변 수정 기능 추가하기](https://wikidocs.net/162413#_11) # 84강 - [p 13708, 스프링부트 QNA 게시판 만들기, 84강, 답변 삭제 구현](https://youtu.be/FlnJ9shNatU) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/cd98aeb) - [책 - 답변 수정 기능 추가하기](https://wikidocs.net/162413#_11) # 85강 - [p 13708, 스프링부트 QNA 게시판 만들기, 85강, 질문 답변 수정 일자 표시](https://youtu.be/j4_GxyOlF4Q) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/11756f0) - [책 - 수정 일시 표시하기](https://wikidocs.net/162413#_16) # 86강 - [p 13708, 스프링부트 QNA 게시판 만들기, 86강, 추천 기능 버튼 구현](https://youtu.be/Pz3ReDcTLjc) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/b1308aa) - [책 - 추천 기능 추가하기](https://wikidocs.net/162416) # 87강 - [p 13708, 스프링부트 QNA 게시판 만들기, 87강, 추천 기능 구현](https://youtu.be/Zyej6RclSXo) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/5085cfb) - [책 - 추천 기능 추가하기](https://wikidocs.net/162416) # 88강 - [p 13708, 스프링부트 QNA 게시판 만들기, 88강, 앵커기능 구현](https://youtu.be/c7ZfW5e-OQk) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/5175db8) - [책 - 앵커 기능 추가하기](https://wikidocs.net/162657) - [일반링크 - https://cdpn.io/pen/debug/PoRLVJL](https://cdpn.io/pen/debug/PoRLVJL) - [일반링크 + 앵커 - https://cdpn.io/pen/debug/PoRLVJL#section-4](https://cdpn.io/pen/debug/PoRLVJL#section-4) # 89강 - [p 13708, 스프링부트 QNA 게시판 만들기, 89강, 마크다운 기능 구현](https://youtu.be/sI433kYgWWM) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/59c873a) - [책 - 마크다운 적용하기](https://wikidocs.net/162763) # 90강 - [p 13708, 스프링부트 QNA 게시판 만들기, 90강, 검색 SQL](https://youtu.be/Ad4XIYtG1lI) - [책 - 3-14 검색](https://wikidocs.net/162814) ## SQL, 1단계 : 질문제목 ```sql SELECT * FROM question AS Q WHERE ( Q.subject LIKE '%검색어%' ); ``` ## SQL, 2단계 : 질문제목 + 질문내용 ```sql SELECT * FROM question AS Q WHERE ( Q.subject LIKE '%검색어%' OR Q.content LIKE '%검색어%' ); ``` ## SQL, 3단계 : 질문제목 + 질문내용 + 질문자이름 ```sql SELECT * FROM question AS Q LEFT JOIN site_user AS QA ON Q.author_id = QA.id WHERE ( Q.subject LIKE '%검색어%' OR Q.content LIKE '%검색어%' OR QA.username LIKE '%검색어%' ); ``` ## SQL, 4단계 : 질문제목 + 질문내용 + 질문자이름 + 답변내용 ```sql SELECT * FROM question AS Q LEFT JOIN site_user AS QA ON Q.author_id = QA.id LEFT JOIN answer AS A ON Q.id = A.question_id WHERE ( Q.subject LIKE '%검색어%' OR Q.content LIKE '%검색어%' OR QA.username LIKE '%검색어%' OR A.content LIKE '%검색어%' ); ``` ## SQL, 5단계 : 질문제목 + 질문내용 + 질문자이름 + 답변내용 + GROUPING(질문번호기준) ```sql SELECT * FROM question AS Q LEFT JOIN site_user AS QA ON Q.author_id = QA.id LEFT JOIN answer AS A ON Q.id = A.question_id WHERE ( Q.subject LIKE '%검색어%' OR Q.content LIKE '%검색어%' OR QA.username LIKE '%검색어%' OR A.content LIKE '%검색어%' ) GROUP BY Q.id; ``` ## SQL, 6단계 : 질문제목 + 질문내용 + 질문자이름 + 답변내용 + GROUPING(질문번호기준) + 답변자이름 ```sql SELECT * FROM question AS Q LEFT JOIN site_user AS QA ON Q.author_id = QA.id LEFT JOIN answer AS A ON Q.id = A.question_id LEFT JOIN site_user AS AA ON A.author_id = AA.id WHERE ( Q.subject LIKE '%검색어%' OR Q.content LIKE '%검색어%' OR QA.username LIKE '%검색어%' OR A.content LIKE '%검색어%' OR AA.username LIKE '%검색어%' ) GROUP BY Q.id; ``` # 91강 - [p 13708, 스프링부트 QNA 게시판 만들기, 91강, 검색 - Specification 을 이용한 검색기능 구현](https://youtu.be/CrZ4m8JJcmE) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/bfb53f7) - [책 - 3-14 검색](https://wikidocs.net/162814) # 92강 - [p 13708, 스프링부트 QNA 게시판 만들기, 92강, 검색 - 검색 폼 구현, 검색 후 페이지이동을 해도 검색이 안 풀리도록](https://youtu.be/sbNZPGwIk-s) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/39e9ab8) - [책 - 3-14 검색](https://wikidocs.net/162814) # 93강 - [p 13708, 스프링부트 QNA 게시판 만들기, 93강, @Query 어노테이션을 이용한 검색](https://youtu.be/G3cqok8g06E) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/e464682) - [책 - 3-14 검색](https://wikidocs.net/162814) # 94강 - [p 13708, 스프링부트 QNA 게시판 만들기, 94강, 페이지네이션 1부터 시작하도록](https://youtu.be/gqw0bHGkHaE) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/44ea295) # 95강 - [p 13708, 스프링부트 QNA 게시판 만들기, 95강, 질문 추천 기능 비동기 처리를 위한 Jquery 도입](https://youtu.be/m5n9JUFDYK4) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/f145dfe) # 96강 - [p 13708, 스프링부트 QNA 게시판 만들기, 96강, 질문 추천 기능 비동기 처리 작업](https://youtu.be/NOD_nIvjkrE) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/dba48ef) # 97강 - [p 13708, 스프링부트 QNA 게시판 만들기, 97강, 질문 추천 기능 비동기 처리 후 화면 갱신](https://youtu.be/HGRomPc62eY) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/e0e43c0) # 98강 - [p 13708, 스프링부트 QNA 게시판 만들기, 98강, 답변 추천 기능 비동기 처리](https://youtu.be/1qkORZoGt3c) - [GIT](https://github.com/sik2/sbb-qna-2409/commit/5c1b027) --- # 책 3-15 추가문제 난이도 쉬운순 1. 조회 수 - 1단계 : 단순증가 - 2단계 : 로컬 스토리지 + ajax - 같은 브라우저로는 하나의 글에 대해서 조회 수 증가를 2번 이상할 수 없도록 - 난이도 상 1. 프로필 1. 최근 답변과 최근 댓글 - 최근 댓글은 패스 1. 카테고리 1. 마크다운 에디터 1. 비밀번호 찾기와 변경 - 스프링 부트 이메일로 임시 비번 발송 - 특정 GMAIL 계정으로 발송하지 마세요. 1. 소셜 로그인 - 카카오 로그인 - 구글 로그인 1. 답변 페이징과 정렬 1. 댓글 --- # 4 장 배포 - [AWS 가입](https://aws.amazon.com/ko) - [영문 주소 찾기]( https://juso.go.kr) - [AWS 라이트 세일](https://lightsail.aws.amazon.com) - [AWS 가입](https://youtu.be/nxuNVCQL7SI) - [AWS 라이트 세일, 리눅스 서버 임대](https://youtu.be/HuT23aBhpt4) - [AWS 라이트 세일, 퍼블릭 고정 IP 발급, 방화벽 설정](https://youtu.be/SlJVSGVsVe0) - [AWS 라이트 세일, ssh 연결 및 소스파일 clone](https://youtu.be/If7C9zt3RMI) - [AWS 라이트 세일, java 설치 후 빌드 후 배포](https://youtu.be/Xy5xjl1fcwo) - [AWS 라이트 세일, nohup 이용하여 백그라운드에서 서비스 빌드](https://youtu.be/zszfduxpEOM) ```bash #백드라운드 명령어 nohup java -jar sbb #백그라운드 목록 ps -ef #백그라운드 죽이기 kill -9 [PID] ``` $$hide # ??강 - [p 13708, 스프링부트 QNA 게시판 만들기, ?강, ]() - [GIT](https://github.com/sik2/sbb-qna-2409/commit/) - [책 - ]() ## 처리순서 - 현재 URL : /question/detail/1 - 폼의 textarea에 값을 "안녕"으로 채우고 작성버튼 클릭 - 요청 : POST /answer/create/1 - PAYLOAD : `content: 안녕` - 브라우저에서는 하얀화면 나오는 중 - 요청처리 : AnswerController::createAnswer 액션 메서드 실행 - 요청처리 : Question question = questionService.getQuestion(id); - 응답 : redirect:/question/detail/1 - 브라우저에서 응답수신 : 브라우저에서 받은 응답을 렌더링 하려고 했는데, 응답코드가 301 이라서 응답헤더에 적힌 URL로 새 요청을 보내기로 결정 - 요청 : GET /question/detail/1 - 브라우저에서는 하얀화면 나오는 중 - 요청처리 : QuestionController::detail 액션 메서드 실행 - 요청처리 : Question question = questionService.getQuestion(id); - 요청처리 : model.addAttribute("question", question); - 요청처리 : question_detail.html 템플릿 실행 - 응답 : 템플릿에 데이터가 결합된 최종 html이 고객에게 전달 - 응답수신 : 브라우저에서 더 이상 하얀화면이 나오지 않고, 응답받은 html 렌더링 - 최종 URL : /question/detail/1 - 요청을 날리기 전과 똑같은 화면이 보인다. ## 부트스트랩 container의 이해 - [CODEPEN - 부트스트랩을 사용한 버튼](https://codepen.io/jangka44/pen/LYJXLBq?editors=1100) - [부트스트랩 - https://getbootstrap.kr/](https://getbootstrap.kr/) - [부트스트랩 - 유틸리티 - 플렉스 - https://getbootstrap.kr/docs/5.0/utilities/flex/](https://getbootstrap.kr/docs/5.0/utilities/flex/) - [부트스트랩 - 유틸리티 - 컨테이너 - https://getbootstrap.kr/docs/5.0/layout/containers/](https://getbootstrap.kr/docs/5.0/layout/containers/) ## 단계별로 만들어보는, 고정형, 반응형, 적응형 레이아웃 - [1단계 - 시작, 내용이 너무 화면 좌우로 쫙 펼쳐져 있음](https://codepen.io/jangka44/pen/dyqQRrB?editors=1100) - [2단계 - width 를 주어서 퍼지지 않게함, 대신 좌측에 치우져있음](https://codepen.io/jangka44/pen/jOvQwRL?editors=1100) - [3단계 - margin-left: auto; 를 주어서 왼쪽에서 잡아당기는 힘을 해제, 오른쪽으로 치우치게 됨](https://codepen.io/jangka44/pen/JjaeJVx?editors=1100) - [4단계 - margin-right: auto; 를 주어서 오른쪽에서도 놔버림, 공간이 충분할 경우에는 가운데로 오게 됨, 고정형 레이아웃 완성](https://codepen.io/jangka44/pen/ExeOXzd?editors=1100) - [5단계 - width: auto 를 주어서 너비에 대한 유연성을 회복시키고, 대신 max-with 를 설정하여 너무 커지지 않게만 함, 반응형 레잉아웃 완성](https://codepen.io/jangka44/pen/NWLEgZp?editors=1100) - [6단계 - max-width 를 순차적으로 적게 주어서, 제일 하단에 적은 max-width 가 적용됨](https://codepen.io/jangka44/pen/WNgYOVO?editors=1100) - [7단계 - 미디어 쿼리를 사용하여 각 max-width 가 특정한 시점에만 작동하도록, 적응형 레이아웃 완성](https://codepen.io/jangka44/pen/wvEQqwg?editors=1100) - [8단계 - 적응형 레이아웃을 사용할 수 있는 형태로 정리, .container](https://codepen.io/jangka44/pen/gOdQxOr?editors=1100) # 64강 - [ken 13180, 64강, 회원가입 - 유저, 유저 리포지터리, 유저 서비스, 테스트 회원 2명 생성](https://youtu.be/GyrN6LLUwW4) - [GIT](https://github.com/sik2/sbb2310/commit/bfe2b2d) $$hide $$