기본 콘텐츠로 건너뛰기

냉장고 가계부 프로젝트 13

foods.html 파일에 식품 리스트 UI를 구현한다.
<body>
  <h2>Foods</h2>
  <table>
  <thead>
  <tr>
    <th>식품명</th>
    <th>수량</th>
    <th>유통기한</th>
  </tr>
  </thead>
  <tbody>
  <tr th:each="food : ${foodList}">
    <td><a href="/web/foods/1" th:href="@{/web/foods/{id}(id=${food.id})}" th:text="${food.name}">파스퇴르 우유 1.8L</a></td>
    <td th:text="${food.quantity}">1</td>
    <td th:text="${#dates.format(food.expiryDate, 'yyyy-MM-dd')}">2018-09-28</td>
  </tr>
  </tbody>
  </table>
</body>

기존 h2 태그의 hello world 테스트 문구는 Foods 로 변경하고, table 태그를 작성하여 목록을 보여준다.
상세보기 앵커태그와 수량, 유통기한 값을 'yyyy-MM-dd' 패턴으로 포맷한다.

pom.xml 에 HATEOAS 라이브러리 의존성을 추가한다.
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-hateoas</artifactId>
</dependency>


    @GetMapping
    public String foods(Model model) {
        ResponseEntity<Resources<FoodCommand>> response = restTemplate.exchange("http://localhost:8081/foods", 
                HttpMethod.GET, 
                null, 
                new ParameterizedTypeReference<Resources<FoodCommand>>() {}, 
                Collections.emptyMap());
        if(response.getStatusCode().is2xxSuccessful()) {
            model.addAttribute("foodList", response.getBody().getContent());
        }
        return "food/foods";
    }

restTemplate의 exchange메서드를 사용한다. exchange 메서드의 파라미터는 순서대로 서버 URL, HTTP 방식, 요청 객체, 응답 클래스 타입, 요청 URI변수값을 가진다.
실제 메서드는 /foods URL을 GET 방식으로 ResponseType은 Resources<FoodCommand> 인 HTTP 통신을 호출한다.
만약, 응답상태코드가 2xx 대이면 model 에 response Body에 getContent 한 내용을 foodList 라는 이름으로 추가하여 View로 전달한다.

테스트 코드는 registerFood 테스트 메서드에 이어서 확인하는 방식으로 진행한다.
alert.accept();

List<WebElement> anchorElements = browser.findElementByTagName("table").findElements(By.tagName("a"));
WebElement anchorElement = anchorElements.get(anchorElements.size() - 1);
assertThat(anchorElement.getText()).isEqualTo(name);

alert.accept 메서드를 호출해야 alert 창을 닫고 다음 코드를 진행할 수 있다.
foods View페이지로 이동하여 해당 페이지의 table태그를 찾고 그 자식태그중에서 anchor 태그들중 가장 마지막 태그의 text값을 등록한 식품이름과 같은지 비교하여 검증한다.

등록과 목록 UI가 완료되면 상세페이지와 수정페이지를 작성하는데, 상세페이지가 곧 수정페이지로 간단하게 표현한다. View 파일은 updateFoodForm.html 로 정하고 파일을 생성한다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Food</title>
</head>
<body>
  <h2>식품 상세</h2>
  <form th:action="@{/web/foods/{id}(id=${foodCommand.id})}" th:object="${foodCommand}" th:method="put">
 <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>

상세/수정 페이지는 등록페이지와 차이가 거의 없다. form태그의 action 속성값과 method 속성값만 변경하면 된다. action 속성에는 foodCommand model값의 id를 uriVariables 에 기입하고, method 속성값은 put으로 지정한다.
나머지 코드는 등록폼페이지와 동일하다.

테스트 코드는 registerFood 테스트 메서드에 계속 이어서 기입한다.
anchorElement.click();
        
assertThat(browser.findElement(By.name("name")).getAttribute("value")).isEqualTo(name);

anchorElement는 앞서 목록페이지에 첫번째 앵커태그를 가리키며, 해당 element에 click 메서드 호출하면 페이지가 이동한다. 상세페이지로 이동하면 input tag의 name 애트리뷰트의 값이 name 인 태그를 찾고, 해당 태그의 value attribute 값을 가져와서 식품의 이름과 비교한다.
즉, 저장된 food의 name이 등록폼 페이지에서 입력했던 식품명과 일치하는지 확인한다.

컨트롤러 메서드는 다음과 같다.
    @GetMapping("/{id}")
    public String updateFoodForm(@PathVariable long id, Model model) {
        ResponseEntity<FoodCommand> response = restTemplate.getForEntity("http://localhost:8081/foods/{id}", FoodCommand.class, id);
        if(response.getStatusCode().is2xxSuccessful()) {
            model.addAttribute("foodCommand", response.getBody());
        }
        return "food/updateFoodForm";
    }

