$$config title: ? 스프링부트 - QNA 서비스 keywords: - IT13180 $$ --- --- # 수업 - [주소 : https://slog.gg/p/13180](https://slog.gg/p/13180) # 관련링크 - [리포지터리 - https://github.com/sik2/](https://github.com/sik2/) - [책 - 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) # 이전수업 - [스프링부트 - 기초 - slog.gg/p/13178](https://slog.gg/p/13178) # 강의 # 1강 - [ken 13180, 스프링 부트 QNA 게시판 만들기, 1강, 소개](https://youtu.be/V6DClsETYTc) - [책 - https://wikidocs.net/book/7601](https://wikidocs.net/book/7601) # 2강 - [ken 13180, 2강, 프로젝트 생성, GIT 연결](https://youtu.be/Z5g1gxzQKq4) - [리포지터리 - https://github.com/sik2/sbb2310](https://github.com/sik2/sbb2310) - [GIT](https://github.com/sik2/sbb2310/commit/) - [책 - 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.0.4&packaging=jar&jvmVersion=17&groupId=com.mysite&artifactId=sbb&name=sbb&description=Demo%20project%20for%20Spring%20Boot&packageName=com.mysite.sbb&dependencies=web,devtools,lombok) - ![img](https://i.imgur.com/BHX997T.png) - ![img](https://i.imgur.com/O8SX74e.png) ## build.gradle ```groovy plugins { id 'java' id 'org.springframework.boot' version '3.1.5' id 'io.spring.dependency-management' version '1.1.3' } group = 'com.std' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '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' } tasks.named('bootBuildImage') { builder = 'paketobuildpacks/builder-jammy-base:latest' } tasks.named('test') { useJUnitPlatform() } ``` ## 참고 - [https://slog.gg/p/13178#3강](https://slog.gg/p/13178#3강) - [https://slog.gg/p/13178#4강](https://slog.gg/p/13178#4강) - [https://slog.gg/p/13178#5강](https://slog.gg/p/13178#5강) ## 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강 - [ken 13180, 스프링 부트 QNA 게시판 만들기, 3강, 초반에 설정하면 좋은 팁](https://youtu.be/lFEUheXljas) - [GIT](https://github.com/sik2/sbb2310/commit/) # 4강 - [ken 13180, 4강, 스프링 부트 QNA 게시판 만들기, 스프링 프로젝트의 구조](https://youtu.be/_6ZWTPbyifc) - [책 - 2-01 스프링부트 프로젝트의 구조](https://wikidocs.net/160947) ## 개념 - 패키지는 폴더이다. - 자바파일을 담는 폴더를 패키지라고 함 - templates 폴더에는 오직 html 파일만 저장됨 - static 폴더에는 css, js, 이미지(png, jpg, gif 등) 파일들이 저장됨 $$hide # 5강 - [23 03 20, ken 12155, 5강, 강사의 소스코드로부터 시작하는 방법, 오류메세지 속에 답이 있습니다. GIT에서 dubious 관련 오류 해결법](https://youtu.be/Bv58vmE3WaI) ## 참고 - [https://slog.gg/p/11973#7강](https://slog.gg/p/11973#7강) - 강사의 원격 리포지터리 정보 제거 후, 본인의 것으로 세팅 - [https://slog.gg/p/12110#3강](https://slog.gg/p/12110#3강) - 프로젝트 세팅 - [글 : fatal: detected dubious ownership in repository at '경로' 오류해결](https://velog.io/@ovzip/오류-fatal-detected-dubious-ownership-in-repository-at-경로) $$ # 5강 - [ken 12155, 스프링 부트 QNA 게시판 만들기, 5-1강, 컨트롤러](https://youtu.be/Sp1J-RzNEaI) - [ken 12155, 스프링 부트 QNA 게시판 만들기, 5-2강, auto reload](https://youtu.be/VHBj3ljP_0o) - [GIT](https://github.com/sik2/sbb2310/commit/) - [책 - 2-02 컨트롤러](https://wikidocs.net/160543) # 6강 - [ken 12155, 스프링 부트 QNA 게시판 만들기, 6강, JPA - JPA, ORM 개념 및 H2 데이터 베이스 설치](https://youtu.be/YoTvvcD9uxM) - [책 - 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이 궁금합니다'); ``` # 7강 - [ken 12155, 스프링 부트 QNA 게시판 만들기, 7강, JPA 설정](https://youtu.be/1cOuMWK9YDY) - [책 - 2-03 JPA](https://wikidocs.net/161164) # 8강 - [ken 13180, 8강, 엔티티 - Question, Answer 엔티티 추가](https://youtu.be/UJ2qCdEP51Q) - [GIT](https://github.com/sik2/sbb2310/commit/) - [책 - 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); ``` # 9강 - [ken 13180, 9강, 엔티티 - Answer 클래스의 Question question 필드에 @ManyToOne 적용](https://youtu.be/ST1IU35LMgk) - [GIT](https://github.com/sik2/sbb2310/commit/) - [책 - 2-04 엔티티](https://wikidocs.net/161165) ``` # application.properites spring.jpa.show-sql=true # sql 로그 보기 위한 옵션 ``` ## 답변저장 자바코드 ```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 @ManyToOne // 아래 처럼 다른 엔티티 클래스 리모콘을 저장할 때는 꼭 관계를 적어준다. private Question question; // `public class Answer` @ManyToOne `private Question question` } ``` ```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.setQuestion(q1); // 이 답변은 1번 질문에 대한 답변이라는 뜻 a1.setContent("반갑습니다."); answerRepository.save(a1); ``` # 10강 - [ken 13180, 10강, 엔티티 - 각 개체별 관계의 종류는 딱 3가지(1:1, 1:N, M:N)이고, 질문과 답변의 관계인 1:N 관계가 가장 흔하다.](https://youtu.be/SJj2JAYL7p0) - [책 - 2-04 엔티티](https://wikidocs.net/161165) ## 개요 - 엔티티 관계는 3가지가 존재한다. - 1:1 - 1:N - M:N - 1:N 관계의 대표적인 예 - 회원과 그 회원의 작성글들 - 게시물과 그 게시물의 댓글들 - 게시물과 그 게시물의 좋아요들 - 질문과 그 질문의 답변들 - 자바, 즉 객체에서는 1:N 으로 관련된 2개 객체가 서로를 참조할 수 있다. - DB에서는 1:N 으로 관련된 2개 개체가 서로를 참조할 수 없다. - 오직 `N`에 해당하는 각 개체에서 `1`에 해당하는 개체를 하나 가리킬 수 있다. - 객체와 개체는 패러다임이 불일치 한다. - 이유는 필드에 List나 배열을 저장 할 수 없어서 - 하지만 JPA는 그 불일치를 해소해준다. # 12강 - [ken 13180, 12강, 엔티티 - Question 클래스의 answerList 필드에 @OneToMany 적용](https://youtu.be/4h2j9cFjoCA) - [책 - 2-04 엔티티](https://wikidocs.net/161165) - [GIT](https://github.com/sik2/sbb2310/commit/b0c19c4) # 13강 - [ken 13180, 13강, 엔티티 - @ManyToOne은 필수이지만, @OneToMany 는 필수가 아니다. JPA가 불일치를 해소해줌](https://youtu.be/LXUcMZUuV1g) - [책 - 2-04 엔티티](https://wikidocs.net/161165) # 14강 - [ken 13180, 14강, 리포지터리 - 데이터 저장](https://youtu.be/SW7mwrqM8fo) - [GIT](https://github.com/sik2/sbb2310/commit/9dcc87d) - [책 - 2-05 리포지터리 - 데이터 저장](https://wikidocs.net/160890#_2) ## db/init.sql ```sql # 각 테이블 내용 초기화 ## 외래키 제약 끄기 SET FOREIGN_KEY_CHECKS = 0; ## 테이블 초기화 TRUNCATE answer; TRUNCATE question; # 외래키 제약 복구 SET FOREIGN_KEY_CHECKS = 1; ``` ## 개념 - 엔티티 클래스를 만들었다면 그에 대응하는 리포지터리 클래스를 만드는게 보통 - Question 클래스 => QuestionRepository 클래스 - Answer 클래스 => AnswerRepository 클래스 - 리포지터리 클래스는 특정 테이블을 관리(조회, 수정, 삭제)하는 기능을 제공해준다. - 여러분이 SQL을 직접 구현하지 않아도 된다. # 15강 - [ken 13180, 15강, 리포지터리 - 데이터 조회 1, 전체 조회](https://youtu.be/Rjmaodqv8oc) - [GIT](https://github.com/sik2/sbb2310/commit/f856433) - [ken 13180, 15강, 리포지터리 - 데이터 조회 2, 단건 조회](https://youtu.be/RkxZaY901vk) - [GIT](https://github.com/sik2/sbb2310/commit/c490dd8) - [책 - 2-05 리포지터리 - 데이터 조회](https://wikidocs.net/160890#_3) ## 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 ``` # 16강 - [ken 13180, 16강, 리포지터리 - 데이터 수정하기](https://youtu.be/O5dYbD2VWXY) - [GIT](https://github.com/sik2/sbb2310/commit/aa56ca7) - [책 - 2-05 리포지터리 - 데이터 수정하기](https://wikidocs.net/160890#_4) # 17강 - [ken 13180, 17강, 리포지터리 - 데이터 삭제하기](https://youtu.be/aoiadOjBjUM) - [GIT](https://github.com/sik2/sbb2310/commit/5a922a4) - [책 - 2-05 리포지터리 - 데이터 삭제하기](https://wikidocs.net/160890#_5) $$hide # 18강 - [23 03 21, ken 12155, 18강, 각 테스트케이스의 독립성 확보되도록 리팩토링, 1부, @BeforeEach](https://youtu.be/auM5oW2NW4Q) - [23 03 21, ken 12155, 18강, 각 테스트케이스의 독립성 확보되도록 리팩토링, 2부, @Transactional, @Modifying](https://youtu.be/Q73WV0r2THo) - [GIT](https://github.com/jhs512/sbb__2023_03_20/commit/7fd7495) ## 개념 - 각 테스트케이스는 독립적으로 실행이 가능해야 한다. # 24강 - [23 03 21, ken 12155, 24강, 리포지터리 - 테스트에서는 기본적으로 @Transactional 없이는 연결이 이어지지 않는다.](https://youtu.be/ICQdd8HXor4) - [책 - 2-05 리포지터리 - 답변에 연결된 질문 찾기 vs 질문에 달린 답변 찾기](https://wikidocs.net/160890#vs) # 25강 - [23 03 21, ken 12155, 25강, 리포지터리 - fetch=FetchType.EAGER의 의미](https://youtu.be/ciQj2WO_cF8) - [책 - 2-05 리포지터리 - 답변에 연결된 질문 찾기 vs 질문에 달린 답변 찾기](https://wikidocs.net/160890#vs) # 26강 - [23 03 21, ken 12155, 26강, 리포지터리 - 테스트 + @Transactional = 자동 롤백, @Rollback(false)](https://youtu.be/Zu3OPk8RBJ4) - [GIT](https://github.com/jhs512/sbb__2023_03_20/commit/6313db6) - [책 - 2-05 리포지터리 - 답변에 연결된 질문 찾기 vs 질문에 달린 답변 찾기](https://wikidocs.net/160890#vs) # 27강 - [23 03 21, ken 12155, 27강, 리포지터리에 대한 최종정리](https://youtu.be/KkENh8mjjPE) - [책 - 2-05 리포지터리](https://wikidocs.net/160890) $$ # 18강 - [ken 13180, 18강, 리포지터리 - 답변 데이터 생성 후 저장하기](https://youtu.be/cddW_aG4NyM) - [GIT](https://github.com/sik2/sbb2310/commit/126aa78) - [책 - 2-05 리포지터리 - 답변 데이터 생성 후 저장하기](https://wikidocs.net/160890#_6) # 19강 - [ken 13180, 19강, 리포지터리 - 답변 조회하기](https://youtu.be/S2IrRdGcXDY) - [GIT](https://github.com/sik2/sbb2310/commit/aa56ca7) - [책 - 2-05 리포지터리 - 답변 조회하기](https://wikidocs.net/160890#_7) # 20강 - [ken 13180, 20강, 리포지터리 - 답변에 연결된 질문 찾기 vs 질문에 달린 답변 찾기](https://youtu.be/OlNxg89s44o) - [GIT](https://github.com/sik2/sbb2310/commit/d9e0a2b) - [책 - 2-05 리포지터리 - 답변에 연결된 질문 찾기 vs 질문에 달린 답변 찾기](https://wikidocs.net/160890#vs) # 21강 - [21강, 리포지터리 - 테스트 시 @Transactional, fetch=FetchType.EAGER, fetch=FetchType.LAZY, @Rollback(false)](https://youtu.be/-sQUYLhkZGg) # 22강 - [ken 13180, 22강, JPA - MariaDB 연결](https://youtu.be/N9g9fE5LPak) - [GIT](https://github.com/sik2/sbb2310/commit/cdd9324) ## 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; ``` # 23강 - [ken 13180, 23강, 도메인 별로 분리하기](https://youtu.be/M5oTioGMZxw) - [GIT](https://github.com/sik2/sbb2310/commit/d5ea61a) - [책 - 2-06 도메인 별로 분리하기](https://wikidocs.net/161187) # 24강 - [ken 13180, 24강, 유지보수 관점에서 보는 결합도와 응집도](https://youtu.be/MdfWu2jnX50) - [책 - 2-06 도메인 별로 분리하기](https://wikidocs.net/161187) # 25강 - [ken 13180, 25강, 타임리프 연결](https://youtu.be/d54ommUc_QU) - [GIT](https://github.com/sik2/sbb2310/commit/b3c108e) - [책 - 2-07 질문 목록과 템플릿 - 404 오류 해결하기](https://wikidocs.net/161186#404) - [책 - 2-07 질문 목록과 템플릿 - 템플릿 설정하기](https://wikidocs.net/161186#_1) - [책 - 2-07 질문 목록과 템플릿 - 템플릿 사용하기](https://wikidocs.net/161186#_2) # 26강 - [ken 13180, 26강, HTML로 표 만들기](https://youtu.be/KAxNWvCQRDU) - [CODEPEN - 표](https://codepen.io/sik2/pen/KKJZwVj) - [CODEPEN - 표 꾸미기](https://codepen.io/sik2/pen/VwgyYwz?editors=1100) # 27강 - [ken 13180, 27강, 질문 목록과 템플릿, Model 객체로 뷰에 데이터 넘김](https://youtu.be/YxYfYHLqTh8) - @ToString.Exclude 사용하여 무한순환참조 방지 - [GIT](https://github.com/sik2/sbb2310/commit/771c347) - [책 - 2-07 질문 목록과 템플릿 - 데이터 조회하여 템플릿에 전달하기](https://wikidocs.net/161186#_3) ## 타임리프 : questionList 변수내용 출력 ```html

