냉장고 가계부 프로젝트 11

식품을 등록하는 폼 UI를 작성한다. 먼저, 다음과 같이 테스트 코드를 작성했다.

    @Test
    public void registerFood() {
        String name = "파스퇴르 우유 1.8L";
        int quantity = 1;
        String expiryDate = "2018. 09. 28";
        
        browser.get(BASE_URL + "/web/foods/add");
        WebElement nameElement = browser.findElement(By.name("name"));
        WebElement quantityElement = browser.findElement(By.name("quantity"));
        WebElement expiryDateElement = browser.findElement(By.name("expiryDate"));
        nameElement.sendKeys(name);
        quantityElement.sendKeys(Integer.toString(quantity));
        expiryDateElement.sendKeys(expiryDate);
        browser.findElementByTagName("form").submit();
        
        WebDriverWait wait = new WebDriverWait(browser, 10);
        wait.until(ExpectedConditions.alertIsPresent());
        Alert alert = browser.switchTo().alert();
        assertThat(alert.getText()).isEqualTo("식품을 저장했습니다.");
    }

registerFood 메서드는 다음과 같은 테스트들을 순서대로 실행한다.

식품을 등록하는 폼(/web/foods/add)을 브라우져로 연다.
식품명, 수량, 유통기한 input 태그(findElement)에 값을 입력(sendKeys)한다.
form 태그를 찾아서(findElementByTagName) submit한다.
alert가 발생할때까지(wait.until(ExpectedConditionsalertIsPresent())) 잠시(10초) 기다린다.
alert내용이(alert.getText()) 텍스트내용과 일치하는지(isEqualTo) 검증한다.

form을 submit하고나서 폼 Validation을 수행하고 이상이 없는 경우 서버는 alert 으로 정상 처리되었다는 응답을 검증하는 테스트메서드이다.

다음은 등록폼 html이다. 기능만 구현한 간단한 html이다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Food</title>
</head>
<body>
  <h2>식품 등록</h2>
  <form action="#" th:action="@{/web/foods/add}" th:object="${foodCommand}" method="post">
 <div th:if="${#fields.hasErrors('*')}">
     <ul>
         <li th:each="err : ${#fields.errors('*')}" th:text="${err}">Input is incorrect</li>
     </ul>
 </div>
    <label for="name">이름: 
     <input type="text" th:field="*{name}" />
    </label><br/>
    <label for="quantity">수량: 
        <input type="text" th:field="*{quantity}" />
    </label><br/>
    <label for="expiryDate">유통기한: 
        <input type="date" th:field="*{expiryDate}" />
    </label><br/>
    <button type="submit">저장</button>
  </form>
</body>
</html>

html에서는 form 태그에 th:object로 할당된 foodCommand variable expression이 존재하고 for 태그 내의 th:field attribute에 애스터릭(*{...}) 변수는 selection variable expression 이라고 한다.
foodCommand 객체 내의 멤버변수에 접근자를 호출한다. th:action attribute 의 @{/web/foods/add} 는 Link URL 을 표현하는 표현식이다.
#fields message variable expression이며, Validation에 걸리면 #fields 메세지 변수가 할당된다. errors('*') 는 모든 에러를 전부 보여주는 컬렉션 형태이며, errors('name') 이런식으로 단일 에러도 표현할 수 있다.

등록폼은 이름, 수량, 유통기한을 입력받아서 post 방식으로 /web/foods/add URI로 전달한다.
등록이 완료되어 성공하면 목록페이지로 리다이렉트되며, 성공했다는 alert 또한 목록페이지에서 보여준다. 목록 페이지 소스는 다음과 같이 구현한다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Food</title>
  <script th:inline="javascript" th:if="${!#strings.isEmpty(registerFoodMessage)}">
  alert([[${registerFoodMessage}]]);
  </script>
</head>
<body>
  <h2>Hello, world!</h2>
</body>
</html>

자바스크립트를 호출하는 태그가 표현되어 있다. th:if 로 registerFoodMessage 변수가 비어있지 않으면 alert로 해당 변수를 나타낸다.

이제 컨트롤러를 구현한다.

@GetMapping("/add")
public String registerFoodForm(@ModelAttribute("foodCommand") FoodCommand foodCommand) {
    return "food/registerFoodForm";
}
    
@PostMapping("/add")
public String processRegistrationFood(@Valid FoodCommand foodCommand, Errors errors, RedirectAttributes ra) {
    if(errors.hasErrors()) {
        return "food/registerFoodForm";
    }
    ra.addFlashAttribute("registerFoodMessage", "식품을 저장했습니다.");
    return "redirect:/web/foods";
}

