구구단 출력 프로젝트 02 - 뷰(View) 만들기

1. home.jsp 파일에 html의 <input> 태그를 이용하여 "첫 단", "마지막 단", "마지막 곱할 수"를 입력하고 버튼을 클릭할 수 있도록 구성한다.

<div>
    <input id="firstTimes" placeholder="첫 단"/><br/>
    <input id="lastTimes" placeholder="마지막 단"/><br/>
    <input id="lastMultiplier" placeholder="마지막 곱할 수"/>
    <button type="button">계산하기</button>
</div>

<div id='resultDiv'></div>

• placeholder를 이용하여 화면에 고정적으로 나타나있도록 하였다.
• button의 경우 default 값이 "submit"이기 때문에 이를 type="button"으로 변경해주었다.
• 후에 ajax 호출을 통하여 가져온 결과값을 출력해둘 곳으로 id="resultDiv" 의 div 영역을 만들어두었다.

 

2. 버튼을 클릭하면 ajax를 호출하여 controller에 데이터를 보낼 수 있도록 구성한다.

$('button').on('click', function() {
        var inputValue = {
				'firstTimes' : Number($('#firstTimes').val()),
				'lastTimes' : Number($('#lastTimes').val()),
				'firstMultiplier' : Number('1'),
				'lastMultiplier' : Number($('#lastMultiplier').val())
		}
		
		$.ajax({
			url: "/",
			data: inputValue,
			method: "POST",
			async: false,
			beforeSend : function() {   
			// controller에 data를 보내기 전 오류가 있을 때 데이터 전송을 막을 수 있는 방법
			// beforeSend는 ajax를 요청하기 직전의 콜백함수이기 때문에 실행 전에 막을 수 있다.
				if (inputValue.firstTimes > inputValue.lastTimes) {
					alert("첫 단이 마지막 단보다 작아야합니다.");
					return false;
				}
			}
		})
		// beforeSend에 문제가 없고 데이터도 정상적으로 받아오면 실행되는 함수
		.done(function(returnValue) {
			printTimesTable(returnValue);
		});
	});

• json 형태의 데이터로 구성하여 inputValue를 controller에 보내주었다.
• "/" url을 가지는 post 방식의 controller에서 처리할 ajax 호출이고 async:false 이기 때문에 동기방식으로 진행된다.
• data를 보내기 전 우선 beforeSend의 함수부터 호출하여 "첫 단" 입력값과 "마지막 단" 입력값을 비교하여 마지막 단의 값이 더 작을 경우 데이터를 controller에 보내기 전 ajax 호출을 그만두도록 return false 하였다. 
• 컨트롤러에서 returnValue를 정상적으로 가지고 올 경우 .done()의 printTimesTable() 함수가 실행된다.

 

3. returnValue를 받아서 처리할 printTimesTable 함수를 정의한다.

function printTimesTable(returnValue) {
		/* Q. inputValue를 파라미터로 받아오는 방식과 지금 방식 중 어떤게 더 좋은 방법일까? */
		var value = JSON.parse(returnValue);
		var firstTimesNumber = value.filter((element) => null === element).length; // null개수 구하기
		// null의 개수 = 시작 단 수
		// [2][1] = 2 * 1 = 2 방식으로 저장되어있기 때문
		
		/* 반복문을 여러 개 돌리는 방식과 함수를 더 만들어서 호출하는 방식 중 어떤게 더 좋은 방법일까? */
		var src = "<table border=1>";
		for (i = firstTimesNumber; i < value.length; i++) { // 첫번째 단 ~ 마지막 단 까지 출력(세로방향)
			src += "<tr>";
			
			for (k = firstTimesNumber; k <= i; k++) { // 한 줄 당 첫번째 단 ~ i 단 까지 출력(가로방향)
				src += "<td>";
				
				for (j = 1; j < value[i].length; j++) { // [2][1] -> 2 * 1 = 2 ... 출력
					var color = (k % 2 == 1) ? "<font color=blue>" : "<font color=orange>";
					src += color + value[k][j] + "<br>";
					
				}
				src += "</td>";
			}
			src += "</tr>";
			
		}
		src += "</table>";
		
		// id=resultDiv 영역에 src 출력
		$("#resultDiv").html(src);
	}

• JSON 방식의 string 형태로 returnValue를 controller에서 받아오도록 하였고, 이를 parse하여 value에 저장한다. 
• 모델에서 배열에 값을 담을 때 [2][1] -> 2 * 1 = 2 형태로 값을 담았기 때문에 이 경우 [0][n], [1][n] 의 값들이 null이 된다. 
• 이 때 null의 개수가 "첫 단" 에 입력한 값과 동일하다는 것을 이용하여 이를 filter를 통해 null의 개수를 구하여 시작 단 수로 활용하였다.
• null의 개수를 구한 것을 firstTimesNumber 변수에 넣고 i-for문을 만들었다.
  • 첫 번째 단 ~ 마지막 단까지의 구구단 테이블을 출력하는 형태이다.
  • 출력하면 세로방향으로 ... 2단, 3단, 4단 ..  형태가 나오게 된다.
• k의 값이 i의 값까지 반복되는 것으로 k-for문을 만들었다.
  • 첫 번째 줄이 출력될 때 몇 개의 단이 반복적으로 출력될 것인지? 즉, 가로 방향으로 .. 2단, 3단, 4단 .. 을 출력하도록 하였다.
  • 이 방식은 유명한 for문 별찍기 예제에서 직각삼각형을 그리는 문제에서 응용하였다.
• j-for문의 경우 각 단에서 곱해지는 수를 정하였는데 이 때 value[i].length의 값이 "마지막 곱할 수"의 값과 같다는 것을 이용하였다.
  
  • 추가로 출력되는 단이 짝수단일 경우 주황색으로, 홀수단일 경우 파란색으로 표시되도록 하였다.
• 모든 테이블 태그들과 결과를 src 라는 변수에 담아 이를 id='resultDiv' 의 div 영역에 넣어주기 위해서 $('#resultDiv').html(src); 를 이용하였다.
  • 이는 src 문자열을 html 태그를 활용하여 id가 resultDiv인 영역에 넣어주라는 뜻이다.