2023.06.27 Spring

스프링 인프런 김영한

35. 검증 요구사항

상품 관리 시스템에 새로운 요구사항이 추가되었다.
요구사항
-> 검증 로직 추가해달라

1.타입 검증
가격, 수량에 문자가 들어가면 검증 오류 처리

2.필드 검증
상품명: 필수, 공백X
가격: 1000원 이상, 1백만원 이하
수량: 최대 9999

3.특정 필드의 범위를 넘어서는 검증
가격 * 수량의 합은 10,000원 이상

지금까지 만든 웹 애플리케이션은 폼 입력시 숫자를 문자로 작성하거나해서 검증 오류가 발생하면
오류화면으로 바로 이동한다.
이렇게 되면 사용자는 처음부터 해당 폼으로 다시 이동해서 입력을 해야 한다.
아마도 이런 서비스라면 사용자는 금방 떠나버릴 것이다.

웹 서비스는 폼 입력시 오류가 발생하면, 고객이 입력한 데이터를 유지한 상태로 어떤 오류가 발생했는지 친절하게 알려주어야 한다.
컨트롤러의 중요한 역할중 하나는 HTTP 요청이 정상인지 검증하는 것이다.

그리고 정상 로직보다 이런 검증 로직을 잘 개발하는 것이 어쩌면 더 어려울 수 있다.

오류 날때마다 검증 처리를 해줘야하기 때문에 검증 처리하는 것이 더 중요하다.

참고: 클라이언트 검증, 서버 검증
-클라이언트 검증은 조작할 수 있으므로 보안에 취약하다.
-서버만으로 검증하면 즉각적인 고객 사용성이 부족해진다.
-둘을 적절히 섞어서 사용하되 최종적으로 서버 검증은 필수이다.
-API 방식을 사용하면 API 스펙을 잘 정의해서 검증 오류를 API 응답 결과에 잘 남겨주어야 한다.
먼저 검증을 직접 구현해보고 뒤에서 스프링과 타임리프가 제공하는 검증 기능을 활용해보는게 좋다.

36. 프로젝트 설정 V1

이전 프로젝트에 이어서 검증(Validation) 기능을 학습해보자.
이전 프로젝트를 일부 수정해서 validation-start 라는 프로젝트에 넣어두었다.

프로젝트 설정 순서
1.validation-start 의 폴더 이름을 validation 로 변경
2.프로젝트 임포트
File Open 해당 프로젝트의 build.gradle 을 선택하자.
그 다음에 선택창이 뜨는데, Open as Project 를 선택하자.
3.ItemServiceApplication.main() 을 실행해서 프로젝트가 정상 수행되는지 확인하자.

37. 검증 직접 처리 - 소개

상품 저장 성공 시나리오
사용자가 상품 등록 폼에서 정상 범위의 데이터를 입력하면
서버에서는 검증 로직이 통과하고, 상품을 저장하고, 상품 상세 화면으로 redirect한다

상품 저장 검증 실패 시나리오
고객이 상품 등록 폼에서 상품명을 입력하지 않거나, 가격, 수량 등이 너무 작거나 커서
검증 범위를 넘어서면, 서버 검증 로직이 실패해야 한다.
이렇게 검증에 실패한 경우 고객에게 다시 상품 등록 폼을 보여주고,
어떤 값을 잘못 입력했는지 친절하게 알려주어야 한다

model에 검증오류 코드 포함해서 보내준다.

38. 검증 직접 처리 - 개발

38.1 ValidationItemControllerV1 - addItem() 수정

model에 검증실패하면 오류결과를 포함해서 보내줘야한다.

스프링의 StringUtils를 사용한다.
StringUtils.hasText이름이 잇냐를 물어본다. 없으면 없다고 itemName에 오류로 키를 보내준다.

이와 비슷하게 값을 받아서 처리해준다.

실패하면 오류사항을 전달해준다.
성공하면 서비스의 save를 실행시킨다.

-> 실제로 만들때는 서비스단에서 비즈니스로직으로서 처리하자.

