기본 콘텐츠로 건너뛰기

냉장고 가계부 프로젝트 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 어노테이션은 일관되게 사용하라 자료형을 정의할 때 표식 인터페이스를 사용하라...
자세한 내용 보기

냉장고 가계부 프로젝트 35

Spring security 프레임워크에서 form login 방식으로 인증할 경우 Remember-Me 서비스를 제공할 수 있다. Remember-Me 서비스를 이용하면 쿠키에 인증토큰을 저장해두고 일정기간동안(default: 2주) 쿠키에 토큰이 있다면 인증처리를 해준다. 기본적으로 별도의 설정이 없다면 세션은 30분 만료시간으로 정해져있다.(WAS 마다 틀리다.) 세션 시간이 만료되면 세션에 저장된 정보가 날라가므로 다시 로그인을 해야한다. Remeber-Me 기능을 이용하면, form login에서 인증을 성공적으로 진행하는 경우 임의의 인증토큰을 생성해서 쿠키에 저장해두고 쿠키가 만료되기 전까지 쿠키값을 확인해서 인증을 진행한다. 별도의 설정을 하지 않으면 in-memory 기반의 쿠키저장소를 이용해서 쿠키 토큰인증을 하며, JDBC같은 저장소를 별도로 사용할 수도 있다. WebSecurityConfig 클래스에 다음과 같이 간단한 설정만으로 remember-me 기능을 추가할 수 있다. @Configuration @EnableWebSecurity @RequiredArgsConstructor public class WebSecurityConfig extends WebSecurityConfigurerAdapter { private final MemberUserDetailsService userDetailsService; @Override protected void configure(HttpSecurity http) throws Exception { http .authorizeRequests() .antMatchers("/", "/signup").permitAll() .requestMatchers(PathRequest.toStaticResources().atCommonLocations()...
자세한 내용 보기