▼ What ?
7주차엔 게시물/댓글 추천(좋아요) 기능, 답변을 작성했을 때 작성한 답변 위치로 스크롤 되는 기능을 구현해보고 게시물/댓글을 작성할 때 마크다운 문법이 적용되도록 했으며, 마지막으로 구현한 것은 검색 기능 정도였던 것 같다.
▼ 추천
엔티티 변경 - Question, Answer
- 일단 질문 추천한 사람이면 Question 엔티티에, 답변 추천한 사람이면 Answer 엔티티에 추가해줘야 한다.
- Question 엔티티
➜ voter(추천인) 속성 추가
➜ 추천인은 중복되서는 안되기 때문에 voter 타입을 List가 아닌 Set으로 해야 한다.
...
import java.util.Set;
import jakarta.persistence.ManyToMany;
...
public class Question {
...
@ManyToMany
Set<SiteUser> voter;
}
🔻 @ManyToMany
➜ 하나의 질문에 여러 사람이 추천할 수 있고, 한 사람이 여러 질문을 추천할 수 있기 때문 !
- Answer 엔티티
➜ voter(추천인) 속성 추가
...
import java.util.Set;
import jakarta.persistence.ManyToMany;
...
public class Answer {
...
@ManyToMany
Set<SiteUser> voter;
}
- @ManyToMany 관계로 속성을 생성하게 되면 아래처럼 새로운 테이블이 생성되어 데이터를 관리하게 된다.
➜ ANSWER_VOTER, QUESTION_VOTER
질문 추천 버튼 생성
- 일단, 질문 추천 버튼을 추가하기 위해 question_detail 템플릿을 수정해주자.
[ /webboard/src/main/resources/templates/question_detail.html ]
...
<!-- 질문 -->
<h2 class="border-bottom py-2" th:text="${question.subject}"></h2>
<div class="card my-3">
<div class="card-body">
...
<div class="my-3">
<a href="javascript:void(0);" class="recommend btn btn-sm btn-outline-secondary"
th:data-uri="@{|/question/vote/${question.id}|}">
추천
<span class="badge rounded-pill bg-success" th:text="${#lists.size(question.voter)}"></span>
</a>
<a th:href="@{|/question/modify/${question.id}|}" class="btn btn-sm btn-outline-secondary"
sec:authorize="isAuthenticated()"
th:if="${question.author != null and #authentication.getPrincipal().getUsername() == question.author.username}"
th:text="수정"></a>
<a href="javascript:void(0);" th:data-uri="@{|/question/delete/${question.id}|}"
class="delete btn btn-sm btn-outline-secondary" sec:authorize="isAuthenticated()"
th:if="${question.author != null and #authentication.getPrincipal().getUsername() == question.author.username}"
th:text="삭제"></a>
</div>
</div>
</div>
...🔻 href="javascript:void(0);"
➜ 추천 버튼을 클릭해도 아무런 동작을 하지 않게 된다.
➜ class 속성에 'recommend' 를 추가하여 자바스크립트를 사용해 data-uri에 정의된 "/question/vote/{question.id}" URL이 호출되도록 한다.
- 추천 버튼 확인창이 나타나도록 question_detail 템플릿에 코드를 추가해주자.
...
<script layout:fragment="script" type='text/javascript'>
...
const recommend_elements = document.getElementsByClassName("recommend");
Array.from(recommend_elements).forEach(function(element) {
element.addEventListener('click', function() {
if(confirm("정말로 추천하시겠습니까?")) {
location.href = this.dataset.uri;
};
});
});
</script>
</html>
질문 추천인 저장 - Question 서비스
- 사용자(siteUser)를 추천인(voter)으로 저장하는 vote 메서드를 QuestionService에 추가하자.
...
public class QuestionService {
...
public void vote(Question question, SiteUser siteUser) {
question.getVoter().add(siteUser);
this.questionRepository.save(question);
}
}
질문 추천 버튼 URL 처리 - Question 컨트롤러
- 추천 버튼을 눌렀을 때 호출되는 URL을 처리하는 questionVote 메서드를 QuestionController에 추가해주자.
...
public class QuestionController {
...
@PreAuthorize("isAuthenticated()")
@GetMapping("/vote/{id}")
public String questionVote(Principal principal, @PathVariable("id") Integer id) {
Question question = this.questionService.getQuestion(id);
SiteUser siteUser = this.userService.getUser(principal.getName());
this.questionService.vote(question, siteUser);
return String.format("redirect:/question/detail/%s", id);
}
}🔻 @PreAuthorize("isAuthenticated()")
➜ 추천은 로그인한 사용자만 가능해야 하므로 이 애너테이션을 적용해야 한다.
답변 추천 버튼 생성
- 질문 추천 버튼을 생성한 방식과 같은 방식으로 구현해주면 된다.
[ /webboard/src/main/resources/templates/question_detail.html ]
...
<!-- 답변 반복 시작 -->
<div class="card my-3" th:each="answer : ${question.answerList}">
<div class="card-body">
...
<div class="my-3">
<a href="javascript:void(0);" class="recommend btn btn-sm btn-outline-secondary"
th:data-uri="@{|/answer/vote/${answer.id}|}">
추천
<span class="badge rounded-pill bg-success" th:text="${#lists.size(answer.voter)}"></span>
</a>
<a th:href="@{|/answer/modify/${answer.id}|}" class="btn btn-sm btn-outline-secondary"
sec:authorize="isAuthenticated()"
th:if="${answer.author != null and #authentication.getPrincipal().getUsername() == answer.author.username}"
th:text="수정"></a>
<a href="javascript:void(0);" th:data-uri="@{|/answer/delete/${answer.id}|}"
class="delete btn btn-sm btn-outline-secondary" sec:authorize="isAuthenticated()"
th:if="${answer.author != null and #authentication.getPrincipal().getUsername() == answer.author.username}"
th:text="삭제"></a>
</div>
</div>
</div>
<!-- 답변 반복 끝 -->
...
답변 추천인 저장 - Answer 서비스
- 사용자(siteUser)를 추천인(voter)으로 저장하는 vote 메서드를 AnswerService에 추가하자.
...
public class AnswerService {
...
public void vote(Answer answer, SiteUser siteUser) {
answer.getVoter().add(siteUser);
this.answerRepository.save(answer);
}
}
답변 추천 버튼 URL 처리 - Answer 컨트롤러
- 추천 버튼을 눌렀을 때 호출되는 URL을 처리하는 questionVote 메서드를 AnswerController에 추가해주자.
...
public class AnswerController {
...
@PreAuthorize("isAuthenticated()")
@GetMapping("/vote/{id}")
public String answerVote(Principal principal, @PathVariable("id") Integer id) {
Answer answer = this.answerService.getAnswer(id);
SiteUser siteUser = this.userService.getUser(principal.getName());
this.answerService.vote(answer, siteUser);
return String.format("redirect:/question/detail/%s", answer.getQuestion().getId());
}
}
▼ 앵커
답변 앵커 추가
- 답변을 작성하거나 수정 시에 해당 답변의 위치로 스크롤 될 수 있게 앵커 태그를 question_detail 템플릿에 추가해보자.
[ /webboard/src/main/resources/templates/question_detail.html ]
...
<!-- 답변의 갯수 표시 -->
<h5 class="border-bottom my-3 py-2"
th:text="|${#lists.size(question.answerList)}개의 답변이 있습니다.|"></h5>
<!-- 답변 반복 시작 -->
<div class="card my-3" th:each="answer : ${question.answerList}">
<a th:id="|answer_${answer.id}|"></a> <!-- 앵커 태그 추가 -->
<div class="card-body">
...🔻 이제 답변을 등록하거나 수정할 때 위에서 지정한 앵커 태그로 이동하도록 코드를 수정해야 한다.
답변 객체 반환 - Answer 서비스
- 컨트롤러에서 답변이 등록된 위치로 이동하기 위해선 답변 객체가 필요하기 때문에 create 메서드가 answer 답변 객체 를 반환하도록 수정해주자.
...
public class AnswerService {
...
public Answer create(Question question, String content, SiteUser author) {
Answer answer = new Answer();
answer.setContent(content);
answer.setCreateDate(LocalDateTime.now());
answer.setQuestion(question);
answer.setAuthor(author);
this.answerRepository.save(answer);
return answer;
}
...
}
답변 Redirect - Answer 컨트롤러
- 답변을 작성, 수정, 추천한 후에 해당 답변으로 이동하도록 앵커 태그를 추가해주자 !
(... 생략 ...)
public class AnswerController {
(... 생략 ...)
@PreAuthorize("isAuthenticated()")
@PostMapping("/create/{id}")
public String createAnswer(Model model, @PathVariable("id") Integer id,
@Valid AnswerForm answerForm, BindingResult bindingResult, Principal principal) {
Question question = this.questionService.getQuestion(id);
SiteUser siteUser = this.userService.getUser(principal.getName());
if (bindingResult.hasErrors()) {
model.addAttribute("question", question);
return "question_detail";
}
Answer answer = this.answerService.create(question,
answerForm.getContent(), siteUser);
return String.format("redirect:/question/detail/%s#answer_%s", // 등록한 답변 앵커
answer.getQuestion().getId(), answer.getId());
}
...
@PreAuthorize("isAuthenticated()")
@PostMapping("/modify/{id}")
public String answerModify(@Valid AnswerForm answerForm, @PathVariable("id") Integer id,
BindingResult bindingResult, Principal principal) {
if (bindingResult.hasErrors()) {
return "answer_form";
}
Answer answer = this.answerService.getAnswer(id);
if (!answer.getAuthor().getUsername().equals(principal.getName())) {
throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "수정권한이 없습니다.");
}
this.answerService.modify(answer, answerForm.getContent());
return String.format("redirect:/question/detail/%s#answer_%s", // 수정한 답변 앵커
answer.getQuestion().getId(), answer.getId());
}
...
@PreAuthorize("isAuthenticated()")
@GetMapping("/vote/{id}")
public String answerVote(Principal principal, @PathVariable("id") Integer id) {
Answer answer = this.answerService.getAnswer(id);
SiteUser siteUser = this.userService.getUser(principal.getName());
this.answerService.vote(answer, siteUser);
return String.format("redirect:/question/detail/%s#answer_%s", // 추천한 답변 앵커 추가
answer.getQuestion().getId(), answer.getId());
}
}
▼ 마크다운 적용
마크다운 라이브러리 설치
- build.gradle 파일을 수정하여 마크다운을 설치하자.
...
dependencies {
...
implementation 'org.commonmark:commonmark:0.21.0'
}
...
마크다운 컴포넌트 생성
- 컨트롤러에서 질문이나 답변을 조회한 후 마크다운 라이브러리를 적용하여 변환된 HTML을 얻어도 되지만, 좀 더 범용적으로 사용할 수 있도록 마크다운 컴포넌트(CommonUtil.java)를 만들어 타임리프 템플릿에서 사용하도록 하자.
[ /webboard/src/main/java/com/gdsc/webboard/CommonUtil.java ]
package com.gdsc.webboard;
import org.commonmark.node.Node;
import org.commonmark.parser.Parser;
import org.commonmark.renderer.html.HtmlRenderer;
import org.springframework.stereotype.Component;
@Component
public class CommonUtil {
public String markdown(String markdown) {
Parser parser = Parser.builder().build();
Node document = parser.parse(markdown);
HtmlRenderer renderer = HtmlRenderer.builder().build();
return renderer.render(document);
}
}
템플릿에 마크다운 적용
- question_detail 템플릿에 마크다운을 적용시켜보자.
[ /webboard/src/main/resources/templates/question_detail.html ]
...
<!-- 질문 -->
<h2 class="border-bottom py-2" th:text="${question.subject}"></h2>
<div class="card my-3">
<div class="card-body">
<div class="card-text" th:utext="${@commonUtil.markdown(question.content)}"></div>
<div class="d-flex justify-content-end">
...
<!-- 답변 반복 시작 -->
<div class="card my-3" th:each="answer : ${question.answerList}">
<a th:id="|answer_${answer.id}|"></a>
<div class="card-body">
<div class="card-text" th:utext="${@commonUtil.markdown(answer.content)}"></div>
<div class="d-flex justify-content-end">
...🔻 이제 질문이나 답변을 마크다운 문법으로 작성해도 적용된다 !
▼ 검색 기능
SQL 쿼리
- 검색에 작성한 "문자열" 이 질문의 제목, 질문의 내용, 질문 작성자, 답변의 내용, 답변 작성자에 존재하는지 찾아보고 그 결과를 화면에 출력하도록 하면 된다.
select
distinct q.id,
q.author_id,
q.content,
q.create_date,
q.modify_date,
q.subject
from question q
left outer join site_user u1 on q.author_id=u1.id
left outer join answer a on q.id=a.question_id
left outer join site_user u2 on a.author_id=u2.id
where
q.subject like '%스프링%'
or q.content like '%스프링%'
or u1.username like '%스프링%'
or a.content like '%스프링%'
or u2.username like '%스프링%'🔻 "스프링" 이라는 문자열이 포함된 데이터를 question, answer, site_user 테이블을 대상으로 검색하는 쿼리이다.
➜ question 테이블을 기준으로 answer, site_user 테이블을 'outer join' 하여 "스프링" 이라는 문자열을 검색한다.
( Ourter join 대신 inner join을 사용하면 합집합이 아닌 교집합으로 검색되어 결과가 누락될 수 있다 ! )
➜ 총 3개의 테이블을 대상으로 outer join하여 검색하면 중복된 결과가 나올수 있기 때문에 select 문에 distinct를 주어 중복을 제거한다.
Specification 인터페이스
- JPA가 제공하는 Specification 인터페이스를 이용하면 위의 쿼리를 자바 코드로 작성할 수 있게 된다.
➜ Question 서비스에 search 메서드를 추가해보자 !
...
import com.gdsc.webboard.answer.Answer;
import jakarta.persistence.criteria.CriteriaBuilder;
import jakarta.persistence.criteria.CriteriaQuery;
import jakarta.persistence.criteria.Join;
import jakarta.persistence.criteria.JoinType;
import jakarta.persistence.criteria.Predicate;
import jakarta.persistence.criteria.Root;
import org.springframework.data.jpa.domain.Specification;
...
public class QuestionService {
private final QuestionRepository questionRepository;
private Specification<Question> search(String kw) {
return new Specification<>() {
private static final long serialVersionUID = 1L;
@Override
public Predicate toPredicate(Root<Question> q, CriteriaQuery<?> query, CriteriaBuilder cb) {
query.distinct(true); // 중복을 제거
Join<Question, SiteUser> u1 = q.join("author", JoinType.LEFT);
Join<Question, Answer> a = q.join("answerList", JoinType.LEFT);
Join<Answer, SiteUser> u2 = a.join("author", JoinType.LEFT);
return cb.or(cb.like(q.get("subject"), "%" + kw + "%"), // 제목
cb.like(q.get("content"), "%" + kw + "%"), // 내용
cb.like(u1.get("username"), "%" + kw + "%"), // 질문 작성자
cb.like(a.get("content"), "%" + kw + "%"), // 답변 내용
cb.like(u2.get("username"), "%" + kw + "%")); // 답변 작성자
}
};
}
...
}🔻 q
➜ Root, 즉 기준을 의미하는 Question 엔티티의 객체 (질문 제목과 내용을 검색하기 위해 필요)
🔻 u1
➜ Question 엔티티와 SiteUser 엔티티를 아우터 조인(JoinType.LEFT)하여 만든 SiteUser 엔티티의 객체.
➜ Question 엔티티와 SiteUser 엔티티는 author 속성으로 연결되어 있기 때문에 q.join("author")와 같이 조인해야 한다.
( 질문 작성자를 검색하기 위해 필요하다. )
🔻 a
➜ Question 엔티티와 Answer 엔티티를 outer join 하여 만든 Answer 엔티티의 객체.
➜ Question 엔티티와 Answer 엔티티는 answerList 속성으로 연결되어 있기 때문에 q.join("answerList")와 같이 조인해야 한다.
( 답변 내용을 검색하기 위해 필요하다. )
🔻 u2
➜ 바로 위에서 작성한 a 객체와 다시 한번 SiteUser 엔티티와 outer join 하여 만든 SiteUser 엔티티의 객체.
( 답변 작성자를 검색하기 위해서 필요하다. )
🔻 cb.or
➜ 검색어(kw)가 포함되어 있는지를 like로 검색하기 위해 제목, 내용, 질문 작성자, 답변 내용, 답변 작성자 각각에 cb.like를 사용하고 최종적으로 or로 검색되게 하였다.
Specification 사용 - Question 리포지터리
- Specification 객체(spec)와 Pageable 객체(pageable)를 입력 받아 Question 엔티티를 조회하는 findAll 메서드를 Question 리포지터리에 추가하자.
...
import java.util.List;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.domain.Specification;
import org.springframework.data.jpa.repository.JpaRepository;
public interface QuestionRepository extends JpaRepository<Question, Integer> {
...
Page<Question> findAll(Specification<Question> spec, Pageable pageable);
}
Specification 사용 - Question 서비스
- 검색어를 의미하는 매개변수 kw를 getList 메서드에 추가하고 해당 kw 값으로 생성한 Specification 객체를 findAll 메서드 호출시 전달하도록 한다.
...
public class QuestionService {
...
public Page<Question> getList(int page, String kw) {
List<Sort.Order> sorts = new ArrayList<>();
sorts.add(Sort.Order.desc("createDate"));
Pageable pageable = PageRequest.of(page, 10, Sort.by(sorts));
Specification<Question> spec = search(kw);
return this.questionRepository.findAll(spec, pageable);
}
...
}
Specification 사용 - Question 컨트롤러
- Question 서비스의 getList 메서드의 입력 항목이 변경되었으므로 Question 컨트롤러도 다음과 같이 수정해줘야 한다.
...
public class QuestionController {
...
@GetMapping("/list")
public String list(Model model, @RequestParam(value = "page", defaultValue = "0") int page,
@RequestParam(value = "kw", defaultValue = "") String kw) {
Page<Question> paging = this.questionService.getList(page, kw);
model.addAttribute("paging", paging);
model.addAttribute("kw", kw);
return "question_list";
}
...
}
검색 화면
- 검색어를 입력할 수 있는 텍스트창을 question_list 템플릿에 추가해주자.
[ /webboard/src/main/resources/templates/question_list.html ]
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
<div class="row my-3">
<div class="col-6">
<a th:href="@{/question/create}" class="btn btn-primary">질문 등록하기</a>
</div>
<div class="col-6">
<div class="input-group">
<input type="text" id="search_kw" class="form-control" th:value="${kw}">
<button class="btn btn-outline-secondary" type="button" id="btn_search">찾기</button>
</div>
</div>
</div>
<table class="table">
...
</table>
<!-- 페이징처리 시작 -->
(... 생략 ...)
<!-- 페이징처리 끝 -->
<a th:href="@{/question/create}" class="btn btn-primary">질문 등록하기</a>
</div>
</html>
- page와 kw를 동시에 GET으로 요청할 수 있는 searchForm을 question_list 템플릿에 추가해주자.
[ /webboard/src/main/resources/templates/question_list.html ]
...
<!-- 페이징처리 끝 -->
<form th:action="@{/question/list}" method="get" id="searchForm">
<input type="hidden" id="kw" name="kw" th:value="${kw}">
<input type="hidden" id="page" name="page" th:value="${paging.number}">
</form>
</div>
</html>🔻 여러 파라미터를 조합하여 게시물 목록을 조회할 때는 GET 방식을 사용하는 것이 좋다.
➜ POST 방식으로 검색과 페이징을 처리한다면 웹 브라우저에서 "새로고침" 또는 "뒤로가기" 를 했을 때 "만료된 페이지입니다." 라는 오류가 종종 발생하게 된다.
➜ POST 방식은 동일한 POST 요청이 발생할 경우 중복 요청을 방지하기 위해 "만료된 페이지입니다." 라는 오류를 발생시키기 때문이다 !
페이징
- 직접 URL을 링크하는 방식에서 값을 읽어 폼을 설정할 수 있도록 question_list 템플릿을 수정해주자.
[ /webboard/src/main/resources/templates/question_list.html ]
...
<!-- 페이징처리 시작 -->
<div th:if="${!paging.isEmpty()}">
<ul class="pagination justify-content-center">
<li class="page-item" th:classappend="${!paging.hasPrevious} ? 'disabled'">
<a class="page-link" href="javascript:void(0)" th:data-page="${paging.number-1}">
<span>이전</span>
</a>
</li>
<li th:each="page: ${#numbers.sequence(0, paging.totalPages-1)}"
th:if="${page >= paging.number-5 and page <= paging.number+5}"
th:classappend="${page == paging.number} ? 'active'" class="page-item">
<a th:text="${page}" class="page-link" href="javascript:void(0)" th:data-page="${page}"></a>
</li>
<li class="page-item" th:classappend="${!paging.hasNext} ? 'disabled'">
<a class="page-link" href="javascript:void(0)" th:data-page="${paging.number+1}">
<span>다음</span>
</a>
</li>
</ul>
</div>
<!-- 페이징처리 끝 -->
...🔻 모든 페이지 링크를 'href' 속성에 직접 입력하는 대신 'data-page' 속성으로 값을 읽을 수 있게 변경 !
- page, kw 파라미터를 동시에 요청할 수 있는 자바스크립트를 question_list 템플릿에 추가해주자.
...
<!-- 페이징처리 끝 -->
<form th:action="@{/question/list}" method="get" id="searchForm">
<input type="hidden" id="kw" name="kw" th:value="${kw}">
<input type="hidden" id="page" name="page" th:value="${paging.number}">
</form>
</div>
<script layout:fragment="script" type='text/javascript'>
const page_elements = document.getElementsByClassName("page-link");
Array.from(page_elements).forEach(function(element) {
element.addEventListener('click', function() {
document.getElementById('page').value = this.dataset.page;
document.getElementById('searchForm').submit();
});
});
const btn_search = document.getElementById("btn_search");
btn_search.addEventListener('click', function() {
document.getElementById('kw').value = document.getElementById('search_kw').value;
document.getElementById('page').value = 0; // 검색버튼을 클릭할 경우 0페이지부터 조회한다.
document.getElementById('searchForm').submit();
});
</script>
</html>
직접 쿼리 작성 - @Query
- Specifcation 대신 직접 쿼리를 작성하여 수행하는 방법이 있다.
➜ Question 리포지터리에 '@Query' 애너테이션이 적용된 findAllByKeyword 메서드를 추가하자 !
...
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;
public interface QuestionRepository extends JpaRepository<Question, Integer> {
...
@Query("select "
+ "distinct q "
+ "from Question q "
+ "left outer join SiteUser u1 on q.author=u1 "
+ "left outer join Answer a on a.question=q "
+ "left outer join SiteUser u2 on a.author=u2 "
+ "where "
+ " q.subject like %:kw% "
+ " or q.content like %:kw% "
+ " or u1.username like %:kw% "
+ " or a.content like %:kw% "
+ " or u2.username like %:kw% ")
Page<Question> findAllByKeyword(@Param("kw") String kw, Pageable pageable);
}🔻 @Quary 애너테이션을 적용한 메서드를 작성할 떄엔 테이블이 아닌 엔티티를 기준으로 작성해야 한다.
➜ site_user와 같은 테이블명이 아닌 SiteUser처럼 엔티티명을 사용한 것처럼 !
- 이렇게 작성한 findAllByKeyword 메서드를 사용하기 위해 Question 서비스를 수정해주자.
...
public class QuestionService {
...
public Page<Question> getList(int page, String kw) {
List<Sort.Order> sorts = new ArrayList<>();
sorts.add(Sort.Order.desc("createDate"));
Pageable pageable = PageRequest.of(page, 10, Sort.by(sorts));
return this.questionRepository.findAllByKeyword(kw, pageable);
}
...
}🔻 Specification을 사용할 때와 동일하게 작동한다.