updateFoodForm 메서드는 uri 변수로 식품의 id를 입력받는다. 메서드 파라미터는 long 타입의 PathVariable과 Model 객체를 전달받는다.
restTemplate의 getForEntity 메서드를 호출해서 api서버의 식품 상세데이터를 호출한다. 응답상태코드가 2xx 대 이면 foodCommand 라는 키값을 가진 model 을 View 에 추가하는데 값은 응답결과의 body를 전달한다.

상세/수정페이지에서 정보를 수정하고 submit하는 테스트 메서드를 작성한다.
nameElement = browser.findElement(By.name("name"));
nameElement.clear();
nameElement.sendKeys("코카콜라 500mL");
        
quantityElement = browser.findElement(By.name("quantity"));
quantityElement.clear();
quantityElement.sendKeys("20");
browser.findElementByTagName("form").submit();
        
wait.until(ExpectedConditions.alertIsPresent());
alert = browser.switchTo().alert();
assertThat(alert.getText()).isEqualTo("식품을 저장했습니다.");
alert.accept();

input name태그의 값을 clear 메서드로 삭제하고 sendKeys 메서드로 새로운 식품명을 입력한다.
quantity태그도 20으로 변경하고 form submit을 수행하면, 목록페이지로 이동해서 alert창으로 메시지를 확인하는 검증을 실행한다. 그리고 alert창을 닫는다.

컨트롤러 메서드는 다음과 같다.
    @PutMapping("/{id}")
    public String processUpdateFood(@PathVariable long id, @Valid FoodCommand foodCommand, Errors errors, RedirectAttributes ra) {
        if(errors.hasErrors()) {
            return "food/updateFoodForm";
        }
        
        restTemplate.put("http://localhost:8081/foods/{id}", foodCommand, id);
        ra.addFlashAttribute("registerFoodMessage", "식품을 저장했습니다.");
        return "redirect:/web/foods";
    }

processUpdateFood 메서드에 @PutMapping애너테이션이 선언되어 있고, {id} 값을 uri 변수로 매핑한다. 등록 컨트롤러 메서드와 동일하게 Validation을 수행해서 실패하면 수정폼View로 forward 시킨다.
restTemplate의 put메서드를 호출해서 request 객체 foodCommand를 전달하고 flashAttribute를 추가하여 식품목록페이지로 redirect한다.
processRegistrationFood 메서드와 거의 흡사하다.

fridge 프로젝트의 FoodController에서 findAllFoods 메서드를 수정한다.
List<Food> foods = jpaFoodRepository.findAll();
if(foods.isEmpty()) {
    return ResponseEntity.notFound().build();
}

데이터를 DB에서 가져와서 list내용이 없을경우 notFound를 응답으로 보내는 코드를 삭제한다.

목록페이지에서 등록폼으로 갈 수 있도록 앵커태그를 하나 추가하고 테스트메서드도 해당 태그를 클릭해서 등록페이지로 넘어갈 수 있도록 수정한다.
foods.html 
...
<h2>Foods</h2>
<a href="/web/foods/add" th:href="@{/web/foods/add}" th:text="식품등록" id="btnRegistrationFood">등록</a>
<table>
...

WebFoodControllerTests.java 
    @Test
    public void registerFood() {
        String name = "파스퇴르 우유 1.8L";
        int quantity = 1;
        
        browser.get(BASE_URL + "/web/foods");
        browser.findElement(By.id("btnRegistrationFood")).click();
        ...

식품 삭제는 상세페이지에서 앵커태그를 사용하는 방식으로 구현한다. updateFoodForm.html 
...
<button type="submit">저장</button>
<a href="/web/foods/delete/1" th:href="@{/web/foods/delete/{id}(id=*{id})}">삭제</a>
</form>
...

/web/foods/delete/{id} URL경로로 페이지를 이동시키는 앵커태그를 submit버튼 옆에 작성한다. 삭제 테스트 메서드는 다음과 같다. 
...
browser.findElement(By.linkText("코카콜라 500mL")).click();
browser.findElement(By.linkText("삭제")).click();
        
wait.until(ExpectedConditions.alertIsPresent());
alert = browser.switchTo().alert();
assertThat(alert.getText()).isEqualTo("식품을 삭제했습니다.");
alert.accept();

이어서 삭제기능을 구현한 컨트롤러 메서드다. 
    @GetMapping("/delete/{id}")
    public String deleteFood(@PathVariable long id, RedirectAttributes ra) {
        restTemplate.delete("http://localhost:8081/foods/{id}", id);
        ra.addFlashAttribute("registerFoodMessage", "식품을 삭제했습니다.");
        return "redirect:/web/foods";
    }

restTemplate.delete 메서드를 호출하면 HttpMethod.Delete 방식으로 해당 url을 호출한다.
alert를 이용해서 성공메시지를 전달하고 목록페이지로 redirect 한다.

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

이 블로그의 인기 게시물

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 의존라이브러리도 다른곳에서는 사용하지 않으므로 정리한다. 식품에 대한 최소한의 기능은 구현하였다. 이번에는 냉장고 라는 개념을 모델링한다. 식품들이 들어가고 나가는 곳은 냉장고이기 때문에 냉장고라는...
자세한 내용 보기