5 분 소요

 인프런 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술편을 학습하고 정리한 내용 입니다.

상품 등록 검증

먼저 상품 등록 검증 코드를 작성해 보자.

ValidationItemControllerV1 - addItem() 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

@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}";  
}

돌려서 오류를 발생 시키게 넣고 로그를 찍어 보면..

다음과 같이 페이지 이동이 없는 것 같은데 (뷰단 에선 처리가 아직 안돼있어서.) 로그엔 남아있다.

검증 오류 보관

Map errors = new HashMap<>();

만약 검증 시 오류가 발생하면 어떤 검증에서 오류가 발생했는지 정보를 담아둔다.

검증 로직

1
2
3
4

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

검증시 오류가 발생하면 errors에 담아둔다.

이때 어떤 필드에서 오류가 발생했는지 구분하기 위해 오류가 발생한 필드명을 key로 사용한다.

이후 뷰에서 이 데이터를 사용해서 고객에게 친절한 오류 메시지를 출력할 수 있다.

특정 필드의 범위를 넘어서는 검증 로직

1
2
3
4
5
6
7

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

특정 필드를 넘어서는 오류를 처리해야 할 수도 있다.

이때는 필드 이름을 넣을 수 없으므로 globalError라는 key 를 사용한다.

검증에 실패하면 다시 입력 폼으로

1
2
3
4
5

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

만약 검증에서 오류 메시지가 하나라도 있으면 오류 메시지를 출력하기 위해 model에 errors를 담고, 입력 폼이 있는 뷰 템플릿으로 보낸다.

뷰 템플릿 수정

resources/templates/validation/v1/addForm.html

1
2
3
4

.field-error {  
    border-color: #dc3545;  
    color: #dc3545;  
}

이 부분은 오류 메시지를 빨간색으로 강조하기 위해 추가했다.

1
2
3
4
5
6
7
8
9
10

<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>
   .
   .
   .
</form>

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

1

<div th:if="${errors?.containsKey('globalError')}">

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

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

필드 오류 처리

자 이제 필드 오류를 받았을 때 뷰 템플릿을 수정해 보자.

1
2
3
4
5
6
7
8

<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>

상품명 오류를 추가했다.

여기서 잘 보면,

1
2
3

<div class="field-error" th:if="${errors?.containsKey('itemName')}" th:text="${errors[itemName]}">  
	상품명 오류  
</div>

th:if="${errors?.containsKey('itemName')}"으로 errors 객체에 itemName이 있는지 판단하고

있으면 th:text="${errors[itemName]}"로 텍스트를 출력한다.

1
2
3

<input type="text" id="itemName" th:field="*{itemName}"  
           th:class="${errors?.containsKey('itemName')} ? 'form-control field-error' : 'form-control'"           
           class="form-control" placeholder="이름을 입력하세요">

그리고

이렇게 인풋 필드 테두리도 강조 하고 싶어서,

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

이런 식으로 에러가 있나? -> 있으면 에러 클래스 -> 없으면 그냥 일반 클래스 이런 문법을 사용해서 동적으로 클래스를 바꾸도록 했다.

여기서 사용한 th:class는 다음과 같이

th:classappend="${errors?.containsKey('itemName')} ? 'fielderror' : _"

이걸로 대체할 수 있다. 이건 조건이 맞으면 추가하는 것.

이런 식으로 이름, 가격, 수량을 전부 추가해 주면 된다.

전체 코드는 다음과 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<!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:classappend="${errors?.containsKey('itemName')} ? 'fielderror' : _"                   
                   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>

이런 식으로 모든 오류를 띄워 봤다.

남은 문제점

  • 뷰 템플릿에서 중복 처리가 많다. 반복이다. 이름, 가격, 수량 …

  • 타입 오류 처리가 안된다. Item의 price, quantity같은 숫자 필드는 Integer이므로 문자 타입으로설정 하는 것이 불가능 하다. 숫자 타입에 문자가 들어오면 오류가 발생한다. 그런데 이러한 오류는 스링 MVC에서 컨트롤러에 진입하기도 전에 예외가 발생하기 때문에, 컨트롤러가 호출 되지도 않고, 400 예외가 발생하면서 오류 페이지를 띄워 버린다.

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

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

댓글남기기

참고