기본 콘텐츠로 건너뛰기

냉장고 가계부 프로젝트 16

Fridge UI를 구현하기위해 fridge-web 프로젝트를 작업한다. 여기에도 앞에 글에서 정리한것과 같이 패키지 정리가 안되어 있으므로 패키지를 정리한다. food 패키지와 fridge 패키지로 나누고 각 클래스들을 옮긴다.
테스트 클래스들도 마찬가지로 패키지를 구분한다.

Fridge 를 표현하는 FridgeController 를 작성하고 테스트 클래스를 만든다. FridgeControllerTests 클래스는 Selenium으로 웹UI를 테스트하는 테스트 클래스이다.
이미 FoodControllerTests 클래스에서 selenium API를 사용하는 부분이 존재하고 FridgeController 에서도 별 차이없을 것이므로 selenium WebDriver 할당부분등의 중복되는 부분은 추상클래스(ControllerBase)로 옮기고 FoodControllerTests와 FridgeControllerTests 클래스에서 상속받는 구조로 작성한다.

다음은 ControllerBase 클래스 소스코드이다.
@RunWith(SpringRunner.class)
@SpringBootTest(webEnvironment=WebEnvironment.RANDOM_PORT)
public abstract class ControllerBase {
    
    protected static ChromeDriver browser;
    
    @Autowired
    protected RestTemplate restTemplate;
    
    @Value("${local.server.port}")
    private int port;
    private String host = "http://localhost";
    protected static String BASE_URL;
    
    @Before
    public void setUp() {
        BASE_URL = host + ":" + port;
    }
    
    @BeforeClass
    public static void openBrowser() {
        System.setProperty("webdriver.chrome.driver", "/Users/gang-yeongho/Documents/chromedriver");
        browser = new ChromeDriver();
        browser.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
    }
    
    @AfterClass
    public static void closeBrowser() {
        browser.quit();
    }

}

ChromeDriver, RestTemplate 객체는 하위 클래스에서 사용할 수 있도록 protected로 선언한다. 서버 접근경로와 포트는 굳이 노출할 필요가 없으므로 private으로 가져가고 BASE_URL 을 protected로 선언한다. BASE_URL을 할당하는 부분이 @Before애너테이션으로 선언된 setUp메서드인데, 이 부분은 하위 클래스에서 오버라이드 할 경우가 생기면 추상메서드를 선언해서 setUp을 호출하는 패턴으로 차후 변경될 가능성이 있다.
@BeforeClass, @AfterClass 부분은 WebDriver 객체가 사용하는 드라이버 파일을 환경변수로 선언하고 할당하는 부분과 브라우져를 종료하는 기능을 가지는데, 공통적으로 하위 컨트롤러 테스트클래스에서 사용될 것이므로 ControllerBase 추상클래스에 작성한다.

다음은 FoodControllerTests 클래스의 변경된 소스코드의 일부이다.
public class FoodControllerTests extends ControllerBase {
    
