2018-4-2 TIL Java Lotto WebUI에 구현하기

Spark를 이용을 해서 Web UI에서 로또를 구현하기

public class WebMain {
    private static final org.slf4j.Logger logger = LoggerFactory.getLogger(WebMain.class);
    private static List<Lotto> lottos = new ArrayList<>();
    public static void main(String[] args) {
        // psvm
        port(8080);
        get("/", (req, res) -> {
            Map<String, Object> model = new HashMap<>();
            return render(model, "/index.html");
        });

        post("/buyLotto", (req, res) -> {
            int num = (Integer.parseInt(req.queryParams("inputMoney")) / 1000);
            List<String> manualNum = Arrays.asList(req.queryParams("manualNumber").split("\r?\n"));
            int autoNum = num - manualNum.size();
            Input input = new Input();
            lottos = input.makeLottos(autoNum);
            input.addManualLottos(manualNum);
            Map<String, Object> model = new HashMap<>();
            model.put("num", num);
            model.put("lottos", lottos);
            return render(model, "/show.html");
        });

        post("/matchLotto", (req, res) -> {
            Map<String, Object> model = new HashMap<>();
            Lotto winningNumber = new Lotto(req.queryParams("winningNumber"));
            String bonusNumber = req.queryParams("bonusNumber");
            Money money = new Money();
            Decision decision = new Decision();
            int inputMoney = lottos.size() * 1000;
            int profit = money.profit(money.totalMoney(decision.decisionRank(lottos, winningNumber, bonusNumber)), inputMoney);
            HashMap<Rank, Integer> finalCount = money.money(decision.decisionRank(lottos, winningNumber, bonusNumber));
            model.put("profit", profit);
            model.put("moeny", money);
            return render(model, "/result.html");
        });
    }

    public static String render(Map<String, Object> model, String templatePath) {
        return new HandlebarsTemplateEngine().render(new ModelAndView(model, templatePath));
    }
}

로또의 동작과정

시작

  • localhost:8080/ 을 불러오면, get메소드에 의해서 index.html을 불러오게 되고 index.html에는 구입금액을 입력을 하는 inputMoney와 수동구매 입력을 받는 manualNumber라는 칸이 존재를 한다.
  • req.queryParams(“inputMoney”)와 req.queryParams(“manualNumber”)를 통해서 index.html에서 값을 불러들인다.

값전달

  • post메소드를 통해서 moneyInput의 값과 manualNumber의 값을 전달을 한다.
  • moneyInput의 값이 String의 형태이기때문에 Integer타입으로 변환을 하고
  • Arrays.asList(req.queryParams(“manualNumber”).split(“\r?\n”))를 통해서 manualNumber를 List 타입으로 변환을 한다.
  • Lotto 클래스에 Lotto(List manualNum)이라는 생성자를 만들어서 로또객체를 생성을 하고 이것을 lottos에 저장을 해준다.

결과

  • profit를 구하는 메소드와 ranks를 구하는 메소드를 통해서 결과값을 출력한다.

오늘의 느낀점

  • 웹에 대한 개념은 조금 알고있었지만, java spark에 대해서는 아는게 전혀 없었다. 이전에 강의를 들었던 것을 통해서 적용을 하려고하니까 많은 두려움이 있었다. 그러다가 요구사항에 나온 조건대로 하나둘씩 입력을 해보고 index.html => show.html => result.html 순서대로 출력을 먼저하고 값을 전달받아서 출력을 하는 과정을 진행을 하게 되었다. 처음에 get메소드를 통해서 index.html을 불러오는것에 대해서는 원활하게 진행을 하게 되었다. index.html에서 입력금액과 수동구매를 입력하는 태그에서 name의 값을 찾아서 post메소드를 통해서 보내게되었을때 parameter값을 동영상강의에서 봤던 req.queryParams(“name”)을 통해서 값을 잘 전달을 할 수 있었다. 우선은 여기에 전달된 값을 자바스크립트의 console.log()를 통해서 출력을 하듯이 콘솔에다가 출력을 해보고 싶었다. 프로그램을 실행을 해도 출력이 되지 않아서 음.. 걱정이 많았다. 그래서 logger.debug를 이용을 하고 또 콘솔에 너무나도 많은 것들이 출력이 되기 때문에 지나친것을 발견을 하고 이전에 내가 전달된 값들이 제대로 전달이 된것을 확인을 했다. 웹이랑 자바랑은 연관성에 대해서는 잘몰랐는데, 이전에 Lotto를 구현하면서 만들었던 클래스들을 재활용을 할 수 있어서 크게 메소드를 만들거나 클래스를 만들필요는 없었다. 이전 프로젝트들을 통해서는 잘 몰랐는데, 웹UI를 구현을 하게되면서 객체지향에 매력에 대해서 느끼기 시작을 했다. 그냥 머릿속에 필요한 자료형들을 입력을 해서 불러들이면 됬다. 중간에 post, get을 통해서 lottos를 전달을 하는 방법을 몰라서 static으로 구현을 했고. ranks랑 profit을 계산을 하는것이 될까 싶었는데, 콘솔기반의 로또에서 구현을 한것처럼 money, decision객체를 생성을 하고 여기에 bonusNumber, WinningNumber, lottos를 전달을 하니까 수익률과 랭크에 관해서는 값이 전달이 됬다. 아마도 오늘 가장 어려웠던 부분은 바로 finalCount값을 읽어오고 저장을 하는것과 이 값을 result.html에서 불러오는것이 가장 큰 어려움이 였다. 결론으로 이야기를 하면 moeny객체에는 Rank.fifth / Rank.fourth / Rank.third / Rank.second / Rank.first값을 불러오는 메소드가 존재를 했고 이것을 불러왔어야됬는데, model.put(“money”. moeny)에 moeny객체를 전달을 해서 moeny에 있는 메소드들을 호출을 해야됬는데, 엉뚱한것들을 호출을 하는바람에 출력이 안됬던 것이였다. 메소드를 호출하고 객체를 생성하고 저장하는 것에 대해서는 확실히 1,2월에 비해서는 많이 수월해졌다는것에 감사하다 :)
Written on April 2, 2018