[[${questionList}]]

``` # 28강 - [ken 13180, 28강, 질문 목록과 템플릿, 뷰가 모델을 통해서 받은 데이터 렌더링](https://youtu.be/99Td5gCtFLs) - [GIT](https://github.com/sik2/sbb2310/commit/f35a99) - [책 - 2-07 질문 목록과 템플릿 - 템플릿에서 전달받은 데이터 사용하기](https://wikidocs.net/161186#_4) ## question_list.html ```html

Hello Template!

번호	제목	작성일시

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

``` # 29강 - [ken 13180, 29강, 타임리프 반복문(th:each) 사용하여 렌더링](https://youtu.be/pqo5Lpy_cwI) - [GIT](https://github.com/sik2/sbb2310/commit/5ab3586) - [책 - 2-07 질문 목록과 템플릿 - 템플릿에서 전달받은 데이터 사용하기](https://wikidocs.net/161186#_4) ## question_list.html ```html

질문 목록

번호	제목	작성일시

``` # 30강 - [ken 13180, 30강, ROOT URL와 리다이렉트](https://youtu.be/aTJtu-WyjY4) - [GIT](https://github.com/sik2/sbb2310/commit/25346ac) - [책 - 2-08 ROOT URL](https://wikidocs.net/161354) ## HTTP 응답 상태코드 - 2xx : 성공 - 3xx : 리다이렉트(다른 곳으로 가세요.) - 4xx : 실패(고객 잘못) - 5xx : 실패(서버 잘못) # 31강 - [ken 13180, 31강, SQL 로그내용을 더 자세하게](https://youtu.be/LzcRktN4p8E) - [GIT](https://github.com/sik2/sbb2310/commit/7c352be) ## application.properties ```properties # LOGGING logging.level.org.hibernate.orm.jdbc.bind=TRACE // ? 값 확인 logging.level.org.hibernate.orm.jdbc.extract=TRACE // 결과 확인 ``` ## application.yml ```yml # LOGGING logging: level: org.hibernate.orm.jdbc.bind: TRACE org.hibernate.orm.jdbc.extract: TRACE ``` # 32강 - [ken 13180, 32강, QuestionService 서비스 도입](https://youtu.be/ndoVNtVlpiU) - [GIT](https://github.com/sik2/sbb2310/commit/d0d5ed3) - [책 - 2-09 서비스](https://wikidocs.net/161220) # 33강 - [ken 13180, 33강, 질문 상세 - 질문 상세 링크 추가하기](https://youtu.be/HNHpwQ7IYKc) - [GIT](https://github.com/sik2/sbb2310/commit/18f103f) - [책 - 2-10 질문 상세 - 질문 상세 링크 추가하기](https://wikidocs.net/161302#_1) ## th:href - 타임리프에서 주소는 `@{|주소|}` 양식으로 표현하도록 약속되어 있음 - 양식 : `th:href="@{|주소|}"` => 렌더링 => `href="주소"` ### 소스 ```html ``` ### 렌더링결과(q변수에 1번 질문객체 리모콘이 저장되어 있다고 가정했을 때) ```html 1 sbb가 무엇인가요? 2023-03-22T11:12:40.935786 ``` # 34강 - [ken 13180, 34강, 질문 상세 - 질문 상세 컨트롤러 만들기](https://youtu.be/ON0Hda7P1Gw) - [GIT](https://github.com/sik2/sbb2310/commit/f4f0918) - [책 - 2-10 질문 상세 - 질문 상세 컨트롤러 만들기](https://wikidocs.net/161302#_2) # 35강 - [ken 13180, 35강, 질문 상세 - 서비스, 템플릿](https://youtu.be/FpfnmWqlQZs) - [GIT](https://github.com/sik2/sbb2310/commit/1076fdf) - [책 - 2-10 질문 상세 - 서비스](https://wikidocs.net/161302#_3) - [책 - 2-10 질문 상세 - 템플릿](https://wikidocs.net/161302#_4) - [책 - 2-10 질문 상세 - 질문 상세 확인하기](https://wikidocs.net/161302#_5) # 36강 - [ken 13180, 36강, 질문 상세 - URL 프리픽스(prefix)](https://youtu.be/a-sNmDsOoNE) - [GIT](https://github.com/sik2/sbb2310/commit/9f48539) - [책 - 2-10 질문 상세 - URL 프리픽스(prefix)](https://wikidocs.net/161302#url-prefix) # 37강 - [ken 13180, 37강, 답변 등록 - 답변 등록 버튼 만들기](https://youtu.be/dgu_7QPQgjc) - [GIT](https://github.com/sik2/sbb2310/commit/3c6cadc) - [책 - 2-11 답변 등록 - 답변 등록 버튼 만들기](https://wikidocs.net/161357#_1) ## HTTP METHOD 주 사용처 - GET - 링크이동(a 엘리먼트를 이용한 이동) - 브라우저의 주소창에 직접입력 - 검색폼 - 그 외 - POST - 글 작성 - 글 수정 - 댓글 작성 - 댓글 수정 - 좋아요 - 좋아요 취소 - 삭제 - GET으로 삭제하는 경우도 가끔 있다. # 38강 - [ken 13180, 38강, 답변 등록 - 답변 컨트롤러 만들기](https://youtu.be/r9Fn61lhkKw) - [GIT](https://github.com/sik2/sbb2310/commit/ad4d735) - [책 - 2-11 답변 등록 - 답변 컨트롤러 만들기](https://wikidocs.net/161357#_2) # 39강 - [ken 13180, 39강, 질문을 저장하는 곳에서 처리하고 redirect 하는 방식](https://youtu.be/wsvDoa-io6s) ## 소스코드 ```java @PostMapping("/create/{id}") public String createAnswer(Model model, @PathVariable Integer id, @RequestParam String content) { // 관련 질문을 얻어온다. Question question = questionService.getQuestion(id); // TODO : 답변객체를 만든다. return "redirect:/question/detail/%d".formatted(id); } ``` ## 처리순서 - 현재 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 - 요청을 날리기 전과 똑같은 화면이 보인다. # 40강 - [ken 13180, 40강, 질문을 저장하는 곳에서 처리하고 redirect 하지 않고 본인이 직접 템플릿 실행하여 응답하는 방식](https://youtu.be/HAffibUOAp4) ## 소스코드 ```java @PostMapping("/create/{id}") public String createAnswer(Model model, @PathVariable Integer id, @RequestParam String content) { // 관련 질문을 얻어온다. Question question = questionService.getQuestion(id); // TODO : 답변객체를 만든다. model.addAttribute("question", question); return "question_detail"; // 이 템플릿은 QuestionController::detail 메서드에서 사용하던 그 템플릿 이다. 이렇게 되면 고객이 다시 GET 요청할 필요가 없어진다. 위 방식과 비교해서 장단점이 있다. } ``` ## 처리순서 - 현재 URL : /question/detail/1 - 폼의 textarea에 값을 "안녕"으로 채우고 작성버튼 클릭 - 요청 : POST /answer/create/1 - PAYLOAD : `content: 안녕` - 브라우저에서는 하얀화면 나오는 중 - 요청처리 : AnswerController::createAnswer 액션 메서드 실행 - 요청처리 : Question question = questionService.getQuestion(id); - 요청처리 : model.addAttribute("question", question); - 요청처리 : question_detail.html 템플릿 실행 - 응답 : 템플릿에 데이터가 결합된 최종 html이 고객에게 전달 - 응답수신 : 브라우저에서 더 이상 하얀화면이 나오지 않고, 응답받은 html 렌더링 - 최종 URL : /answer/create/1 - 요청을 날리기 전과 똑같은 화면이 보이지만 URL이 달라졌다. # 41강 - [ken 13180, 41강, 답변 등록 - 답변 저장하기](https://youtu.be/U0lmK_h8Jd0) - [GIT](https://github.com/sik2/sbb2310/commit/290ef8d) - [책 - 2-11 답변 등록 - 답변 저장하기](https://wikidocs.net/161357#_3) # 42강 - [ken 13180, 42강, 답변 등록 - 질문 상세 페이지에 답변 표시하기](https://youtu.be/HRyBWF1kmiA) - [GIT](https://github.com/sik2/sbb2310/commit/73a029e) - [책 - 2-11 답변 등록 - 질문 상세 페이지에 답변 표시하기](https://wikidocs.net/161357#_4) # 43강 - [ken 13180, 43강, 스태틱 디렉터리와 스타일시트](https://youtu.be/Lzy_7s3N8A4) - [책 - 2-12 스태틱 디렉터리와 스타일시트](https://wikidocs.net/161396) ## 정적자원 vs 동적자원 - 정적(스태틱)자원 - 변화 가능성이 없는 html - css - js - img - 기타 파일들 - 동적(다이나믹)자원 - 게시물 리스트 페이지 - 게시물 상세페이지 - 기타 등등 ## 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) # 44강 - [ken 13180, 44강-1부, 부트스트랩](https://youtu.be/JzDllXGIyy8) - [ken 13180, 44강-2부, 상세페이지 적용 및 폰트 적용](https://youtu.be/6cVWLO-eaj4) - [GIT - 1부](https://github.com/sik2/sbb2310/commit/ee398f0) - [GIT - 2부](https://github.com/sik2/sbb2310/commit/e17d6f8) - [책 - 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/) # 45강 - [ken 13180, 45강, 템플릿 상속 - emmet, 젠코딩 활용](https://youtu.be/2zZeKneWzUQ) - [책 - 2-14 템플릿 상속](https://wikidocs.net/161459) - [CODEPEN - 표준 HTML 구조](https://codepen.io/jangka44/pen/yLxQXeV?editors=1000) - emmet 코드(zencoding) - `!`[탭] ```html

