Today's Dev Notes(2018-11-04)

안녕하세요, Brad입니다. 웹UI를 적용하는 새로운 환경에서 로또 step4를 진행하다보니 진행상황을 기록하는 것을 깜빡했었네요. 그래서 간단하게 진행을 하면서 힘들었던 부분, 어려웠던 부분만 정리해볼께요.

 

Spark를 통해 간단하게 몇 줄로 웹서버를 가동하는 것, 그리고 template engine을 통해 HTML을 렌더링하여 우리가 만든 값들을 HTML로 띄우는 작업이 참 재미있었는데요. 매번 콘솔로 작업을 하다가 웹상에서 UI를 갖추고 가동을 하니 전혀 다른 느낌이더라구요. 뭔가 완성된 게임을 보는 것만 같았어요. 물론 부족한 것 투성이긴 하지만..

 

가장 어려웠던 점은 template engine을 통해 HTML에 원하는 결과 데이터를 넘겨주긴 했지만 그것을 어떻게 뿌리는지였습니다. 아직 웹UI에 익숙하지 않아서 그런지 어떻게 자바에서 보낸 객체에 있는 값들을 꺼내야 하는지 모르겠더라구요. 실제 그렇잖아요. 객체를 넘겨줘도 그 객체 안에 여러 메서드와 상태값들이 있고, 또 그 안에 또다른 객체가 존재할 수도 있는데 이것을 어떻게 꺼내야하는지.. 동영상에서 배웠던 부분은 객체가 있고 getter메서드가 구현되어 있으면 그 상태값을 불러올 수 있다는 내용 밖에 없었거든요. 근데 이 부분은 사용자가 만든 객체에 상태값을 불러오는 것에 한정된 내용이라 나머지 부분은 문서나 구글링을 통해 알아낼 수 밖에 없었습니다.

 

이에 대해 여러 검색도 해보고 실제 적용도 해봤지만 결국은 getter메서드 형태로 뽑을 수 있게끔 자바 코드 상에서 짜놓는 방법으로 해결을 하였습니다. 자바 객체를 HTML상에서 다른 방법으로 더 접근할 수 있는지 지금은 더이상 잘 모르겠네요. LottoDto는 getter메서드가 이미 출력부로 보내기 위해 구현되어 있었기 때문에 아래와 같이 구현할 수 있었습니다. template engine 문법에 따르면 lottoDto라는 객체에 lottoNums라는 상태값이 있고 반복문을 돌면서 getter메서드를 통해 lottoNums의 값을 꺼내오는 형태입니다.

		{{#lottoDto}}
		<tr>
			<th>{{@index}}</th>
			<td>{{lottoNums}}</td>
		</tr>
        {{/lottoDto}

 

여기까진 크게 어렵지 않았습니다. 구현되어 있는 그대로 사용하면 되니까요. 가장 고민이 많이 되었던 부분은 최종 결과값을 출력하는 부분이었습니다. 저의 경우 데이터가 Map<Rank, Integer>형태로 담겨져 있었는데 출력이 다음과 같이 되어야 합니다.

반복문을 통해 Integer형태의 value값들을 불러올 수 있으나 위에 보면 알수 있듯이 몇 개가 일치하는지, 각 rank의 상금, 그리고 2등의 경우 '보너스 볼 일치'라는 문구까지 추가로 바뀌어야 합니다. 자바 코드상에서는 이 값들이 Rank객체에 메시지를 보내 얻어낼 수 있지만 HTML상에서 이것을 어떻게 하는지 고민이 많이 되었습니다.

 

우선 Collection 자료구조이 값들을 반복문을 통해 얻기 위해선 {{#each 객체명}} HTML코드 {{/each}}로 뽑아내는 것까진 검색을 통해 알 수 있었습니다.(근데 Spark배울 때 동영상에서 한대로 {{#객체명}} HTML코드 {{/객체명}}도 되네요!) 그리고 이 HTML 코드 안에 저 문구를 따로 만들어주었습니다. 다행히 이 전 콘솔창에서 띄울 때 ResultView에서 사용하던 코드를 재활용하면 되는데요. gameResult클래스에서 Map<Rank, Integer> 대신 결과 문구가 담길 List<String> 을 만드는 것입니다.

    public List<String> getResultMessage() {
        List<String> resultMessage = new ArrayList<>();
        for (Rank rank : Rank.values()) {
            StringBuilder sb = new StringBuilder();
            sb.append(rank.getCountOfStrike() + "개 일치");
            if(rank.equals(Rank.SECOND)) {
                sb.append(", 보너스 볼 일치");
            }
            sb.append(" (" + rank.getWinningMoney() + "원) ");
            sb.append("- " + gameResult.get(rank) + "개");
            resultMessage.add(sb.toString());
        }
        return resultMessage;
    }

이렇게 하면 위 문구들이 게임 결과 데이터에 맞게 만들어지겠죠? 그럼 저 List를 HTML로 넘기는 것입니다. List안의 데이터값은 {{this}}를 통해 꺼낼 수 있습니다.

		{{#each gameResults}}
			<tr>
				<th>{{this}}</th>
			</tr>
		{{/each}}

이렇게 하면 html 상에서 객체 접근을 어떻게 할건지 상관없이 바로 결과문구만 반복문 돌려가며 뿌리면 됩니다. 근데 쓰면서 생각해보니 HTML상에서 객체에 접근하는 것도 뭔가 맞지 않는다고 생각이 드네요. 그렇게 생각하니 이렇게 해결한게 맞는 방법인 것 같아요.

 

여기까지 정리할게요. 이제 본격적으로 웹 공부를 시작하려고 하니 긴장도 되고 기대도 되네요. 앞으로 정리할 내용이 훨씬 더 많아지겠네요..!!!

오늘 추가적으로 공부한 부분

• 2018/11/04 - [Algorithm/problem solving] - Today's Algorithm(2018-11-04)