지금까지 만든 SBB로 질문 목록을 조회하고 질문을 등록하고, 다시 내용을 보고 답변을 달고 이렇게 조작을 하다 보면 아마도 불편함을 느끼게 될것이다. 그것은 바로 메인페이지(Home)로 돌아갈 수 있는 기능이 없기 때문이다. 이번에는 이러한 불편을 해소할 수 있는 내비게이션바를 만들어 보자. 내비게이션바는 모든 화면 위쪽에 고정되어 있는 부트스트랩 컴포넌트이다.
<!doctype html>
<html lang="ko">
(... 생략 ...)
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 End -->
<!-- Bootstrap JS -->
<script th:src="@{/bootstrap.min.js}"></script>
</body>
</html>
이렇게 수정하면 메뉴 버튼 클릭시 숨겨진 링크가 다음처럼 표시되는 것을 확인할 수 있을 것이다.
네비게이션바 분리하기
이전 장에서 오류메시지를 표시하는 공통 템플릿을 작성하고 질문 등록과 질문 상세 템플릿에 삽입하였다. 네비게이션바도 공통 템플릿으로 다음과 같이 분리해 보자.
먼저 다음과 같이 layout.html에 포함시킬 navbar.html 템플릿을 작성하자.
타임리프의th:replace속성을 사용하면 공통 템플릿을 템플릿 내에 삽입할수 있다.<div th:replace="~{form_errors :: formErrorsFragment}"></div>의 의미는 div 엘리먼트를 form_errors.html 파일의th:fragment속성명이formErrorsFragment인 엘리먼트로 교체하라는 의미이다.
package com.mysite.sbb.question;
(... 생략 ...)
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
(... 생략 ...)
public class QuestionController {
(... 생략 ...)
@GetMapping("/create")
public String questionCreate() {
return "question_form";
}
@PostMapping("/create")
public String questionCreate(@RequestParam String subject, @RequestParam String content) {
// TODO 질문을 저장한다.
return "redirect:/question/list"; // 질문 저장후 질문목록으로 이동
}
}
POST 방식으로 요청한/question/createURL을 처리하기 위해 @PostMapping 애너테이션을 지정한 questionCreate 메서드를 추가했다. 메서드명은 @GetMapping시 사용했던 questionCreate 메서드명과 동일하게 사용할 수 있다. (단, 매개변수의 형태가 다른 경우에 가능하다. - 메서드 오버로딩)
questonCreate 메서드는 화면에서 입력한 제목(subject)과 내용(content)을 매개변수로 받는다. 이 때 질문 등록 템플릿에서 필드 항목으로 사용했던 subject, content의 이름과 동일하게 해야 함에 주의하자.
이제 입력으로 받은 subject, content를 사용하여 질문을 저장해야 한다. 일단 질문 저장은 잠시 뒤로 미루고(TODO 주석만 작성했다.) 질문이 저장되면 질문 목록 페이지로 이동하도록 했다.
서비스
질문을 저장하려면 서비스에 해당 기능을 추가해야 한다. QuestionService를 다음과 같이 수정하자.
(... 생략 ...)
public class QuestionController {
(... 생략 ...)
@PostMapping("/create")
public String questionCreate(@RequestParam String subject, @RequestParam String content) {
this.questionService.create(subject, content);
return "redirect:/question/list";
}
}
TODO 주석문 대신 QuestionService로 질문 데이터를 저장하는 코드를 작성하였다. 이렇게 수정하고 질문을 작성하고 저장하면 잘 동작하는 것을 확인할 수 있을 것이다.
폼(form)
위에서 질문을 등록하는 기능을 구현했다. 하지만 질문 등록시 간과한 것이 있다. 그것은 바로 질문이나 내용을 등록할 때 비어 있는 값으로 등록이 가능하다는 점이다. 빈 값으로 등록이 불가능하게 하려면 여러 방법이 있지만 여기서는 폼을 사용하여 입력값을 체크하는 방법을 사용해 보자.
Spring Boot Validation
화면에서 전달받은 입력 값을 검증하려면 Spring Boot Validation 라이브러리가 필요하다. 다음과 같이 build.gradle 파일을 수정하자.
subject 속성에는 @NotEmpty와 @Size 애너테이션이 적용되었다. @NotEmpty는 해당 값이 Null 또는 빈 문자열("")을 허용하지 않음을 의미한다. 그리고 여기에 사용된 message 속성은 검증이 실패할 경우 화면에 표시할 오류 메시지이다.@Size(max=200)은 최대 길이가 200 바이트를 넘으면 안된다는 의미이다. 이와 같이 설정하면 길이가 200 byte 보다 큰 제목이 입력되면 오류가 발생할 것이다. content 속성 역시 @NotEmpty로 빈 값을 허용하지 않도록 했다.
컨트롤러
그리고 위에서 작성한 QuestionForm을 컨트롤러에서 사용할 수 있도록 다음과 같이 컨트롤러를 수정하자.
(... 생략 ...)
import jakarta.validation.Valid;
import org.springframework.validation.BindingResult;
(... 생략 ...)
public class QuestionController {
(... 생략 ...)
@PostMapping("/create")
public String questionCreate(@Valid QuestionForm questionForm, BindingResult bindingResult) {
if (bindingResult.hasErrors()) {
return "question_form";
}
this.questionService.create(questionForm.getSubject(), questionForm.getContent());
return "redirect:/question/list";
}
}
questionCreate 메서드의 매개변수를 subject, content 대신 QuestionForm 객체로 변경했다. subject, content 항목을 지닌 폼이 전송되면 QuestionForm의 subject, content 속성이 자동으로 바인딩 된다. 이것은 스프링 프레임워크의 바인딩 기능이다.
그리고 QuestionForm 매개변수 앞에 @Valid 애너테이션을 적용했다. @Valid 애너테이션을 적용하면 QuestionForm의 @NotEmpty, @Size 등으로 설정한 검증 기능이 동작한다. 그리고 이어지는 BindingResult 매개변수는 @Valid 애너테이션으로 인해 검증이 수행된 결과를 의미하는 객체이다.
BindingResult 매개변수는 항상 @Valid 매개변수 바로 뒤에 위치해야 한다. 만약 2개의 매개변수의 위치가 정확하지 않다면 @Valid만 적용이 되어 입력값 검증 실패 시 400 오류가 발생한다.
따라서 questionCreate 메서드는bindResult.hasErrors()를 호출하여 오류가 있는 경우에는 다시 폼을 작성하는 화면을 렌더링하게 했고 오류가 없을 경우에만 질문 등록이 진행되도록 했다.
여기까지 수정하고 질문 등록 화면에서 아무런 값도 입력하지 말고 "저장하기" 버튼을 눌러보자. 아무런 입력값도 입력하지 않았기 때문에 QuestionForm의 @NotEmpty에 의해 Validation이 실패하여 다시 질문 등록 화면에 머물러 있을 것이다. 하지만 QuestionForm에 설정한 "제목은 필수항목입니다." 와 같은 오류 메시지는 보이지 않는다.
오류메시지가 보이지 않는다면 어떤 항목에서 검증이 실패했는지 알 수가 없다. 어떻게 해야 할까?
#fields.hasAnyErrors가 true인 경우는 QuestionForm 검증이 실패한 경우이다. QuestionForm에서 검증에 실패한 오류 메시지는#fields.allErrors()로 구할 수 있다. 부트스트랩의alert alert-danger클래스를 사용하여 오류는 붉은 색으로 표시되도록 했다. 그리고 이렇게 오류를 표시하기 위해서는 타임리프의th:object속성이 반드시 필요하다.th:object를 사용하여 폼의 속성들이 QuestionForm의 속성들로 구성된다는 점을 타임리프 엔진에 알려줘야 하기 때문이다.
잠깐!여기까지 수정하고 테스트를 진행하면 질문 등록 화면 진입시에 오류가 발생할 것이다. 이어지는 수정 과정을 완료한 후에 테스트를 진행하도록 하자.
그리고 템플릿을 위와 같이 수정할 경우 QuestionController의 GetMapping으로 매핑한 메서드도 다음과 같이 변경해야 한다. 왜냐하면 question_form.html 템플릿은 "질문 등록하기" 버튼을 통해 GET 방식으로 요청되더라도th:object에 의해 QuestionForm 객체가 필요하기 때문이다.
(... 생략 ...)
public class QuestionController {
(... 생략 ...)
@GetMapping("/create")
public String questionCreate(QuestionForm questionForm) {
return "question_form";
}
(... 생략 ...)
}
GetMapping으로 매핑한 questionCreate 메서드에 매개변수로 QuestionForm 객체를 추가했다. 이렇게 하면 이제 GET 방식에서도 question_form 템플릿에 QuestionForm 객체가 전달될 것이다.
QuestionForm과 같이 매개변수로 바인딩한 객체는 Model 객체로 전달하지 않아도 템플릿에서 사용이 가능하다.
이렇게 수정하고 제목 또는 내용에 값을 채우지 않은 상태로 질문 등록을 진행하면 다음과 같은 오류가 화면에 표시될 것이다.
검증에 실패한 오류 메시지가 표시되는 것을 확인할 수 있다.
오류 발생시 입력한 내용 유지하기
하지만 테스트를 진행하다보니 또 다른 문제를 발견했다. 그것은 이미 입력한 "제목"이나 "내용"이 사라진다는 점이다. 즉, 제목에 값을 채우고 내용을 비워둔 채로 "저장하기" 버튼을 누르면 오류 메시지가 나타남과 동시에 이미 입력한 제목의 내용도 사라진다는 점이다. 입력한 제목은 남아 있어야 하지 않겠는가?
이러한 문제를 해결하려면 이미 입력한 값이 유지되도록 다음과 같이 템플릿을 수정해야 한다.
name="subject",name="content"와 같이 사용하던 부분을 위와 같이th:field속성을 사용하도록 변경하였다. 이렇게 하면 해당 태그의 id, name, value 속성이 모두 자동으로 생성되고 타임리프가 value 속성에 기존 값을 채워 넣어 오류가 발생하더라도 기존에 입력한 값이 유지된다.
이제 위와 같이 수정하고 다시 질문 등록을 진행해 보자. 이전에 입력했던 값이 유지되는 것을 확인할 수 있을 것이다.
제목에 아무 값을 채우고 내용에는 값을 비워둔채로 "저장하기" 버튼을 누르면 위와 같이 제목에 입력한 내용이 사라지지 않고 남아있다.
답변 등록
질문 등록에 폼을 적용한 것처럼 답변 등록을 할 때에도 폼을 적용해 보자. 질문 등록과 동일한 방법이므로 조금 빠르게 적용해 보자. 먼저 답변을 등록할 때 사용할 AnswerForm을 다음과 같이 작성하자.
AnswerForm을 사용하도록 컨트롤러를 변경했다. QuestionForm을 사용했던 방법과 마찬가지로 @Valid와 BindingResult를 사용하여 검증을 진행한다. 검증에 실패할 경우에는 다시 답변을 등록할 수 있는 question_detail 템플릿을 렌더링하게 했다. 이때 question_detail 템플릿은 Question 객체가 필요하므로 model 객체에 Question 객체를 저장한 후에 question_detail 템플릿을 렌더링해야 한다.
답변 등록 폼의 속성이 AnswerForm을 사용하기 때문에th:object속성을 추가했다. 그리고 검증이 실패할 경우 오류메시지를 출력하기 위해#fields.hasAnyErrors()와#fields.allErrors()를 사용하여 오류를 표시했다. 그리고 content 항목도th:field속성을 사용하도록 변경했다.
그리고 question_detail 템플릿이 AnswerForm을 사용하기 때문에 QuestionController의 detail 메서드도 다음과 같이 수정해야 한다.
앞에서 작성한 질문 목록, 질문 상세 템플릿을 표준 HTML 구조가 되도록 수정해 보자. 그런데 템플릿 파일들을 모두 표준 HTML 구조로 변경하면 body 엘리먼트 바깥 부분(head 엘리먼트 등)은 모두 같은 내용으로 중복된다. 그러면 CSS 파일 이름이 변경되거나 새로운 CSS 파일이 추가될 때마다 모든 템플릿 파일을 일일이 수정해야 한다.
타임리프는 이런 중복의 불편함을 해소하기 위해 템플릿 상속 기능을 제공한다. 템플릿 상속은 기본 틀이 되는 템플릿을 먼저 작성하고 다른 템플릿에서 그 템플릿을 상속해 사용하는 방법이다.
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<!-- sbb CSS -->
<link rel="stylesheet" type="text/css" th:href="@{/style.css}">
<title>Hello, sbb!</title>
</head>
<body>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>
layout.html템플릿은 모든 템플릿이 상속해야 하는 템플릿으로 표준 HTML 문서의 기본 틀이된다. body 엘리먼트 안의<th:block layout:fragment="content"></th:block>부분이 바로layout.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역이 된다. 즉,layout.html템플릿을 상속하면<th:block layout:fragment="content"></th:block>영역에 해당되는 부분만 작성해도 표준 HTML 문서가 되는 것이다.
부트스트랩 스타일 링크는 삭제했다. 왜냐하면 부모 템플릿인 layout.html 템플릿에서 이미 부트스트랩 스타일을 링크하기 때문이다.
layout.html템플릿을 상속하기 위해<html layout:decorate="~{layout}">처럼 사용했다. 타임리프의layout:decorate속성은 템플릿의 레이아웃(부모 템플릿)으로 사용할 템플릿을 설정한다. 속성의 값인~{layout}은 layout.html 파일을 의미한다.
부모 템플릿인 layout.html 에는 다음과 같은 내용이 있었다.
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 End -->
웹 디자이너 없이 혼자서 웹 프로그램을 작성해 보았다면 화면 디자인 작업에 얼마나 많은 시간과 고민이 필요한지 알고 있을 것이다. 이번에 소개하는 부트스트랩(Bootstrap)은 디자이너의 도움 없이도 개발자 혼자서 상당히 괜찮은 수준의 웹 페이지를 만들수 있게 도와주는 프레임워크이다. 부트스트랩은 트위터(Twitter)를 개발하면서 만들어졌고 현재 지속적으로 관리되고 있는 오픈소스 프로젝트이다.
테이블 항목으로 "번호"를 추가했다. 번호는loop.count를 사용하여 표시했다. 그리고 날짜를 보기 좋게 출력하기 위해 타임리프의#temporals.format유틸리티를 사용했다.#temporals.format은 다음과 같이 사용한다.
#temporals.format(날짜객체, 날짜포맷)- 날짜객체를 날짜포맷에 맞게 변환한다.
그리고 가장 윗줄에bootstrap.min.css스타일시트를 사용할수 있도록 링크를 추가했다. 그리고 위에서 사용된class="container my-3",class="table",class="table-dark등은 부트스트랩 스타일시트에 정의되어 있는 클래스들이다. 부트스트랩에 대한 자세한 내용은 다음 URL을 참조하자.
제목을<td>엘리먼트의 텍스트로 출력하던 것에서 링크로 변경했다. 타임리프에서 링크의 주소는th:href속성을 사용한다. 타임리프에서th:href처럼 URL 주소를 나타낼때는 반드시@{문자와}문자 사이에 입력해야 한다. 그리고 URL 주소는 문자열/question/detail/과${question.id}값이 조합되어/question/detail/${question.id}로 만들어졌다. 이때 좌우에|문자없이 다음과 같이 사용하면 오류가 발생한다.
이제 질문 목록 페이지에 접속하여 링크를 클릭해 보자. 아마도 다음과 같은 오류가 발생할 것이다.
http://localhost:8080/question/detail/2URL 요청에 대한 매핑이 없기 때문에 404(Page not found) 오류가 발생한다. 오류를 해결하기 위해 질문 상세 페이지에 대한 URL 매핑을 QuestionController에 다음과 같이 추가하자.
(... 생략 ...)
import org.springframework.web.bind.annotation.PathVariable;
(... 생략 ...)
public class QuestionController {
(... 생략 ...)
@GetMapping(value = "/question/detail/{id}")
public String detail(Model model, @PathVariable("id") Integer id) {
return "question_detail";
}
}
요청 URLhttp://localhost:8080/question/detail/2의 숫자 2처럼 변하는 id 값을 얻을 때에는 위와 같이 @PathVariable 애너테이션을 사용해야 한다. 이 때@GetMapping(value = "/question/detail/{id}")에서 사용한 id와@PathVariable("id")의 매개변수 이름이 동일해야 한다.
위와 같이 수정하고 다시 URL을 호출하면 이번에는 404 대신 500 오류가 발생할 것이다. 왜냐하면 응답으로 리턴한 question_detail 템플릿이 없기 때문이다. 다음과 같이 question_detail.html 파일을 신규로 작성하자.
(... 생략 ...)
import java.util.Optional;
import com.mysite.sbb.DataNotFoundException;
(... 생략 ...)
public class QuestionService {
(... 생략 ...)
public Question getQuestion(Integer id) {
Optional<Question> question = this.questionRepository.findById(id);
if (question.isPresent()) {
return question.get();
} else {
throw new DataNotFoundException("question not found");
}
}
}
id 값으로 Question 데이터를 조회하는 getQuestion 메서드를 추가했다. 리포지터리로 얻은 Question 객체는 Optional 객체이기 때문에 위와 같이 isPresent 메서드로 해당 데이터가 존재하는지 검사하는 로직이 필요하다. 만약 id 값에 해당하는 Question 데이터가 없을 경우에는 DataNotFoundException을 발생시키도록 했다. DataNotFoundException 클래스는 아직 존재하지 않기 때문에 컴파일 오류가 발생할 것이다. DataNotFoundException 클래스를 다음과 같이 작성하자.
Copy(... 생략 ...)
import org.springframework.web.bind.annotation.RequestMapping;
(... 생략 ...)
@RequestMapping("/question")
@RequiredArgsConstructor
@Controller
public class QuestionController {
private final QuestionService questionService;
@GetMapping("/list")
public String list(Model model) {
(... 생략 ...)
}
@GetMapping(value = "/detail/{id}")
public String detail(Model model, @PathVariable("id") Integer id) {
(... 생략 ...)
}
}
list 메서드의 URL 매핑은/list이지만 클래스에/question이라는 URL 매핑이 있기 때문에/question+/list가 되어 최종적인 URL 매핑은/question/list가 된다. 위와 같이 수정하면 기존과 완전히 동일한 기준으로 URL 매핑이 이루어 진다. 다만, 앞으로 QuestionController에서 사용하는 URL 매핑은 항상/question으로 시작해야 하는 규칙이 생긴 것이다.
컨트롤러의 클래스 단위의 URL 매핑은 필수사항이 아니다. 컨트롤러의 성격에 맞게 사용하면 된다.
이제 질문 목록의 제목 링크를 누르면 질문 상세 화면이 보이게 하는 작업을 수행할 것이다.
하지만 기능을 추가하기 전에 잠시 생각할 것이 있다. QuestionController에서 QuestionRepository를 직접 사용하여 질문 목록 데이터를 조회했다. 하지만 대부분의 규모있는 스프링부트 프로젝트는 컨트롤러에서 리포지터리를 직접 호출하지 않고 중간에 서비스(Service)를 두어 데이터를 처리한다. 서비스는 스프링에서 데이터 처리를 위해 작성하는 클래스이다.
서비스가 필요한 이유
서비스가 필요한 이유는 무엇일까?
모듈화
예를들어 어떤 컨트롤러가 여러개의 리포지터리를 사용하여 데이터를 조회한후 가공하여 리턴한다고 가정해 보자. 이러한 기능을 서비스로 만들어 두면 컨트롤러에서는 해당 서비스를 호출하여 사용하면 된다. 하지만 서비스로 만들지 않고 컨트롤러에서 구현하려 한다면 해당 기능을 필요로 하는 모든 컨트롤러가 동일한 기능을 중복으로 구현해야 한다. 이러한 이유로 서비스는 모듈화를 위해서 필요하다.
보안
컨트롤러는 리포지터리 없이 서비스를 통해서만 데이터베이스에 접근하도록 구현하는 것이 보안상 안전하다. 이렇게 하면 어떤 해커가 해킹을 통해 컨트롤러를 제어할 수 있게 되더라도 리포지터리에 직접 접근할 수는 없게 된다.
엔티티 객체와 DTO 객체의 변환
Question, Answer 클래스는 엔티티(Entity) 클래스이다. 엔티티 클래스는 데이터베이스와 직접 맞닿아 있는 클래스이기 때문에 컨트롤러나 타임리프 같은 템플릿 엔진에 전달하여 사용하는 것은 좋지 않다. 컨트롤러나 타임리프에서 사용하는 데이터 객체는 속성을 변경하여 비즈니스적인 요구를 처리해야 하는 경우가 많은데 엔티티를 직접 사용하여 속성을 변경한다면 테이블 컬럼이 변경되어 엉망이 될수도 있기 때문이다.
이러한 이유로 Question, Answer 같은 엔티티 클래스는 컨트롤러에서 사용할수 없게끔 설계하는 것이 좋다. 그러기 위해서는 Question, Answer 대신 사용할 DTO(Data Transfer Object) 클래스가 필요하다. 그리고 Question, Answer 등의 엔티티 객체를 DTO 객체로 변환하는 작업도 필요하다. 그러면 엔티티 객체를 DTO 객체로 변환하는 일은 어디서 처리해야 할까? 그렇다. 바로 서비스이다. 서비스는 컨트롤러와 리포지터리의 중간자적인 입장에서 엔티티 객체와 DTO 객체를 서로 변환하여 양방향에 전달하는 역할을 한다.
이 책은 간결한 설명을 위해 별도의 DTO를 만들지 않고 엔티티 객체를 컨트롤러와 타임리프에서 그대로 사용할 것이다. 하지만 실제 업무 프로그램을 작성할 때는 엔티티 클래스를 대신할 DTO 클래스를 만들어 사용하기를 권한다.
다음과 같이 Questionservice를 작성한다.
스프링의 서비스로 만들기 위해서는 위와 같이 클래스명 위에 @Service 애너테이션을 붙이면 된다. @Controller, @Entity 등과 마찬가지로 스프링부트는 @Service 애너테이션이 붙은 클래스는 서비스로 인식한다.
questionRepository 객체는 생성자 방식으로 DI 규칙에 의해 주입된다.
그리고 질문 목록을 조회하여 리턴하는 getList 메서드를 추가했다. 이전 컨트롤러에서 리포지터리를 사용했던 부분을 그대로 옮긴 것이다.
다음으로는, QuestionController를 다음처럼 수정하자.
questionService 객체는 생성자 방식으로 DI 규칙에 의해 주입된다.
브라우저로http://localhost:8080/question/list페이지에 접속하면 이전과 동일한 화면을 볼수 있다. 앞으로 작성할 컨트롤러들도 리포지터리를 직접 사용하지 않고Controller -> Service -> Repository구조로 데이터를 처리할 것이다.