공통메뉴

``` ## 각 템플릿에서 중복되는 소스코드 - 아래 코드들은 각각의 템플릿이 아닌 별도의 파일로 관리해야 한다. # 46강 - [ken 13180, 46강, 템플릿 상속 - 적용](https://youtu.be/iMDISED8lN4) - [GIT - 1부](https://github.com/sik2/sbb2310/commit/250dc7b) - [책 - 2-14 템플릿 상속](https://wikidocs.net/161459) ## 부트스트랩 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) # 47강 - [ken 13180, 47강, 질문 등록과 폼 - 질문 등록 1부](https://youtu.be/vG3Y6xWXh-w) - [ken 13180, 47강, 질문 등록과 폼 - 질문 등록 2부](https://youtu.be/9OlM39LrTGQ) - [GIT - 1부](https://github.com/sik2/sbb2310/commit/7be585f) - [GIT - 1부](https://github.com/sik2/sbb2310/commit/a0f7854) - [책 - 2-15 질문 등록과 폼 - 질문 등록](https://wikidocs.net/161873#_1) # 48강 - [ken 13180, 48강, 질문 등록과 폼 - QuestionForm 객체 생성 및 입력받은 데이터 유효성 체크, Spring Boot Validation 적용](https://youtu.be/4nAEQ4IB72A) - [GIT](https://github.com/sik2/sbb2310/commit/c7689ee) - [책 - 2-15 질문 등록과 폼 - 폼](https://wikidocs.net/161873#form) # 49강 - [ken 13180, 49강, 데이터 유효성 체크 원리 설명](https://youtu.be/3nSZ8qZbX-g) ## 액션 메서드 파라미터로 썻기 때문에 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"; } ``` # 50강 - [ken 13180, 50강, 질문 등록과 폼 -사용하기](https://youtu.be/ZfxrqtxR2JA) - [GIT](https://github.com/sik2/sbb2310/commit/9720420) - [책 - 2-15 질문 등록과 폼 - 폼](https://wikidocs.net/161873#form) # 51강 - [ken 13180, 51강, 질문 등록과 폼 - th:field 풀어 쓴 버전](https://youtu.be/qJfn78fhCoc) - [GIT](https://github.com/sik2/sbb2310/commit/53ce3f2) - [책 - 2-15 질문 등록과 폼 - 폼](https://wikidocs.net/161873#form) # 52강 - [23 03 23, ken 13180, 52강, 질문 등록과 폼 - 답변 등록](https://youtu.be/-pLHZEtc_yk) - [GIT](https://github.com/sik2/sbb2310/commit/662002e) - [책 - 2-15 질문 등록과 폼 - 답변 등록](https://wikidocs.net/161873#_8) # 53강 - [ken 13180, 53강, 질문 등록과 폼 - 폼필드 속성으로 프론트단에서 유효성 작업](https://youtu.be/2t4P_O_FTmc) - [GIT](https://github.com/sik2/sbb2310/commit/cd529f7) - [책 - 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자 # 54강 - [ken 13180, 54강, 공통 템플릿](https://youtu.be/OCWhVLURcEI) - [GIT](https://github.com/sik2/sbb2310/commit/85081e7) - [책 - 2-16 공통 템플릿](https://wikidocs.net/161911) ```html