    @Test
    public void registerFood() {
        String name = "파스퇴르 우유 1.8L";
        int quantity = 1;
        
        browser.get(BASE_URL + "/foods");
        browser.findElement(By.id("btnRegistrationFood")).click();
...

클래스 선언부가 다 사라지고 extends 부분이 추가되었다. 클래스 멤버변수들과 @Before, @BeforeClass, @AfterClass를 선언한 메서드들이 다 사라졌다.
이번에는 FridgeControllerTests 클래스의 소스코드이다. FoodController 와 ui는 차이가 없으므로 목록페이지에서 등록버튼을 찾아서 클릭하고, form 내부의 input값들을 채운뒤 submit하는 등록프로세스를 검증한다.
public class FridgeControllerTests extends ControllerBase {
    
    @Test
    public void create() {
        browser.get(BASE_URL + "/fridges");
        browser.findElementById("btnCreateFridge").click();
        
        String nickname = "myFridge";
        WebElement nicknameElement = browser.findElement(By.name("nickname"));
        nicknameElement.sendKeys(nickname);
        browser.findElementByTagName("form").submit();
        
        WebDriverWait wait = new WebDriverWait(browser, 10);
        wait.until(ExpectedConditions.alertIsPresent());
        Alert alert = browser.switchTo().alert();
        assertThat(alert.getText()).isEqualTo(nickname + "을 생성했습니다.");
        alert.accept();
    }

}

URL /fridges 를 호출하면 냉장고 목록페이지가 나타나고, 해당 페이지에서 btnCreateFridge라는 id를 가지고있는 Element를 찾아서 클릭한다. 페이지가 이동하고 등록 폼 페이지에서 name속성이 nickname이라는 Element의 value값을 "myFridge" 로 입력하고 form태그를 찾아서 submit한다.
WebDriver는 alert 창이 뜰때까지 10초정도 기다린다. alert창이 나오면 alert 텍스트를 읽어서 예상되는 메시지와 동일한지 검증한다. 검증이 성공하면 alert창에 동의한다.

다음은 냉장고 목록페이지인 fridges.html 파일이다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Fridge</title>
  <script th:inline="javascript" th:if="${!#strings.isEmpty(registerMessage)}">
  alert([[${registerMessage}]]);
  </script>
</head>
<body>
  <h2>Fridges</h2>
  <a href="/fridges/add" th:href="@{/fridges/add}" id="btnCreateFridge">등록</a>
</body>
</html>

냉장고 등록폼페이지 registerFridgeForm.html는 다음과 같이 구현한다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Fridge</title>
</head>
<body>
  <h2>냉장고 등록</h2>
  <form th:action="@{/fridges/add}" th:object="${fridgeCommand}" th: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="nickname">이름: 
     <input type="text" th:field="*{nickname}" />
    </label><br/>
    <button type="submit">저장</button>
  </form>
</body>
</html>

foods 목록페이지, 등록폼페이지 파일과 냉장고 목록, 등록폼 페이지의 차이가 크게 없으므로 설명은 생략 한다. 다음은 View와 Controller 사이에서 데이터 전달을 책임지는 Command객체를 구현한다. 클래스명은 FridgeCommand 이며 FoodCommand와 구현이 동일하다.
public class FridgeCommand {
    private Integer id;
    @NotNull
    @Size(min=2, max=15)
    private String nickname;
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getNickname() {
        return nickname;
    }
    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

}

멤버변수와 Getter/Setter, Validation을 위한 @NotNull, @Size 애너테이션이 nickname 변수에 선언되어있다. nickname은 최소 2자, 최대 15자를 입력받는다.

다음은 FridgeController 컨트롤러 클래스의 소스코드이다.
@Controller
@RequestMapping("/fridges")
public class FridgeController {
    
    @Autowired
    private RestTemplate restTemplate;
    
    @GetMapping
    public String fridges(Model model) {
        return "fridges/fridges";
    }
    
    @GetMapping("/add")
    public String registerFridgeForm(@ModelAttribute("fridgeCommand") FridgeCommand fridgeCommand) {
        return "fridges/registerFridgeForm";
    }
    
    @PostMapping("/add")
    public String processRegistrationFridge(@Valid FridgeCommand fridgeCommand, Errors errors, RedirectAttributes ra) {
        if(errors.hasErrors()) {
            return "fridges/registerFridgeForm";
        }
        
        ResponseEntity<FridgeCommand> response = restTemplate.postForEntity("/fridges", fridgeCommand, FridgeCommand.class);
        if(response.getStatusCode().is2xxSuccessful()) {
            ra.addFlashAttribute("registerMessage", fridgeCommand.getNickname() + "을 생성했습니다.");
        }
        return "redirect:/fridges";
    }

}

클래스는 /fridges URL로 매핑되며 GET 방식으로 호출시 fridges 메서드로 매핑되며 목록페이지 View를 반환한다. /fridges/add URL은 GET방식일경우, 등록폼 페이지로 전달되고 POST방식은 등록 처리를 담당하는 processRegistrationFridge 메서드로 매핑된다. FoodController 와 유사하다.

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

이 블로그의 인기 게시물

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