JavaScript 준비
jsp내에서 댓글에 대한 처리는 하나으 ㅣ페이지 내에서 모든 작업이 이루어지기 때문에 조금 복잡하게 느껴질수 있다.
(CRUD + 페이징)
앞으로 계속사용될 JS를 모듈화
Ajax를 이용하는 경우에는 jQuery의 함수를 이용해서 너무나 쉽게 처리할 수 있기 때문에 많이 사용함.
그런데 이곳저곳 많이쓰다보니 이벤트처리, DOM처리 등등 마구섞여 유지보수가 힘들 수 있음.
그래서 하나의 모듈처럼 구성하는 방식을 이용한다.
webapp 내 resource 폴더 에 js폴더 내 reply.js 파일을 작성
지금은 아무기능없이 간단히 동작하는 코드만을 넣어 확인해보자
console.log("확인");
var relyService= {};그리고 기존에 만들었던 jsp 파일이있는데 거기와 연결을 해보자
필자는 기존의 프로젝트에있는 게시글을 확인하는 기능인 "Get" 페이지로 테스트를 해보겠다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@include file="../include/header.jsp"%>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Board Read</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">Board Read Page</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-group">
<label>Bno</label> <input class="form-control" name='bno'
value='<c:out value="${board.bno }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>Title</label> <input class="form-control" name='title'
value='<c:out value="${board.title }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>Text area</label>
<textarea class="form-control" rows="3" name='content'
readonly="readonly"><c:out value="${board.content}" /></textarea>
</div>
<div class="form-group">
<label>Writer</label> <input class="form-control" name='writer'
value='<c:out value="${board.writer }"/>' readonly="readonly">
</div>
<%-- <button data-oper='modify' class="btn btn-default">
<a href="/board/modify?bno=<c:out value="${board.bno}"/>">Modify</a></button>
<button data-oper='list' class="btn btn-info">
<a href="/board/list">List</a></button> --%>
<button data-oper='modify' class="btn btn-default">Modify</button>
<button data-oper='list' class="btn btn-info">List</button>
<%-- <form id='operForm' action="/boad/modify" method="get">
<input type='hidden' id='bno' name='bno' value='<c:out value="${board.bno}"/>'>
</form> --%>
<form id='operForm' action="/boad/modify" method="get">
<input type='hidden' id='bno' name='bno'
value='<c:out value="${board.bno}"/>'> <input
type='hidden' name='pageNum'
value='<c:out value="${cri.pageNum}"/>'> <input
type='hidden' name='amount' value='<c:out value="${cri.amount}"/>'>
<input type='hidden' name='keyword'
value='<c:out value="${cri.keyword}"/>'> <input
type='hidden' name='type' value='<c:out value="${cri.type}"/>'>
</form>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-body -->
</div>
<!-- end panel -->
</div>
<!-- /.row -->
<script type="text/javascript" src="/resources/js/reply.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var operForm = $("#operForm");
$("button[data-oper='modify']").on("click", function(e) {
operForm.attr("action", "/board/modify").submit();
});
$("button[data-oper='list']").on("click", function(e) {
operForm.find("#bno").remove();
operForm.attr("action", "/board/list")
operForm.submit();
});
});
</script>
<%@include file="../include/footer.jsp"%>
이전에 만든 이벤트 처리 바로 위쪽으로 추가한다.
reply.js가 정상적으로 동작하는 지를 확인하기 위해 브라우저에서
http://localhost:8080/board/get?bno=1 를 검색했다. (1번 게시글을 불러오는 URI)
개발자도구를 통해 정상적으로 작동되는것을 확인 할 수 있고
정상적으로 로딩을 하고 있는지 확인했다.
모듈구성하기
모듈 패턴은 쉽게 말해서 JAVA의 클래스 처럼 JS를 이용해 메서드를 가지는 객체를 구성하는 것이다.
모듈 패턴은 JS의 즉시 실행함수와 {}를 이용해서 객체를 구성한다.
테스트를 마친 js파일을 수정하도록하자
console.log("댓글의 모듈이 시작됩니다~~~~.......");
var replyService = (function() {
return {name:"AAA"};
})();동일하게 reply.js 파일을 수정한 것이다.
js실행 즉히 실행함수는 ()안에 함수를 선언하고 바깥쪽에서 실행한다.
즉시 실행함수는 함수으 ㅣ실행 결과가 바깥쪽에 선언된 변수에 할당됨
위의 코드는 replyService라는 변수에 name이라는 속성에 AAA라는 속성값을 가진 객체가 할당된다.
var replyService = (name) AAA
그리고 이렇게 얻어진 값을 jsp에서 처리할 수 있도록 앞서 작성한 get.jsp파일에
<script type="text/javascript">
$(document).ready(function() {
console.log(replyService);
});
</script>를 추가하여 정상적으로 콘솔로 replyService가 찍히도록 해보자
이것이 정장석으로 동작이 되는지 확인해보자
이상없이 정상 적으로 AAA값을 얻어왔음을 알 수있다.
reply.js 등록처리
정상적으로 모두 작성되는 것을 확인 하였으면 js를 통해 등록처리하는 것을 해보자
모듈패턴은 즉시 실행하는 함수 내부에서 필요한 메서드를 구성해서 객체를 구성하는방식으로 하겠다.
reply.js에
console.log("댓글의 모듈이 시작됩니다~~~~.......");
var replyService = (function() {
function add(reply, callback){
console.log("reply!!");
}
return {add:add};
})();로 수정하곘다. 왜 이작업을 하냐면 add라는 메서드를 정상적으로 존재하는 형태로 불러오는지를 봐야한다.
정상적으로 모듈이 시작하는 것을 마지막으로 확인을 하였다.
그럼 본격적으로 AJAX를 이용해보자!
console.log("댓글의 모듈이 시작됩니다~~~~.......");
var replyService = (function() {
function add(reply, callback, error) {
console.log("add reply...............");
$.ajax({
type : 'post',
url : '/replies/new',
data : JSON.stringify(reply),
contentType : "application/json; charset=utf-8",
success : function(result, status, xhr) {
if (callback) {
callback(result);
}
},
error : function(xhr, status, er) {
if (error) {
error(er);
}
}
})
}
return{
add:add
}
})();reply.js 내에 add 함수는 Ajax를 이용해서 POST 방식으로 호출하는 코드를 작성했다.
add() 메서드에서 주의깊게 봐야하는 것은 데이터 전송타입이 'application/json; charset=utf-8'방식으로 전송한다는 점과 파라미터로 callback과 error를 함수로 받을 것이라는 점
만일 Ajax호출이 성공하고 callback 값으로 적절한 함수가 존재한다면 해당 함수를 호출해서 결과를 반영하는 방식.
JS는 특이하게도 함수의 파라미터 개수를 일치시킬 필요가 없기 때문에 callback이나 error와 같은 파라미터는 필요에 따라서 작성
reply.js를 이용하는 get.jsp에서 테스트를 위해 replyService.add()를 호출해보자
<script>
console.log("===============");
console.log("JS TEST");
var bnoValue = '<c:out value="${board.bno}"/>';
replyService.add(
{
reply : "JS Test",
replyer : "tester",
bno : bnoValue
}, function(result) {
alert("RESULT: " + result);
});
</script>get.jsp 내부에서는 Ajax호출은 replyService라는 이름의 객체에 감추어져 있다.
그래서 필요한 파라미터만 전달하는 형태로 간결하게 만들었다.
replyService의 add()에 던져야 하는 파라미터는 js의 객체 타입으로 만들어 전송, Ajax전송 결과를 처리하는 함수를 파라미터로 통째로 같이 전달한다.
reply = 댓글내용,
replyer = 작성자
그리고 다시 http://localhost:8080/board/get?bno=1를 실행해보자
프로젝트를 Tomcat에서 실행하고 결과를 확인해보면 DB에 정상적으로 댓글이 추가 되었다.
ReplyVO: ReplyVO(rno=null, bno=1, reply=JS Test, replyer=tester, replyDate=null, updateDate=null)
서버세서는 Json 데이터가 ReplyVO타입으로 제대로 변환되는 것을 볼 수 있습니다.
댓글의 목록 처리
댓글 등록이 정상적으로 처리 되었다면 다음 단계에서는 해당 게시물에 있는 댓글의 젠처 목룍을 가져오는 것을 하겠다.
댓글 목록은 최종적으로 페이징 처리까지 되어야 한다. 그런데 우선적으로 댓글부터 가져오는것 부터 하자!
프로젝트가 Tomcat상에서 실행되고 있다면
replies/pages/게시물번호/페이지번호.xml
또는
replies/pages/게시물번호/페이지번호.json 형태로 데이터를 먼저 확인 가능하다.
최근 수정과정까지 했었던
http://localhost:8080/replies/pages/8/1.xml 로 검색해보겠다.
getJSON()활용
reply.js에서는 Ajax호출을 담당하므로, jQuery의 getJSON() 을 이용해서 처리 할 수 있다
function getList(param, callback, error) {
var bno = param.bno;
var page = param.page || 1;
$.getJSON("/replies/pages/" + bno + "/" + page + ".json",
function(data) {
if (callback) {
callback(data);
}
}).fail(function(xhr, status, err) {
if (error) {
error();
}
});
}getList()는 param이라는 객체를 통해서 필요한 파라미터를 전달받아 JSON목록을 호출합니다. JSON형태가 필요하므로 URL호출 시 확장자를 .json 으로 요구한다.
댓글 등록과 마찬가지로 get.jsp 에는 해당 게시물의 모든 댓글을 가져오는지 확인하는 코드를 작성하자.
replyService.getList({
bno : bnoValue,
page : 1
}, function(list) {
for (var i = 0, len = list.length || 0; i < len; i++) {
console.log(list[i]);
}
});리스트의 길이를 받아 반복문을 돌리고 콘솔로그를 찍는 것으로 했다.
http://localhost:8080/board/get?bno=8
내가 좋아하는 8번으로 계속 테스트해보겠다.
그동안 실험했던 글들이 떳다! 수정했던것~ JS 테스트 까지 모두 이상없이 나왔다
등록, 조회 성공했으니 삭제, 수정이 남았다. 화이팅
댓글 삭제와 갱신
댓글 삭제는 DELETE 방식을 통해서 해당 URL을 호출하는 것뿐이므로 그다지 어려운 점은 없다.
reply.js에서 remove()라는 함수를 아래와 같이 추가한다.
function remove(rno, callback, error) {
$.ajax({
type : 'delete',
url : '/replies/' + rno,
success : function(deleteResult, status, xhr) {
if (callback) {
callback(deleteResult);
}
},
error : function(xhr, status, er) {
if (error) {
error(er);
}
}
});
}그리고 꼭 return 에 remove : remove는 잊지말자!
return {
add : add
getList : getList,
remove : remove,
};삭제 메서드는 DELETE방식으로 데이터를 전달하므로 $. ajax() 이용해서 구체적으로 type속성을 DELETE로 지정했다.
그리고 테스트를 위해
get.jsp 파일안에있는 Add, getList 부분은 주석 및 삭제처리하고 삭제기능을 추가하겠다.
<script>
console.log("===============");
console.log("JS TEST");
var bnoValue = '<c:out value="${board.bno}"/>';
//for replyService add test
/* replyService.add(
{reply:"JS Test", replyer:"tester", bno:bnoValue}
,
function(result){
alert("RESULT: " + result);
}
); */
//reply List Test
replyService.getList({
bno : bnoValue,
page : 1
}, function(list) {
for (var i = 0, len = list.length || 0; i < len; i++) {
console.log(list[i]);
}
});
//8번 댓글 삭제 테스트
replyService.remove(14, function(count) {
console.log(count);
if (count === "success") {
alert("REMOVED");
}
}, function(err) {
alert('ERROR...');
});
</script>우선 스크립트 중간점검을 위해 싹다 붙였다. 조회는 나중에 삭제된 결과를 얻기위해 살려는 놨다.
삭제할 14번 댓글을 삭제해보겠다. 1번 게시글의 14번 댓글 오케이!
http://localhost:8080/board/get?bno=1 로 다시 실행했다. (1번 게시글 조회를 하기위해 )
삭제는 성공했다.
XML로도 확인된다.
오라클도 1이 14번이 삭제되어 4가 첫번째로 올라왔다.
삭제를 좀 민감하게 한이유는 모든 데이터가 날라갈수도, 엉뚱한게 날라갈 수도, 삭제가 안되었는데 삭제가 되었다고 뜰때고있고,,, 그래서 좀 민감하게 확실하게 했다.
댓글 수정
댓글 수정은 수정하는 내용과 함께 댓글의 번호를 전송한다.
댓글의 내용은 JSON 형태로 전송하기 때문에 댓글 등록과 유사한 부분이 많다.
function update(reply, callback, error) {
console.log("RNO: " + reply.rno);
$.ajax({
type : 'put',
url : '/replies/' + reply.rno,
data : JSON.stringify(reply),
contentType : "application/json; charset=utf-8",
success : function(result, status, xhr) {
if (callback) {
callback(result);
}
},
error : function(xhr, status, er) {
if (error) {
error(er);
}
}
});
}잊지말고 return에도 추가하자...update : update ...
replyService를 이용하는 get.jsp 에서는 다음과 같은 방식으로 사용하게 된다.
댓글 번호는 데이터베이스에 존재하는 댓글의 번호를 이용해야한다.
댓글은 수정하는 내용이 댓글 내용 밖에 없지만 JS 객체로 처리하는 방식을 이용한다.
//15번 댓글 수정
replyService.update({
rno : 15,
bno : bnoValue,
reply : "15번 댓글이 수정되었다~~~!"
}, function(result) {
alert("수정 완료...");
});JSP파일수정완료했고
15번 내용을 수정하기전
셋팅은 정상적으로 되있고 동일하게
15번 댓글이있는 http://localhost:8080/board/get?bno=1 를 통해 테스트해보겠다.
수정도 마찬가지로 삭제기능처럼 예민하게 했다. 같은이유로!
말도많고 탈도많았다. 엄청난 오류가 있었다. 그런데 로직에 문제가아닌 대부분 오탈자였다.
'Spring공부 > 1-REST' 카테고리의 다른 글
| REST방식(8)-댓글페이징처리 (0) | 2021.10.11 |
|---|---|
| REST방식(9)-이벤트처리 (0) | 2021.10.08 |
| REST방식(7)-Ajax댓글처리 (2) | 2021.10.07 |
| REST방식(6)-Ajax댓글처리 (2) | 2021.10.07 |
| REST방식(5) (0) | 2021.10.07 |
댓글