등록 폼을 보여주는 registerFoodForm 메서드는 GET 방식으로 동작하고 /add 매핑URI를 가진다. 따라서 /web/foods/add 와 동일한 주소를 매핑하는데 GET 방식으로 호출했을때만 동작하는 메서드이다.
메서드 파라미터로 @ModelAttribute 애너테이션을 통한 foodCommand 라는 객체를 전달받는다.
@ModelAttribute 애너테이션을 이용하면 RequestParameter로 전달되는 데이터를 Command 객체에 자동으로 바인딩해줘서 아주 편리하다. registerFoodForm html에서 th:object로 커맨드객체를 호출하므로 빈 커맨드객체를 바인딩해주는 역할도 한다.
메서드의 리턴 타입은 String으로 ModelAndView를 굳이 사용하지 않아도 ViewName 으로 자동 인식하고 해당 view 파일을 찾아간다.

processRegistrationFood 메서드는 등록 폼에서 전달받은 input 값을 submit 받아서 등록 처리를 수행하는 컨트롤러 메서드이다. 등록 폼과 주소는 동일하며 POST 방식으로만 동작한다. 매개변수로 @Valid 애너테이션이 선언된 FoodCommand 객체를 받고, org.springframework.validation.Errors 인터페이스도 전달받고, org.springframework.web.servlet.mvc.support.RedirectAttributes 인터페이스도 전달받는다.

@Valid 애너테이션으로 선언한 FoodCommand 는 입력 데이터의 검증을 하고, 오류가 있으면 view에 에러 fields 변수를 전달해준다.
Errors 인터페이스는 특정객체에 검증내역에 오류가 있거나, 바인딩 오류가 있는지 확인하고 알려주는 역할을 한다. 메서드 내에서는 errors 변수에 hasErrors 메서드를 호출해서 오류가 있을 경우 등록폼 View name으로 forward 하는데 쓰인다.

RedirectAttributes 인터페이스는 리다이렉트할때 객체를 전달해주는 역할을 하는데, 메서드 내에서는 addFlashAttribute 메서드를 이용해서 간단한 저장 성공 메시지를 전달해주는데 사용한다. flash Attribute 는 리다이렉트 된 후 한번만 model 에 저장되며 리다이렉트 된 url을 재요청하면 데이터는 사라진다.

이제 FoodCommand 커맨드 객체를 구현한다. 커맨드 객체는 단순한 값 전달(DTO) 용도의 객체로 멤버변수와 접근자/수정자로 구성되며 UI 와 컨트롤러 사이에서 데이터를 표현하고, 바인딩하고, 검증하는 역할을 한다.

package com.poseidon.fridge.command;

import java.util.Date;

import javax.validation.constraints.Max;
import javax.validation.constraints.Min;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;

import org.springframework.format.annotation.DateTimeFormat;

public class FoodCommand {
    
    private Long id;
    
    @NotNull
    @Size(max=20)
    private String name;
    
    @Min(1)
    @Max(999)
    private Integer quantity;
    
    @DateTimeFormat(pattern="yyyy-MM-dd")
    private Date expiryDate;
    
    public FoodCommand() {}
    
    public FoodCommand(String name, Integer quantity, Date expiryDate) {
        this.name = name;
        this.quantity = quantity;
        this.expiryDate = expiryDate;
    }

    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Integer getQuantity() {
        return quantity;
    }
    public void setQuantity(Integer quantity) {
        this.quantity = quantity;
    }
    public Date getExpiryDate() {
        return expiryDate;
    }
    public void setExpiryDate(Date expiryDate) {
        this.expiryDate = expiryDate;
    }

    @Override
    public String toString() {
        return "FoodCommand [id=" + id + ", name=" + name + ", quantity=" + quantity + ", expiryDate=" + expiryDate
                + "]";
    }
    
}

필드 검증용도의 애너테이션들이 보이는데 더 다양하지만, 여기서는 @NotNull, @Size, @Min, @Max 정도를 사용한다. 애너테이션들의 이름만 봐도 무엇을 검증하려는지 알 수 있다.

expiryDate 변수의 타입이 java.util.Date 형태이며, @DateTimeFormat 애너테이션이 선언되어 있다.
View 에서 유통기한 입력값이 YYYY. MM. DD 형태로 전달되는데 String형태의 입력값을 Date형태로 바인딩할 때, @DateTimeFormat의 주어진 pattern 형태로 parse할 수 있도록 선언한다.

테스트를 실행해보면 크롬 브라우져가 순식간에 데이터를 입력하고 사라지는것을 확인할 수 있다.

이전글: 냉장고 가계부 프로젝트 10
다음글: 냉장고 가계부 프로젝트 12

Developer K

이 블로그 검색

냉장고 가계부 프로젝트 11

태그

이 블로그의 인기 게시물

Dolphin 3

레거시 코드 활용 전략 - 마이클 C. 페더스

Dolphin 2