SpringMVP를 들어가기에 앞서 VIEW 부분을 먼저 살펴보기로 했다.
웹입문의 근본인 html,css 예제들을 보며 기본적인 구문들을 익혀보자
먼저 시대별 웹어플리케이션 아키텍처의 변화를 보자.
시대별 웹어플리케이션 아키텍처의 변화
1. 웹문서 시대 (1990)
웹서버와 브라우저간 정적인 html을 보내거나 CGI(Common Gateway Interface)를 이용하여 개발하는 경우이다.
개발직군간의 업무 분담이 전혀 이루어지지 않는 상태.
2. 웹 표준 시대(2000 초)
2000년대 초반으로 오면 백엔드 개발에서는 MVC모델이라는 기법을 통해 데이터 모델과 템플릿 그리고 비즈니스 로직이 분리된 코드를 통해 개발 생산성을 높이게 된다.
프론트엔드에서도 웹 표준 개발 방법론을 통해 구조(HTML), 표현(CSS), 동작(DOM Script)를 분리하고 CSS 레이아웃과 W3C기반 DOM을 통한 웹 개발 방식을 많이 이용
3. Ajax 시대(2000 후반)
프론트엔드 웹 콘텐츠가 고객의 PC에 일단 로딩이 된 다음에는 웹 서버에 Ajax(비동기) 호출을 통해 데이터를 받아온 후 기존 DOM을 갱신하여 화면 정보를 갱신시키는 개발 방법이다.
이 방법을 통하면 백엔드 개발자가 json과 같은 데이터 기반 응답만 하게 되므로 더 간단한 웹개발이 가능해 진다.
프론트엔드 개발자는 다양하고 풍부한 사용자 경험을 제공하는 웹 애플리케이션 개발이 가능해졌다.
EmpForm.html 예제
다음과 같은 페이지를 테이블을 사용해 구현해 보자
<!IDOCTYPE html>
<html>
<head>
<title>처음만든 HTML문서</title>
</head>
<body>
<form action="#" method="post">
<table border="0" align="left" width="300" sellspacing="3">
<tr>
<h2>Emp 정보</h2>
</tr>
<tr>
<td>사원번호 : </td>
<td><input type="text" id="empno" title="성" class="input_txt"></td>
</tr>
<tr>
<td> 이름:</td>
<td> <input type="text" id="empnm" title="성" class="input_txt"></td>
</tr>
<tr>
<td> 성별: </td>
<td><input type="radio" name="gender" value="남" checked><label for="radio_s">남자</label>
<input type="radio" name="gender" value="여"><label for="radio_k">여자</label>
</td>
</tr>
<tr>
<td> 직업: </td>
<td><input type="text" id="emp" title="성" class="input_txt"></td>
</tr>
<tr>
<td> 상사: </td>
<td><select style="width: 100px;">
<option value="7369">7369</option>
<option value="7499">7499</option>
<option value="7521">7521</option>
<option value="7566">7566</option>
<option value="7654">7654</option>
<option value="7698">7698</option>
</select></td>
</tr>
<tr>
<td>입사일 : </td>
<td><input type="text" id="hiredate" title="입사일" class="input_txt" placeholder="2012-01-01"></td>
</tr>
<tr>
<td> 급여:</td>
<td> <input type="text" id="sal" title="급여" class="input_txt"></td>
</tr>
<tr>
<td> 커미션:</td>
<td> <input type="text" id="com" title="커미션" class="input_txt"></td>
</tr>
<tr>
<td> 부서번호: </td>
<td><select style="width: 100%;">
<option value="10 ACCOUNTING NEWYORK">10 ACCOUNTING NEWYORK</option>
<option value="20 RESEARCH DALLAS">20 RESEARCH DALLAS</option>
<option value="30 SALES CHICAGO">30 SALES CHICAGO</option>
<option value="40 OPERATING BOSTON">40 OPERATING BOSTON</option>
</select></td>
</tr>
<tr>
<td colspan="2" align="center"">
<input type="submit" value="저장"><input type="reset" value="취소">
</td>
</tr>
</table>
</form>
</body>
</html>
한걸음씩 뚜벅뚜벅