전날 것 복습
-
index.jsp->tables.jsp로 갈 때a href을 통한GET요청으로 서버에 요청을 할 수 있다.
<a href="<%=request.getContextPath()%>/board_servlet?pagecode=B001"> -
JSP내에 자바 코드를 넣는다면, View관련(WEB) 로직만 있어야하지, 도메인 관련 로직이 들어가면 안된다.
- 즉,JSP에서 바로DAO를 호출하면 안된다.- 뷰에서 도메인을 알게되면 도메인 로직의 변화에 직접적으로 뷰가 변하게 된다.
- 도메인 로직을 변화시키는 순간 뷰 또한 신경써줘야하기에, 유지보수가 어렵다.
- 뷰에서 도메인을 알게되면 도메인 로직의 변화에 직접적으로 뷰가 변하게 된다.
-
JSP에서GET요청 -><a href>,
POST요청 -><form method="post"> -
동일한 서블릿 주소 및 동일한 HTTP 메소드를 공유하는 서블릿의 경우,
pagecode와 같은 값을 통해 어떤 페이지에서부터 요청이 왔는지 분류해야한다.
-form태그에는<input type="hidden">으로 전송할 수도 있고
-<a href="url">의url내에 쿼리 스트링을 통해 전달할 수 있다.
- 이 때,GET요청의 경우 전송할 수 있는 데이터의 양이 제한되기에 전송할 데이터가 많은 경우POST요청을 이용해야한다. -
페이지가 처음 로드되어, 다른 페이지의 서블릿에 대한 요청으로부터 넘어와야할 데이터가 없는 경우 ( ex. JSP 내장객체
session,request와 같은 객체에 대한getAttribute()메서드로null데이터에 접근하려 하는 경우, 뷰 렌더링 과정에서 NPE가 발생할 수 있다. 이런 경우를 대비해서 해당 객체를 통해 참조한 값이null인지 아닌지를 체크해주어야 한다. ) -
한번 더 강조하지만,
JSP에서DB를 호출해야할 일이 있으면 무조건Servlet을 통해 요청하도록 해야한다.
- 뷰 자체가 도메인 로직을 속속들이 알아야하기에캡슐화,추상화에 위배된다. 또한, 도메인 로직의 변경에 대한 유연한 대처가 어려워 변경의 전파 범위가 크다. 유지보수가 어렵다.
-
BE 개발자가 해야하는 일의 범위에 대해서..
- 퍼블리셔가HTML+CSS을 작성해서 주면JSP로 바꿔준다.
- 이 때, 어떤 데이터가form,a href을 통해 전달될지 생각하고 설계한다.
- 해당 요청을 받을 서블릿을 설계하고 개발한다. (URL Pattern+HTTP Method에 따른doXXX()을 설계한다. )
- 각 도메인 영역에 맞는 DAO를 설계하고 구현한다.
로그인 / 로그아웃 기능
- 로그아웃 시 -> Browser (
JSESSIONID) 아이디를 통해 ( = 이건 브라우저가 보내준다. )
a href(doGet()-> 에서request.getSession()으로 브라우저 아이디를 가져오고,session.invalidate()를 통해 세션
DB에 가야한다면
- 무조건
Controller ( Servlet )거쳐야한다는 것은 생각 꼭 해야함.
sendRedirect vs forward
-
DB에 Access하지 않고 화면 전환만 일어나는 경우
redirect=>response.sendRedirect("xxx.jsp)를 사용한다. -
DB에 Access한 뒤에 데이터를 담아 ( 원시값 혹은 객체 어떤 것이던 ) 화면에 뿌려줄 때,
forward=>request.getRequestDispatcher("xxx.jsp");를 사용rd.forward(request, response);를 통해 데이터를 담아 뷰 단에 넘겨준다.
HTML을 동적으로 제어해줘야하는 요구사항이 발생함.
<!-- tables_detail.jsp -->
<form id="form">
<input type="hidden" name="pagecode" id="pagecode">
<tr>
<th>글쓴이</th>
<td><input type="text" name="title" size="60" value="<%=bvo.getRegId()%>"></td>
</tr>
<tr>
<th>작성일</th>
<td><textarea name="contents" cols="80" rows="6" ><%=bvo.getContent()%></textarea></td>
</tr>
<tr>
<td colspan=2 align="center">
<a class="btn btn-primary btn-block" id="updateBtn">수정</a>
<a class="btn btn-primary btn-block" id="deleteBtn">삭제</a>
<a class="btn btn-primary btn-block" id="listBtn">목록</a>
</td>
</form>-
이렇게 하나의
form태그에 대해 수정, 삭제, 목록과 같은 여러 버튼이 있을 때,
버튼을 누를 때마다pagecode가 달라지거나, 다른 데이터를 보내거나,POST요청이 아닌GET요청을 보내야하는 등의 요구사항이 있는 상황이 있다. -
pagecode구분을 위해input type="hidden" name="pagecode" value="..."의 데이터를 보내더라도, 수정/삭제/목록 각각에 대한 pagecode 값이 변해야하기에, 이런 방식으로는 해결할 수 없다. -
javascript를 통해 이 문제를 해결할 수 있다.
-HTML랜더링 후javascript를 통해 동적으로 HTML을 조작할 수 있기 때문이다.
JavaScript 입문
-
<script>,</script>태그 사이에 JS 코드를 넣을 수 있다. -
<script>문은
- 1.<head>,</head>사이에 넣거나<body>,</body>사이에 넣을 수 있다.
-
JS Library는
- 1. 네트워크 방식인 CDN ( Content Delivery Network )으로 HTML 코드 안으로 가져올 수 있고<script src="${js cdn domain}">- 직접 JS 코드를 다운로드 받아
webapp안에JavaScript코드를 저장하기 위한 디렉토리 (ex.js)를 만들어 그 안에 넣어둔 뒤에<script src="../../../my.js">와 같이 HTML 코드 안으로 가져올 수 있다.
- 직접 JS 코드를 다운로드 받아
cf. css 간단 정리
-
<style>,</style>사이에 CSS 코드를 넣을 수 있다. -
<link href=..>을 통해 HTML 안에 css 문을 가져올 수 있다. -
<style>문은
- 1.<head>,</head>사이에 넣을 수 있다.
- CSS는
- 1. 네트워크 방식인 CDN ( Content Delivery Network )으로 가져올 수 있고<link href="${css cdn domain}" rel="stylesheet">- 직접 CSS 코드를 다운로드 받아
webapp안에css코드를 저장하기 위한 디렉토리 (ex.css)를 만들어 그 안에 넣어둔 뒤에<link href="../../../my.css">와 같이 HTML 코드 안으로 가져올 수 있다.
- 직접 CSS 코드를 다운로드 받아
jQuery
-
HTML내의 요소를 간단하게 조작하기 위한 JS Library -
HTML의 클라이언트 사이드 조작을 (단순화)하도록 설계된 크로스 플랫폼의 (자바스크립트 라이브러리) ( ex.JS-> for문,jQuery-> forEach문 ) -
jQuery문법 ( 조건문, 반복문 )과ajax문법을 다룰 줄 알아야한다. -
jQuery문법은$을 사용하고, 이를 사용하기 전에 jQuery를<script src="https://code.jquery.com/jquery-3.7.1.js></script>와 같이 cdn 방식으로던, 직접 코드를 다운로드 받아 로컬 디렉토리에 저장하는 방식으로 임포트 해줘야한다.
jQuery와 #{id}, .{class}
-
jQuery는HTML요소에 대해 접근하여 HTML을 조작한다. -
이 때 해당 요소들을 지정해주는 것이 필요한데,
대표적으로id속성과class속성을 사용한다. -
id에 대해서는#을 사용하고,class속성에 대해서는.을 사용하여 접근한다. -
특히,
id같은 경우 HTML 내에서 고유하다. 현재는HTML5라서id속성이 여러개 겹쳐도 오류가 나지 않았지만,HTML4이전에는id속성값이 여러 개인 경우 오류가 났다고 한다.
jQuery를 이용하여 클라이언트 사이드에서 수정, 삭제, 목록 기능 구현
<td colspan=2 align="center">
<a class="btn btn-primary btn-block" id="updateBtn">수정</a>
<a class="btn btn-primary btn-block" id="deleteBtn">삭제</a>
<a class="btn btn-primary btn-block" id="listBtn">목록</a>
</td>
</form>
</table>
<script>
$("#updateBtn").click(function(event) {
event.preventDefault();
// 폼 속성 설정
$("#form").attr("method", "post");
$("#form").attr("action", "/board_servlet");
// board_seq 값을 가져와서 숨겨진 input 태그로 추가
var seq = $("#board_seq").text();
if(seq) {
var seqInput = $("<input>").attr({
type: "hidden",
name: "seq",
value: seq
});
$("#form").append(seqInput);
}
// pagecode 설정
$("#pagecode").val("B003");
// 폼 제출
$("#form").submit();
});
$("#deleteBtn").click(function(event){
event.preventDefault();
$("#form").attr("method", "post");
$("#form").attr("action", "/board_servlet");
// board_seq 값을 가져와서 숨겨진 input 태그로 추가
var seq = $("#board_seq").text();
if(seq) {
var seqInput = $("<input>").attr({
type: "hidden",
name: "seq",
value: seq
});
$("#form").append(seqInput);
}
$("#pagecode").val("B004");
$("#form").submit();
});
$("#listBtn").click(function(){
location.href = "/board_servlet";
});
</script>- 수정/삭제의 경우
<form>태그와POST메서드를 활용하여 데이터를 보내주되,
버튼을 누를 때마다pagecode값을 다르게 하였다.
- 동일한 서블릿과HTTP Method를 사용하기에,pagecode를 구분해주어야했기 때문이다.
