초보의 Servlet 개발 jstl, el 그리고 jquery
그 옛날 개발을 좀 알고 넘어가려 스크립트릿을 사용하고 dom(document)을 사용하였지만 만들고도 보기는 진짜 싫다. 그래서 jstl, el, jquery를 이용해 조금 덜 보기 싫게 만들어보자.
1. 목표
이전 글에서 개발한 JSP를 jstl, el, jquery로 변경하자.
라이브러리 다운은 이전 글을 참고하자.(oldev.tistory.com/7)
- jstl, el, jquery 라브러리를 추가하자.
- 그리고 바꾸자...
2. 메인 수정 (index.jsp)
메인은 jstl을 사용할 게 없다. jquery만 추가해주고 함수를 고치자.
소스코드 :
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>olDevServlet Hello World!</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p> 여기가 Main!!</p>
<form id="indexFrm" name="indexFrm">
<a href="javascript:void(0);" id="btnMberListView" >회원목록</a>
</form>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#btnMberListView").click(function() {
var frm = $("#indexFrm");
frm.attr("method", "post");
frm.attr("action", "/mberList.do");
frm.submit();
});
});
</script>
</html><a> 태그에 onclick 이벤트에 직접 함수를 설정했던 것을 id를 부여하고 이벤트를 붙여준다 이게 끝인데... 참으로 간략하다 그래도 하나만 짚어보자.(사실 안 바꿔도 되는데...)
- $ (jquery)
$ 의미는 jquery 차체를 지칭한다. script 첫 번째 줄을 살펴보면 jquery가 (document). 준비되면 익명의 함수를 쓰겠다. 즉 jquery를 사용하겠다는 선언인 것이다. 이건 문법이고 벗어날 수 없다. 고민이 필요하겠는가? 이거 안 지키면 못쓰는데? jquery는 저 $(document). ready(.... 외에도 DOM이 준비되는 시점에 연결될 함수를 여러 가지 방법으로 제공하는데 그거 다 나열해봐야 jquery 사이트만큼 설명할 수 있을까? 가서 보는 걸로 하자... 근데 굳이 $를 짚어 내는 이유는 앞서 이야기 한대로 DOM 객체에 접근할 때 $로 시작해야 하기 때문에 '아! $로 jquery 사용한다고 선언하고 DOM을 갖다 쓰는구나!'라고 꼭 기억하자. 자꾸 DOM, DOM 거리는데 document.getElementById("...")로 태그에 접근하고 그놈을 찾아서 값을 주거나 따위를 하지 않았던가? 그 document를 $ 하나로 접근하는 거다. 뭐 $안에 #으로 접근하면 id이고.(점)으로 접근하면 class이고 많지만 어차피 계속 쓸 거 만들면서 알아가자.
그래서 위 소스코드의 내용은 jquery야 document가 준비되면 id가 btnMberListView인 녀석에게 click 이벤트를 붙여놔라고 설정하는 게 되는 거고 이렇게 $("#btnMberListView"). click(function() {... 이벤트를 붙여 두었기에 클릭하면 Submit 처리를 해주게 된다.
jquery API 사이트 : https://api.jquery.com
jQuery API Documentation
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t
api.jquery.com
3. 회원 목록 수정 (mberListView.jsp)
이녁석은 jstl을 써야 해서 jstl core와 jquery 둘 다 설정했다.
소스코드 :
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<body>
<form id="mberListFrm" name="mberListFrm" method="post">
<table style="border:1px solid blue; width: 90%;">
<tr>
<td style="border-bottom:1px solid blue;">회원 일련번호</td>
<td style="border-bottom:1px solid blue;">회원 아이디</td>
<td style="border-bottom:1px solid blue;">회원 비밀번호</td>
<td style="border-bottom:1px solid blue;">회원 이름</td>
<td style="border-bottom:1px solid blue;">회원 휴대폰</td>
<td style="border-bottom:1px solid blue;">비고</td>
<td style="border-bottom:1px solid blue;">등록자</td>
<td style="border-bottom:1px solid blue;">등록일시</td>
<td style="border-bottom:1px solid blue;">수정자</td>
<td style="border-bottom:1px solid blue;">수정일시</td>
</tr>
<c:forEach var="itm" items="${result}" varStatus="idx">
<!-- jstl core 땡기고 prefix="c"를 주었기 때문에 c:xxx 으로 접근 해야함 (c:하고 ctrl + space 하면 목록이 나오므로 찾아서 쓰면됨) -->
<c:choose>
<c:when test="${itm ne null and not empty itm}">
<tr style="background: lightblue;">
<td>${itm.mberSn}</td>
<td>${itm.mberId}</td>
<td>${itm.mberPwd}</td>
<td>
<a href="javascript:void(0);" onclick="fnDetailPage('${itm.mberSn}')">${itm.mberNm}</a>
<a href="javascript:void(0);" id="btnTest${idx.index}" >테스트${idx.index}</a>
</td>
<td>${itm.moblPhon}</td>
<td>${itm.rm}</td>
<td>${itm.regiSn}</td>
<td>${itm.regiDt}</td>
<td>${itm.updtSn}</td>
<td>${itm.updtDt}</td>
</tr>
</c:when>
<c:otherwise>
<tr style="background: lightgray;">
<td colspan="10">검색된 데이터가 없습니다.</td>
</tr>
</c:otherwise>
</c:choose>
</c:forEach>
<tr>
<td colspan="10">
<div align="right">
<a href="javascript:void(0);" id="goMain" style="text-decoration:none; border:1px solid; background-color: lightgreen;">메인으로</a>
</div>
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
$(document).ready(function(){
// 메인 화면으로 이동하기
$("#goMain").click(function() {
location.href = "/";
});
// jquery로 괜히 이상한짓 해봄
$("[id^='btnTest']").click(function(){
// 굳이 내 부모 <td>의 부모인 <tr>을 찾아 나섬
var parentTr = $(this).parent().parent();
// 찾아낸 할아버지쯤 되는 <tr>의 index 0번째 <td> text를 내놔!
var tdMberSnText = parentTr.find("td").eq(0).text();
// 제대로 찾는지 얼럿한번 띄워봄
alert(tdMberSnText);
// 만들어둔 함수 호출함
fnDetailPage(tdMberSnText);
});
});
// Row에서 click은 function 주는게 편한데...
function fnDetailPage(mberSn) {
var mberSnInput = document.createElement("input");
mberSnInput.setAttribute("type", "hidden");
mberSnInput.setAttribute("name", "mberSn");
mberSnInput.setAttribute("value", mberSn);
var frm = document.getElementById("mberListFrm");
frm.appendChild(mberSnInput);
frm.action = "/mberDetail.do";
frm.submit();
}
</script>
이전에 설명처럼 반드시. jar를 추가하고 <%@ taglib.... uri="..../core"%>를 선언해주자. 너무 당연한 얘기겠지만 안 하면 못쓴다. 아무튼 이 녀석도 소스코드를 좀 살펴보도록 하자.
- jstl core
core는 이름부터가 중요할 것 같지 않은가? 이 눔을 젤 많이 쓴다. 왜냐면 for, if, swich 등등 기본적인 것들이 여기 다 들어있다. 당장에 필요한 건 core 뿐이라 core만 설정했지만 상단 링크된 글을 참조하면 뭐 이것저것 알 수 있을 것이고 대충 살펴보면 선언 시 preprefix="c"로 설정하였는데 하고 싶은 거 하면 된다. 다만 core라 보통 core의 첫 번째 알파벳 c로 설정하는 것이 국룰임. core 태그에서 여러 tag를 지원하고 tag명 역시 직관적이라 보면 아~ 하고 알 수 있다. 당장에 소스코드만 보더라도 <c:foreach>다 뭘 하겠는가? 당연히 loop 지... 다만 저 tag의 속성으로 들어간 녀석들이 뭐 저래? java for(확장 아님) 문이랑 비교를 한번 해보자.
java에서 반복문중 for(int i = 0 ; i < item.size() ; i++){...}와 같은 구문으로 생각하면 되는데 요기서 가운데 들어가는 loop 대상이 items고 저 result는 Servlet에서 request.setAttribute로 설정한 값이다. 그럼 이게 뭐해주겠나? request.getAttribute 해서 type casting 해서 item.size() 해주지 않을까? 어떻게 찾는지는 신기하긴 한데... 아무튼 다음은 int i = 0인데 이게 varStatus이고 자동 증가를 포함하고 있다. loop 돌리는데 index 확인해야 할 때 있잖음? 그거 쓰라고 해둔 거임 그럼 var는? loop를 돌리면서 result에서 꺼내오는 각 Row 객체임 즉 해당 소스코드에선 List <Map <String, Object>> 이므로 Map을 꺼내줌. foreach 속성으로 소스코드에서는 세가지를 썼지만 다른것도 있다 하지만 loop 저거면 끝나는거 아닌가? ㅎㅎ 그리고 굳이 각 tag별로 이름이 직관적인데 왜 썼냐 하면... 혹시나 해서 예시로 하나 풀었어 본거니.. 넘어가도록 하자..;;
- el (expression language)
${...} <- 이렇게 감싸져 있는 애들이 el이다. 소스코드에 보면 아니 기껏 core tag 당겨놓고 ${itm ne null and not empty itm}처럼 el 안에서 논리 연산을 하네? 싶겠지만 지원하는 걸 어쩜? 써야지... el이 jsp 2.0 때 컨테이너에 들어갔고 어쨌고 뭐 그런 건 중요치 않다. Servlet에서 데이터를 담은 객체를 전달하면 ${...} 이 녀석이 받아준다는 거다. 근데 받기만 하는 것이 아니라 안에 값이 있니? 없니? 와 같은 논리 연산도 해준다가 핵심인데 소스코드의 <c:when test="${itm ne null and not empty itm}"> 부분을 보게 되면 test="어쩌고 저쩌고" 되어 있는 부분에(test는 boolean을 받는 변수라 생각하자) itm이 null과 not equal 하고 itm이 not empty 하면 즉 데이터 있으면 요기요! 하는데 논리 연산을 el에서 수행하고 결과 boolean을 test로 넘겨 tag가 판단할 수 있도록 해준다. 즉 <c:when test=" true or false">처럼 boolean 결과를 받는 문법을 가지는데 저 true or false에 el을 사용해 논리 연산한다. 그리고 expression language를 번역하면 표현 언어인데 이는 표현? 무엇을? 아! data를! 표현해주는 언어라 생각하자 논리 연산이 되는 걸 보니 표현도 논리적으로 해주나 보다. 뭐 그렇다는 거다...
풀어쓰다 보니 주저리주저리 글만 많은데 jstl과 el의 두녀석의 차이점을 보면 jstl이 반복문(for), 분기문(if) 등등 기본적인 코딩 문법이라면 el은 분기, 반복 등의 수행을 위한 논리 연산(boolean, true or false) 쪽이라 보면 될 것 같다. 만약 el을 안 쓰면 어떻게 하느냐? 스크립트릿 써야죠... 뭐...
이정도로 맛만보고 넘어가도록 하자 요즘 el, jstl 많이 쓰지도 않는다 이유는 Ajax call해서 inner html로 밀어넣는게 더 편하고 화면 깜빡임도 없다. 그래서 el, jstl은 필요에 따라 그때 그때 검색해서 사용하는게 좋다고 생각함.(뭐 딱히 검색할게 있는지도 모르겠음)
- jquery
$(do..). ready(... 내부를 보면 두 개의 이벤트 중 $("[id^='btnTest']"). click... 이놈은 jquery finder 예시용으로 만들어 둔 건데 문서 내에 id가 btnTest로 시작하는 모든 태그를 찾아 click 이벤트를 붙여주라는 의미인데 id인데 #이 아니네? 할 수 있겠지만 이를 jquery finder라 해서 문서 내에 태그를 찾는 다양한 방법 중 하나이다. 시작을 찾으니 끝나는 것도 찾을 수 있지 않겠는가? 있다.. 제공하는 finder는 API를 찾아보면 될 것이고 소스코드 주석 내용처럼 굳이 저런 건 할 필요 없으나 예시로 만들어 둔 것이니 참고만 하자.
4. 회원 상세 (mberDetailView.jsp)
회원 목록과 다를 바 없는데 소스코드나 슬쩍 봐주고 넘어가자.
소스코드 :
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<body>
<form id="mberDetailFrm">
<table style="border:1px solid blue;">
<tr>
<td style="border:1px solid blue;">회원 일련번호</td>
<td style="border:1px solid blue;">회원 아이디</td>
<td style="border:1px solid blue;">회원 비밀번호</td>
<td style="border:1px solid blue;">회원 이름</td>
<td style="border:1px solid blue;">비고</td>
</tr>
<c:choose>
<c:when test="${result ne null and not empty result}">
<tr>
<td style="border:1px solid blue;"><input type="hidden" id="mberSn" name="mberSn" value="${result.mberSn}">${result.mberSn}</td>
<td style="border:1px solid blue;">${result.mberId}</td>
<td style="border:1px solid red;"><input type="text" id="mberPwd" name="mberPwd" value="${result.mberPwd}"></td>
<td style="border:1px solid red;"><input type="text" id="mberNm" name="mberNm" value="${result.mberNm}"></td>
<td style="border:1px solid red;"><input type="text" id="rm" name="rm" value="${result.rm}"></td>
</tr>
</c:when>
<c:otherwise>
<td colspan="5">
검색 데이터가 없습니다.
</td>
</c:otherwise>
</c:choose>
<tr>
<td colspan="5">
<div align="right">
<a href="javascript:void(0);" id="mberListBack" style="text-decoration:none; border:1px solid; background-color: lightgreen;">목록</a>
</div>
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#mberListBack").click(function() {
var frm = $("#mberDetailFrm");
frm.attr("method", "post");
frm.attr("action", "/mberList.do");
frm.submit();
});
});
</script>
언급한 대로 같은 구조이다. Servlet에서 Return 받은 result를 el로 출력한 거 말고는 core 태그도 그대로 사용했고 이벤트 생성도 동일하다.
5. 실행
이전 소스코드와 동일한 화면이고 특별할 건 없지만 회원 목록에 추가한 jquery만 한번 보자.
목록에서 jquery로 굳이 하지 않아도 되는 코딩을 해두었는데 그 코딩된 부분을 클릭했을 때 현재 클릭한 MBER_SN을 얼럿으로 알려주고 상세로 이동하게 된다. 앞서 이야기 한대로 jquery 사용에 참고 정도만 하도록 하자.
- el 확인
기왕 보는 거 el이 어떻게 찍히는지 확인이나 한번 해보자.
<body>
<form id="mberListFrm" name="mberListFrm" method="post">
${result}
<table style="border:1px solid blue; width: 90%;">
<tr>
.....
</tr>
</table>
</form>
</body>
mberListView.jsp에 위와 같이 ${result}를 찍어보면
이미지와 같이 객체에 담겨있는 모든 데이터를 보여준다. Servlet으로부터 데이터를 전달했는데 뭘 보냈더라? 싶으면 이렇게 통으로 한번 찍어보고 첫 구문이 [...] 싸여 List로 들어왔는지 {...} 싸여 Map형 태인지 확인하고 꺼내 쓰면 되겠다. (간혹 본인이 뭘 보냈는지 뭐드라.. 하는 사람들 있는데 제발 그냥 한번 찍어봤으면....)
제목은 거창했으나 별 영양가는 내용들 뿐이네... 헐..; 그래도 목표대로 됐으니 된 듯?... 뭐 거창하게 jstl, el, jqeury를 나눠서 다뤄도 되겠지만 Servlet 개발함에 JSP는 데이터 출력하고 Parameter 넘겨주는 정도면 충분하다. 그럼 뭐하러 썼냐 스크립트릿은 진짜 못써먹겠다.. 지저분해서.; 근데 여기서 하나 알고 넘어 갈게 컴파일되면 어차피 class 되겠지만 일부를 Servlet으로 옮기고 일부를 jstl, el로 변경하면 JSP에서 직접적인 java 코딩을 사용하지 않아도 된다는 거다. 근데 굳이 이렇게 안해도 스크립트릿으로 다 가능한 표현인데 왜 쓰면 안되느냐? 모델 1같이 페이지 중심 설계하면 JSP에 비즈니스를 덕지덕지 붙이기 위해서 어쩔 수 없이 스크립트릿을 사용했는데 이게 3 Tire, MVC로 나뉘면서 비즈니스를 제거하고 완전한 표현만을 위한 즉 화면으로만 사용하기 위해서임 근데 웃긴게 저번에도 얘기했지만 화면으로 JSP 안 쓰면 그만이라 당연하게도 Servlet에 비즈니스 구현하고 호출해서 가져가! 하는 게 재사용성이 훨씬 좋다. 그래서 jstl, el을 권장하고 스크립트릿을 지양하는 것이다.
하.. 다음은 등록이나 만들어 보도록 하자! 끝!