@PostMapping("/add")
public String addItem(@ModelAttribute Item item,
                      RedirectAttributes redirectAttributes,
                      Model model) {
    //검증 오류 결과를 보관
    Map<String, String> errors = new HashMap<>();
    //검증 로직
    if (!StringUtils.hasText(item.getItemName())) {
        errors.put("itemName", "상품 이름은 필수입니다.");
    }

    if (item.getPrice() == null || item.getPrice() < 1000 || item.getPrice() > 1000000) {
        errors.put("price", "가격은 1,000 ~ 1,000,000 까지 허용합니다.");
    }

    if (item.getQuantity() == null || item.getQuantity() >= 9999) {
        errors.put("quantity", "수량은 최대 9,999 까지 허용합니다.");
    }

    //특정 필드가 아닌 복합 룰 검증
    if (item.getPrice() != null && item.getQuantity() != null) {
        int resultPrice = item.getPrice() * item.getQuantity();
        if (resultPrice < 10000) {
            errors.put("globalError", "가격 * 수량의 합은 10,000원 이상이어야 합니다. 현재 값 = " + resultPrice);
        }
    }

    //검증에 실패하면 다시 입력 폼으로
    if (!errors.isEmpty()) {
        model.addAttribute("errors", errors);
        return "validation/v1/addForm";
    }

    //성공 로직
    Item savedItem = itemRepository.save(item);
    redirectAttributes.addAttribute("itemId", savedItem.getId());
    redirectAttributes.addAttribute("status", true);
    return "redirect:/validation/v1/items/{itemId}";
}

log를 찍어보면 {itemName=상품 이름은 필수입니다., quantity=수량은 최대 9,999 까지 허용합니다., price=가격은 1,000 ~ 1,000,000 까지 허용합니다.}
등등 오류가 뜨는 것을 알 수 있다.

검증 오류 보관
Map<String, String> errors = new HashMap<>();
만약 검증시 오류가 발생하면 어떤 검증에서 오류가 발생했는지 정보를 담아둔다.

검증 로직

if (!StringUtils.hasText(item.getItemName())) {
    errors.put("itemName", "상품 이름은 필수입니다.");
}

import org.springframework.util.StringUtils; 추가 필요하다.

검증시 오류가 발생하면 errors 에 담아둔다.
이때 어떤 필드에서 오류가 발생했는지 구분하기 위해 오류가 발생한 필드명을 key 로 사용한다.
이후 뷰에서 이 데이터를 사용해서 고객에게 친절한 오류 메시지를 출력할 수 있다

//특정 필드가 아닌 복합 룰 검증
if (item.getPrice() != null && item.getQuantity() != null) {
    int resultPrice = item.getPrice() * item.getQuantity();
    if (resultPrice < 10000) {
        errors.put("globalError", "가격 * 수량의 합은 10,000원 이상이어야 합니다. 현재 값 = " + resultPrice);
    }
}

특정 필드를 넘어서는 오류를 처리해야 할 수도 있다. 이때는 필드 이름을 넣을 수 없으므로 globalError 라는 key 를 사용한다.

그런데 오류가 뜨면 model객체에 값이 남아잇는데 왜그러냐면
맞는 것은 model객체에 알아서 담겨잇기 때문에 꺼내서 다시 노출되는 것이다.
검증이실패햇을때 이런값을 사용하면 그대로 값을 다시 사용할 수 있게 되는 것이다.

핵심은 데이터를 그대로 입력하고 오류난 곳은 메시지를 보여주는게 중요하다.

38.2 view수정

errors?.containsKey
errors가 globalError이라는 키를 가지고 있다면 map에서 값을 꺼내서 보여주게 된다.

또한 이걸 활용해서 null이라면 field-error클래스를 추가해주는 등을 짜준다.

