기본 콘텐츠로 건너뛰기

냉장고 가계부 프로젝트 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 메서드는 다음과 같은 테스트들을 순서대로 실행한다.

  1. 식품을 등록하는 폼(/web/foods/add)을 브라우져로 연다.
  2. 식품명, 수량, 유통기한 input 태그(findElement)에 값을 입력(sendKeys)한다.
  3. form 태그를 찾아서(findElementByTagName) submit한다.
  4. alert가 발생할때까지(wait.until(ExpectedConditionsalertIsPresent())) 잠시(10초) 기다린다.
  5. 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
라벨:

이 블로그의 인기 게시물

Dolphin 1

금융감독원 OPEN API를 사용하여 데이터 수집 금융감독원 금융상품통합비교공시 사이트에서 제공하는 OPEN API 를 사용합니다. 먼저, API 키를 신청합니다. https://finlife.fss.or.kr/PageLink.do?link=openapi/certification&menuId=2000119  로 접속합니다. 약관에 동의하고 본인인증 후, 신상정보를 넘기면 바로 API 키를 받을 수 있습니다. 상세 및 테스트 페이지를 들어가보면 요청 파라미터와 응답 API 형태를 확인할 수 있습니다. 요청은 다음과 같습니다. 읽어보면 서비스 명에 따라 url이 달라지는 부분을 제외하면 요청 URL은 크게 달라지지 않습니다. 파라미터에 인증키, 권역코드, 페이지번호를 전달하면 됩니다. 응답부분은 서비스마다 다르지만 공통 응답 형태는 다음과 같습니다. 에러코드, 에러메시지, 전체 개수, 전체 페이지, 현재 페이지 번호 입니다. 예금상품 조회 서비스나 적금상품 조회 서비스의 경우 공통적으로 금융회사 코드와 이름을 전달해주는데 해당 금융회사의 상세한 정보를 보려면 금융회사 조회 서비스도 호출하는게 나중에 좋을것 같습니다. Spring으로 HTTP 통신을 위해서 Apache HttpComponent 라이브러리를 사용합니다. 메이븐에 다음과 같이 의존성을 추가합니다. <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> </dependency> 다음은 API를 호출하는 간단한 소스코드 조각입니다. CloseableHttpClient httpClient = HttpClients.createDefault(); URI uri = new URIBuilder() .setScheme("http") .setHos...
자세한 내용 보기

Effective Java

생성자 대신 정적 팩터리 메서드를 사용할 수 없는지 생각해 보라 생성자 인자가 많을 때는 Builder 패턴 적용을 고려하라 private 생성자나 enum 자료형은 싱글턴 패턴을 따르도록 설계하라 객체 생성을 막을 때는 private 생성자를 사용하라 불필요한 객체는 만들지 말라 유효기간이 지난 객체 참조는 폐기하라 종료자 사용을 피하라 equals를 재정의할 때는 일반 규약을 따르라 equals를 재정의할 때는 반드시 hashCode도 재정의하라 toString은 항상 재정의하라 clone을 재정의할 때는 신중하라 Comparable 구현을 고려하라 클래스와 멤버의 접근 권한은 최소화하라 public 클래스 안에는 public 필드를 두지 말고 접근자 메서드를 사용하라 변경 가능성을 최소화하라 계승하는 대신 구성하라 계승을 위한 설계와 문서를 갖추거나, 그럴 수 없다면 계승을 금지하라 추상 클래스 대신 인터페이스를 사용하라 인터페이스는 자료형을 정의할 때만 사용하라 태그 달린 클래스 대신 클래스 계층을 활용하라 전략을 표현하고 싶을 때는 함수 객체를 사용하라 멤버 클래스는 가능하면 static으로 선언하라 새 코드에는 무인자 제네릭 자료형을 사용하지 마라 무점검 경고(unchecked warning)를 제거하라 배열 대신 리스트를 써라 가능하면 제네릭 자료형으로 만들 것 가능하면 제네릭 메서드로 만들 것 한정적 와일드카드를 써서 API 유연성을 높여라 형 안전 다형성 컨테이너를 쓰면 어떨지 따져보라 int 상수 대신 enum을 사용하라 ordinal 대신 객체 필드를 사용하라 비트 필드(bit field) 대신 EnumSet을 사용하라 ordinal을 배열 첨자로 사용하는 대신 EnumMap을 이용하라 확장 가능한 enum을 만들어야 한다면 인터페이스를 이용하라 작명 패턴 대신 어노테이션을 사용하라 Override 어노테이션은 일관되게 사용하라 자료형을 정의할 때 표식 인터페이스를 사용하라...
자세한 내용 보기

냉장고 가계부 프로젝트 14

fridge-web 프로젝트에서 api 서버와 통신할때 URL을 매번 중복해서 입력하는 부분을 제거하기 위해 RestTemplate 빈 등록메서드를 수정한다. @Bean public RestTemplate restTemplate(RestTemplateBuilder builder) { return builder.rootUri("http://localhost:8081").build(); } builder에 rootUri 메서드를 호출해서 api 서버 url을 미리 설정하고 build해서 RestTemplate 객체를 반환하면 RestTemplate을 사용하는 부분에서는 root 다음 경로만 넘겨주면 된다. WebFoodController 클래스의 restTemplate 사용부분을 전부 수정한다. @GetMapping public String foods(Model model) { ResponseEntity<Resources<FoodCommand>> response = restTemplate.exchange("/foods", HttpMethod.GET, null, new ParameterizedTypeReference<Resources<FoodCommand>>() {}, Collections.emptyMap()); .... 다른 메서드들도 동일하게 수정한다. Food 클래스에서도 이제 더이상 사용하지 않는 Cloneable과 hashCode, equals 메서드를 정리한다. Guava 의존라이브러리도 다른곳에서는 사용하지 않으므로 정리한다. 식품에 대한 최소한의 기능은 구현하였다. 이번에는 냉장고 라는 개념을 모델링한다. 식품들이 들어가고 나가는 곳은 냉장고이기 때문에 냉장고라는...
자세한 내용 보기