``` # 55강 - [ken 13180, 55강 1부, 내비게이션 바](https://youtu.be/6u2BaR-yQdY) - [ken 13180, 55강 2부, 내비게이션 바 코드 분리](https://youtu.be/_zl8AmXJkSg) - [GIT - 1](https://github.com/sik2/sbb2310/commit/de404a1) - [GIT - 2](https://github.com/sik2/sbb2310/commit/07f4679) - [책 - 3-01 내비게이션 바](https://wikidocs.net/) - [부트스트랩 - 예시 - 내비바 - https://getbootstrap.kr/docs/5.2/examples/navbars/](https://getbootstrap.kr/docs/5.2/examples/navbars/) - [cdn bootstrap](https://cdnjs.com/libraries/bootstrap) # 56강 - [ken 13180, 56강, 페이징 - 대량 테스트 데이터 만들기](https://youtu.be/mnfk2BON_Cg) - [GIT](https://github.com/sik2/sbb2310/commit/c020359) - [책 - 3-02 페이징 - 대량 테스트 데이터 만들기](https://wikidocs.net/162028#_1) ----- ```java @RequiredArgsConstructor @Service public class UserService implements UserDetailsService { private final UserRepository userRepository; private final PasswordEncoder passwordEncoder; public SiteUser create(String username, String email, String password) { SiteUser user = new SiteUser(); user.setUsername(username); user.setEmail(email); user.setPassword(passwordEncoder.encode(password)); this.userRepository.save(user); return user; } @Override public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException { Optional _siteUser = this.userRepository.findByusername(username); if (_siteUser.isEmpty()) { throw new UsernameNotFoundException("사용자를 찾을수 없습니다."); } SiteUser siteUser = _siteUser.get(); List authorities = new ArrayList<>(); authorities.add(new SimpleGrantedAuthority("ROLE_USER")); return new User(siteUser.getUsername(), siteUser.getPassword(), authorities); } } ``` # 57강 - [ken 13180, 57강, 페이징 - 페이징 구현하기](https://youtu.be/PKqG4_G1Sx4) - [GIT](https://github.com/sik2/sbb2310/commit/6a87b29) - [책 - 3-02 페이징 - 페이징 구현하기](https://wikidocs.net/162028#_2) # 58강 - [ken 13180, 58강, 페이징 - 템플릿에 페이지 이동 기능 구현하기](https://youtu.be/ehO7RlqAjFc) - [GIT](https://github.com/sik2/sbb2310/commit/de33774) - [책 - 3-02 페이징 - 템플릿에 페이지 이동 기능 구현하기](https://wikidocs.net/162028#_3) - [책 - 3-02 페이징 - 페이지 리스트](https://wikidocs.net/162028#_4) - [부트스트랩 - 페이지네이션 - https://getbootstrap.kr/docs/5.2/components/pagination/](https://getbootstrap.kr/docs/5.2/components/pagination/) # 59강 - [ken 12155, 59강, 페이징 - 작성일시 역순으로 조회하기, 페이지 숫자 + 1](https://youtu.be/KYoxQlfdnQA) - [GIT](https://github.com/sik2/sbb2310/commit/888cfea) - [책 - 3-02 페이징 - 작성일시 역순으로 조회하기](https://wikidocs.net/162028#_5) # 60강 - [ken 13180, 60강, 게시물에 일련번호 추가하기](https://youtu.be/RogNABm7aec) - [GIT](https://github.com/sik2/sbb2310/commit/5dfe344) - [책 - 3-03 게시물에 일련번호 추가하기](https://wikidocs.net/162090) # 61강 - [ken 13180, 61강, 답변 개수 표시](https://youtu.be/ZtDzCtECkNU) - [GIT](https://github.com/sik2/sbb2310/commit/40086de) - [책 - 3-04 답변 개수 표시](https://wikidocs.net/162092) # 62강 - [ken 13180, 62강, 스프링 시큐리티 - 스프링 시큐리티 추가, 설정객체 생성](https://youtu.be/kdswKIKzQLw) - [GIT](https://github.com/sik2/sbb2310/commit/d95a20a) - [책 - 3-05 스프링 시큐리티 - 스프링 시큐리티란?](https://wikidocs.net/162150#_1) - [책 - 3-05 스프링 시큐리티 - 스프링 시큐리티 설치](https://wikidocs.net/162150#_2) - [책 - 3-05 스프링 시큐리티 - 스프링 시큐리티 설정](https://wikidocs.net/162150#_3) # 63강 - [ken 13180, 63강, 스프링 시큐리티 - User 엔티티, MVC 생성 후 PasswordEncoder 빈 등록](https://youtu.be/4GrjUj9hE4o) - [GIT](https://github.com/sik2/sbb2310/commit/8f28f5d) - [책 - 3-06 회원가입 - 회원 정보를 위한 엔티티](https://wikidocs.net/162141#_1) - [책 - 3-06 회원가입 - User 리포지터리와 서비스](https://wikidocs.net/162141#_user1) # 64강 - [ken 13180, 64강, 회원가입 - 유저, 유저 리포지터리, 유저 서비스, 테스트 회원 2명 생성](https://youtu.be/GyrN6LLUwW4) - [GIT](https://github.com/sik2/sbb2310/commit/bfe2b2d) # 65강 - [ken 13180, 65강, 회원가입 Controller, 회원가입 폼 생성](https://youtu.be/JclBDW0m5gI) - [GIT](https://github.com/sik2/sbb2310/commit/c427103) - [책 - 3-06 회원가입 - 회원가입 폼](https://wikidocs.net/162141#_2) - [책 - 3-06 회원가입 - 회원가입 컨트롤러](https://wikidocs.net/162141#_3) - [책 - 3-06 회원가입 - 회원가입 템플릿](https://wikidocs.net/162141#_4) - [책 - 3-06 회원가입 - 회원가입 실행해 보기](https://wikidocs.net/162141#_6) - [책 - 3-06 회원가입 - 회원가입 데이터 확인해 보기](https://wikidocs.net/162141#_7) # 66강 - [ken 13180, 66강, 회원가입 - 네비게이션 회원가입 추가, 중복된 회원에 대한 처리](https://youtu.be/n5H3WKijfLU) - [GIT](https://github.com/sik2/sbb2310/commit/a327178) - [책 - 3-06 회원가입 - 내비게이션 바에 회원가입 링크 추가하기](https://wikidocs.net/162141#_5) - [책 - 3-06 회원가입 - 중복 회원가입](https://wikidocs.net/162141#_8) # 67강 - [ken 13180, 67강, 로그인과 로그아웃 - UserDetailsService를 구현](https://youtu.be/G5-k2hNBDnU) - [GIT](https://github.com/sik2/sbb2310/commit/76c7638) - [책 - 3-07 로그인과 로그아웃 - 로그인 구현하기](https://wikidocs.net/162255#_1) # 68강 - [ken 13180, 68강, 로그인과 로그아웃 - 로그아웃 구현하기](https://youtu.be/J0aoxfkPZAs) - [GIT](https://github.com/sik2/sbb2310/commit/6c6d010) - [책 - 3-07 로그인과 로그아웃 - 로그인 구현하기](https://wikidocs.net/162255) - [책 - 3-07 로그인과 로그아웃 - 로그아웃 구현하기](https://wikidocs.net/162255#_2) # 69강 - [ken 13180, 69강, 엔티티 변경 - Answer 엔티티 수정 및 로직 수정](https://youtu.be/U7R-UKZPX0M) - [GIT](https://github.com/sik2/sbb2310/commit/7f71b19) - [책 - 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) # 70강 - [ken 13180, 70강, 엔티티 변경 - Question 엔티티 추가 및 로직 수정](https://youtu.be/2To2HQeLrx8) - [GIT](https://github.com/sik2/sbb2310/commit/21e042a) - [책 - 3-08 엔티티 변경 - author 저장](https://wikidocs.net/162330#author) # 71강 - [ken 13180, 71강, 엔티티 변경 - @PreAuthorize 어노테이션 추가, 로그인 했을 경우만 등록 허용](https://youtu.be/vAs_ogOMw8g) - [GIT](https://github.com/sik2/sbb2310/commit/4c670d1) - [책 - 3-08 엔티티 변경 - 로그인이 필요한 메서드](https://wikidocs.net/162330#_4) - [책 - 3-08 엔티티 변경 - disabled](https://wikidocs.net/162330#disabled) # 72강 - [ken 13180, 72강, 글쓴이 표시](https://youtu.be/21VcPG1lBvg) - [GIT](https://github.com/sik2/sbb2310/commit/b3dc18a) - [책 - 3-09 글쓴이 표시](https://wikidocs.net/162413) # 73강 - [ken 13180, 73강, 수정과 삭제 - 질문 수정 버튼, Controller 작업](https://youtu.be/jqWcCTKLXPY) - [GIT](https://github.com/sik2/sbb2310/commit/3cf0e78) - [책 - 3-10 수정과 삭제 - 수정 일시](https://wikidocs.net/162416#_1) - [책 - 3-10 수정과 삭제 - 질문 수정](https://wikidocs.net/162416#_2) # 74강 - [ ken 13180, 74강, 수정과 삭제 - 질문 수정](https://youtu.be/U06XVINe-nI) - [GIT](https://github.com/sik2/sbb2310/commit/503b11e) - [책 - 3-10 수정과 삭제 - 수정 일시](https://wikidocs.net/162416#_1) - [책 - 3-10 수정과 삭제 - 질문 수정](https://wikidocs.net/162416#_2) # 75강 - [ken 13180, 75강, 수정과 삭제 - 질문 삭제](https://youtu.be/7SIy5yKWJK4) - [GIT](https://github.com/sik2/sbb2310/commit/d39fce1) - [책 - 3-10 수정과 삭제 - 질문 삭제](https://wikidocs.net/162416#_5) # 76강 - [ken 13180, 76강, 수정과 삭제 - 답변 수정](https://youtu.be/RP0LtDJYHnw) - [GIT](https://github.com/sik2/sbb2310/commit/2edbeff) - [책 - 3-10 수정과 삭제 - 답변 수정](https://wikidocs.net/162416#_10) # 77강 - [ken 13180, 77강, 수정과 삭제 - 답변 삭제](https://youtu.be/vJsuV-pWNAQ) - [GIT](https://github.com/sik2/sbb2310/commit/10d841e) - [책 - 3-10 수정과 삭제 - 답변 삭제](https://wikidocs.net/162416#_13) # 78강 - [ken 13180, 78강, 수정과 삭제 - 수정일시 표시하기](https://youtu.be/Xkw0r3H3BQg) - [GIT](https://github.com/sik2/sbb2310/commit/57d61b3) - [책 - 3-10 수정과 삭제 - 수정일시 표시하기](https://wikidocs.net/162416#_16) # 79강 - [ken 13180, 79강, 추천 - Set 타입의 votes 필드 추가, 질문 답변 추천 기능 추가](https://youtu.be/KBwaXPlbgKY) - [GIT](https://github.com/sik2/sbb2310/commit/2020cbb) - [책 - 3-11 추천 - 엔티티 변경](https://wikidocs.net/162657#_1) # 80강 - [ken 13180, 80강, 앵커 - 앵커 개념 및 적용](https://youtu.be/lDR1OJQfvsc) - [책 - 3-12 앵커](https://wikidocs.net/162763) - [CODEPEN](https://codepen.io/jangka44/pen/PoRLVJL) - [일반링크 - 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) # 81강 - [ken 13180, 81강, 앵커 - 앵커 작업](https://youtu.be/9MAmSDmjx6A) - [GIT](https://github.com/sik2/sbb2310/commit/abec8bd) - [책 - 3-12 앵커](https://wikidocs.net/162763) # 82강 - [ken 13180, 82, 마크다운 - 마크다운 파싱 적용](https://youtu.be/hhYXLGPZs8k) - [GIT](https://github.com/sik2/sbb2310/commit/03a0477) - [책 - 3-13 마크다운](https://wikidocs.net/162799) # 83강 - [ken 13180, 83강, 검색 - SQL](https://youtu.be/TcJolzbh-nc) - [책 - 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; ``` # 84강 - [ken 13180, 84강, 검색 - Specification 을 이용한 검색기능 구현, 검색 폼 구현](https://youtu.be/qiym-HKvdvY) - [GIT](https://github.com/sik2/sbb2310/commit/4c0dec9) - [책 - 3-14 검색](https://wikidocs.net/162814) # 85 강 - [ken 13180, 85강, 검색 - 검색 후 페이지이동을 해도 검색이 안 풀리도록](https://youtu.be/HntGDVHk_qc) - [책 - 3-14 검색](https://wikidocs.net/162814) - [GIT](https://github.com/sik2/sbb2310/commit/3822c81) ## AJAX 실습 ### 질문 추천 & 답변추천 - [GIT](https://github.com/sik2/sbb2310/commit/27e3f98) # 책 3-15 추가문제 난이도 쉬운순 1. 조회 수 - 1단계 : 단순증가 - 2단계 : 로컬 스토리지 + ajax - 같은 브라우저로는 하나의 글에 대해서 조회 수 증가를 2번 이상할 수 없도록 - 난이도 상 1. 프로필 1. 최근 답변과 최근 댓글 - 최근 댓글은 패스 1. 카테고리 1. 마크다운 에디터 1. 비밀번호 찾기와 변경 - 스프링 부트 이메일로 임시 비번 발송 - 특정 GMAIL 계정으로 발송하지 마세요. 1. 소셜 로그인 - 카카오 로그인 - 구글 로그인 1. 답변 페이징과 정렬 1. 댓글 $$hide $$

? 스프링부트 - QNA 게시판 만들기