th:class="${errors?.containsKey('itemName')} ? 'form-control field-error' : 'form-control'"

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link th:href="@{/css/bootstrap.min.css}"
          href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        }

        .field-error {
            border-color: #dc3545;
            color: #dc3545;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="py-5 text-center">
        <h2 th:text="#{page.addItem}">상품 등록</h2>
    </div>
    <form action="item.html" th:action th:object="${item}" method="post">
        <div th:if="${errors?.containsKey('globalError')}">
            <p class="field-error" th:text="${errors['globalError']}">전체 오류 메시지</p>
        </div>
        <div>
            <label for="itemName" th:text="#{label.item.itemName}">상품명</label>
            <input type="text" id="itemName" th:field="*{itemName}"
                   th:class="${errors?.containsKey('itemName')} ? 'form-control field-error' : 'form-control'"
                   class="form-control" placeholder="이름을 입력하세요">
            <div class="field-error" th:if="${errors?.containsKey('itemName')}"
                 th:text="${errors['itemName']}">
                상품명 오류
            </div>
        </div>
        <div>
            <label for="price" th:text="#{label.item.price}">가격</label>
            <input type="text" id="price" th:field="*{price}"
                   th:class="${errors?.containsKey('price')} ? 'form-control field-error' : 'form-control'"
                   class="form-control" placeholder="가격을 입력하세요">
            <div class="field-error" th:if="${errors?.containsKey('price')}"
                 th:text="${errors['price']}">
                가격 오류
            </div>
        </div>
        <div>
            <label for="quantity" th:text="#{label.item.quantity}">수량</label>
            <input type="text" id="quantity" th:field="*{quantity}"
                   th:class="${errors?.containsKey('quantity')} ? 'form-control field-error' : 'form-control'"
                   class="form-control" placeholder="수량을 입력하세요">
            <div class="field-error" th:if="${errors?.containsKey('quantity')}"
                 th:text="${errors['quantity']}">
                수량 오류
            </div>
        </div>
        <hr class="my-4">
        <div class="row">
            <div class="col">
                <button class="w-100 btn btn-primary btn-lg" type="submit"
                        th:text="#{button.save}">저장
                </button>
            </div>
            <div class="col">
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='items.html'"
                        th:onclick="|location.href='@{/validation/v1/items}'|"
                        type="button" th:text="#{button.cancel}">취소
                </button>
            </div>
        </div>
    </form>
</div> <!-- /container -->
</body>
</html>

오류 메시지는 errors 에 내용이 있을 때만 출력하면 된다.
타임리프의 th:if 를 사용하면 조건에 만족할 때만 해당 HTML 태그를 출력할 수 있다.

참고 Safe Navigation Operator
만약 여기에서 errors 가 null 이라면 어떻게 될까?
생각해보면 등록폼에 진입한 시점에는 errors 가 없다.
따라서 errors.containsKey() 를 호출하는 순간 NullPointerException 이 발생한다.

errors?. 은 errors 가 null 일때 NullPointerException 이 발생하는 대신, null 을 반환하는 문법이다.
th:if 에서 null 은 실패로 처리되므로 오류 메시지가 출력되지 않는다.
이것은 스프링의 SpringEL이 제공하는 문법이다. 자세한 내용은 다음을 참고하자.

https://docs.spring.io/spring-framework/docs/current/reference/html/core.html#expressions-operator-safe-navigation

필드 오류 처리
타임리프의 classappend field-error 라는 클래스 정보를 더할수있다.
만약 값이 없으면 _ (No-Operation)을 사용해서 아무것도 하지 않는다.

<input type="text" th:classappend="${errors?.containsKey('itemName')} ? 'fielderror' : _" class="form-control">

실행
상품 등록을 실행하고 검증이 잘 동작 하는지 확인해보자.
http://localhost:8080/validation/v1/items/add
상품 수정의 검증은 더 효율적인 검증 처리 방법을 학습한 다음에 진행한다.

정리
만약 검증 오류가 발생하면 입력 폼을 다시 보여준다.
검증 오류들을 고객에게 친절하게 안내해서 다시 입력할 수 있게 한다.
검증 오류가 발생해도 고객이 입력한 데이터가 유지된다.

남은 문제점
뷰 템플릿에서 중복 처리가 많다. 뭔가 비슷하다.
타입 오류 처리가 안된다.
Item 의 price , quantity 같은 숫자 필드는 타입이 Integer 이므로 문자 타입으로 설정하는 것이 불가능하다.
숫자 타입에 문자가 들어오면 오류가 발생한다.

그런데 이러한 오류는 스프링MVC에서 컨트롤러에 진입하기도 전에 예외가 발생하기 때문에, 컨트롤러가 호출되지도 않고, 400 예외가 발생하면서 오류 페이지를 띄워준다.

Item 의 price 에 문자를 입력하는 것 처럼 타입 오류가 발생해도 고객이 입력한 문자를 화면에 남겨야 한다.

만약 컨트롤러가 호출된다고 가정해도 Item 의 price 는 Integer 이므로 문자를 보관할 수가 없다.
결국 문자는 바인딩이 불가능하므로 고객이 입력한 문자가 사라지게 되고, 고객은 본인이 어떤 내용을 입력해서 오류가 발생했는지 이해하기 어렵다.

결국 고객이 입력한 값도 어딘가에 별도로 관리가 되어야 한다.

지금부터 스프링이 제공하는 검증 방법을 하나씩 알아보자

2023.06.27

나와 같은 경우에서는 프론트에서만 처리했던 경험이 있다.
프론트에서만 검증하면 변조가 있을 수 있다고 한다.
안에서도 처리하는게 중요하다.
다음 프로젝트를 새로 할때 적용해보고 싶다.