Spring 페이지 무한스크롤

구현한 결과부터 보면 ( 기능에 초점을 뒀다.. 매끄럽지는 않다. )

구현 과정

1. 먼저 최초에 미리 정한 뿌려줄 갯수인, 20개의 게시물 리스트를 띄워준다.

경로는 /board/listAll

1-1. 쿼리는 MySQL에서 제공하는 'limit 시작, 몇개까지' 를 이용해서 20개를 뿌려주도록 한다.

1-2. (Mapper를 호출하는 DAO클래스, dao를 호출하는 Service 클래스는 생략하고, ) 컨트롤러에서 이 20개의 데이터를 DB로부터 받아와서 Model객체에 list라는 키 값으로 담은 후, View로 보낸다. 이때 메소드의 리턴 타입이 void이므로 해당경로 즉, board/listAll.jsp를 렌더링 하게된다.

1-3. 그러면 listAll.jsp에서는 jstl의 c:forEach문을 이용하여 받아온 list를 순회하며 적절히 게시물을 뿌려준다.
이때 속성 중, 'data-' 로 시작하는건 개발자가 임의로 필요시에 이용할 수 있다. 난 나중에 해당 게시글의 bno값을 읽어올 필요가 있었기 때문에 추가해놓았다.

참고로 jstl쓰려면 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 를 추가해야한다.

그러면 이렇게 20개의 게시물이 화면에 뿌려진다. (길이상 잘림)

2. 이제 스크롤 이벤트에 따라 무한스크롤을 구현해주면 된다. 큰 그림은 아래와 같다.

근데 스크롤 다운일 때는 이후 게시물을 불러와야 되고, 스크롤업 할 때는 이전 게시물들을 뿌려줘야 하니까, 두 가지 경우의 수를 나눠서
생각해줘야 한다. 이건 현재 스크롤 좌표와 이전 스크롤 좌표 간의 차를 이용하여 구현했다. (아래 코드)

아무튼 다운스크롤 이벤트 발생 시, 화면에서 ajax를 이용하여 서버로 이 다음의 게시물 데이터를 요청하고, 그 게시물을 loop돌아서 적절한 html코드 문자열 형태로 만들어 주어서 원하는 곳에 데이터를 뿌려주는 것을 살펴보자.

먼저, 화면에 현재 뿌려진 데이터들 다음의 20개 데이터를 가져오려면, 서버에 요청을 할 때 현재 화면에 뿌려진 게시글 중 맨 마지막에 있는 bno값을 보내줘야한다. 그래서 아래와 같이 값을 갖고 있는다.

이제 ajax로 서버에 데이터를 요청하자. 서버로 요청할 때 담아 보내는 데이터도 JSON.stringify()를 이용해서 json형태 문자열로 보내고, 서버에서 리턴해주는 데이터도 JSON타입으로 받아올 것이기 때문에 datatype 속성에 'json' 이라고 명시해주어야 한다.
어쨌든 서버로 부터 데이터를 받아오는데 성공하면,

해당 리스트를 순회하면서 적절한 태그 문자열로 만들어주고,

-> 이때 리스트의 각 원소에 접근하려면 $(data).each(function(){
this;
});

이렇게 each문을 이용해서 this로 접근할 수 있다.

현재 뿌려져있던 게시물데이터들은 지워주고 ,

-> 이때 empty() 를 이용한다. jQuery.empty()하면 셀렉터 내의 모든 텍스트나 태그를 없애버린다.
jQuery API document

테이블의 헤더 부분 즉 제목이 달린 태그의 바로 밑 쪽에 위에서 만들 태그 문자열을 달아주면 된다.

-> jQuery.after(문자열) 을 이용한다.

이때 좀 주의할 점이 서버로 부터 받아오는 데이터의 유무 체크인데, data!=null 이라는 했더니 잘되지 않았다. 그 이유는 서버에서 값을 리턴할 때 @ResponseBody 을 이용해서 Json타입으로 던져주는데, 이때 아무것도 없는 것을 ""로 넘겨주는 것 같다. 따라서 data != "" 으로 데이터 유무를 체크해주었어야 했다.

자 그럼 이제 서버단에서 어떻게 처리하는지 보자.

브라우저에서 요청으로 온 JSON데이터를 객체로 자동으로 바인딩 시켜주는 @RequestBody 를 이용하여 bno를 멤버로 갖고 있는 BoardVO 객체를 통해 bno값을 바인딩 시키고,
자동으로 리턴 값을 JSON형태로 만들어주는 @ResponseBody 를 이용했다.

쿼리는 그냥 이후 20개 게시글 데이터 받아오는 것이다.

이때 JSON 데이터를 스프링에서 자동으로 처리해주도록 하려면 jackson-bind를 pom.xml에 추가해주어야한다.

마지막으로 생각할 것이 스크롤 다운하는 상태에서 새로운 데이터가 갱신되기 때문에 가장 위쪽의 게시물이 있는 위치로 스크롤을 이동해주어야 할 필요가 생긴다. 그래서 현재 뿌려져있는 td태그의 가장 첫번째를 선택하여 그것의 위치를 받아와서, 해당 위치로 스크롤을 이동시켜주었다.

이때 jQuery-UI를 이용하여 animate 효과를 줬다.

jQuery-UI는 jQuery 라이브러리 안에 없기 때문에 별도로 다운받아서 포함시켜주어야 한다.

- http://jqueryui.com/ 에 접속 후 우측에 Stable 버튼을 눌러서 다운.
- 다운 받은 파일을 압축해제 하고 jquery-ui.min.js 파일을 찾는다.
- 해당 파일을 추가로 로딩해서 사용하면 된다.
- <script type="text/javascript" src="jquery-ui.min.js"></script> 이런 방식

jquery-ui 설명 잘돼있는 페이지

어쨌든 화면 쪽의 총 코드는 아래와 같다. 끝!

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>

<div class="input-group-btn">
                    <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="box-body table-responsive no-padding">
              <table class="table table-hover">
                <tbody>
                <tr class="scrollLocation">
                  <th>BNO</th>
                  <th>TITLE</th>
                  <th>WRITER</th>
                  <th>REGDATE</th>
                  <th>VIEWCNT</th>
                </tr>
               
               
               	<c:forEach items="${list}" var="boardVO">
        			<tr class="listToChange">
        				<td class="scrolling" data-bno="${boardVO.bno}">
        					${boardVO.bno}
        				</td>
        				<td>${boardVO.title}</td>
        				<td>${boardVO.writer}</td>
        				<td>${boardVO.regdate}</td>
            			<td>${boardVO.viewcnt}</td>
        			</tr> 
				</c:forEach>

</tbody></table>
            </div>
            
          </div>
          
        </div>
      </div>

/*var result = '${msg}';
	
	 if(result="success"){
		alert(result);
		console.log(result);
	} */
	
	
	
	var lastScrollTop = 0;
	var easeEffect = 'easeInQuint';
	
	// 1. 스크롤 이벤트 발생
	$(window).scroll(function(){ // ① 스크롤 이벤트 최초 발생
		
		var currentScrollTop = $(window).scrollTop();
		
		/*  
			=================	다운 스크롤인 상태	================
		*/
		if( currentScrollTop - lastScrollTop > 0 ){
			// down-scroll : 현재 게시글 다음의 글을 불러온다.
			console.log("down-scroll");
			
			// 2. 현재 스크롤의 top 좌표가  > (게시글을 불러온 화면 height - 윈도우창의 height) 되는 순간
			if ($(window).scrollTop() >= ($(document).height() - $(window).height()) ){ //② 현재스크롤의 위치가 화면의 보이는 위치보다 크다면
	            
				// 3. class가 scrolling인 것의 요소 중 마지막인 요소를 선택한 다음 그것의 data-bno속성 값을 받아온다.
				//		즉, 현재 뿌려진 게시글의 마지막 bno값을 읽어오는 것이다.( 이 다음의 게시글들을 가져오기 위해 필요한 데이터이다.)
				var lastbno = $(".scrolling:last").attr("data-bno");
				
				// 4. ajax를 이용하여 현재 뿌려진 게시글의 마지막 bno를 서버로 보내어 그 다음 20개의 게시물 데이터를 받아온다. 
				$.ajax({
					type : 'post',	// 요청 method 방식 
					url : 'infiniteScrollDown',// 요청할 서버의 url
					headers : { 
						"Content-Type" : "application/json",
						"X-HTTP-Method-Override" : "POST"
					},
					dataType : 'json', // 서버로부터 되돌려받는 데이터의 타입을 명시하는 것이다.
					data : JSON.stringify({ // 서버로 보낼 데이터 명시 
						bno : lastbno
					}),
					success : function(data){// ajax 가 성공했을시에 수행될 function이다. 이 function의 파라미터는 서버로 부터 return받은 데이터이다.
						
						var str = "";
						
						// 5. 받아온 데이터가 ""이거나 null이 아닌 경우에 DOM handling을 해준다.
						if(data != ""){
							//6. 서버로부터 받아온 data가 list이므로 이 각각의 원소에 접근하려면 each문을 사용한다.
							$(data).each(
								// 7. 새로운 데이터를 갖고 html코드형태의 문자열을 만들어준다.
								function(){
									console.log(this);		
									str +=	"<tr class=" + "'listToChange'" + ">" 
										+	 	"<td class=" +  "'scrolling'" + " data-bno='" + this.bno +"'>"
										+			this.bno
										+		"</td>"
										+		"<td>" + this.title + "</td>"		
										+		"<td>" + this.writer + "</td>"
										+		"<td>" + this.regdate + "</td>"
										+		"<td>" + this.viewcnt + "</td>"
								 		+ 	"</tr>";
								 		
							});// each
							// 8. 이전까지 뿌려졌던 데이터를 비워주고, <th>헤더 바로 밑에 위에서 만든 str을  뿌려준다.
							$(".listToChange").empty();// 셀렉터 태그 안의 모든 텍스트를 지운다.						
							$(".scrollLocation").after(str);
						 		
						}// if : data!=null
						else{ // 9. 만약 서버로 부터 받아온 데이터가 없으면 그냥 아무것도 하지말까..
							alert("더 불러올 데이터가 없습니다.");
						}// else
		
					}// success
				});// ajax
				
				// 여기서 class가 listToChange인 것중 가장 처음인 것을 찾아서 그 위치로 이동하자.
				var position = $(".listToChange:first").offset();// 위치 값
				
				// 이동  위로 부터 position.top px 위치로 스크롤 하는 것이다. 그걸 500ms 동안 애니메이션이 이루어짐.
				$('html,body').stop().animate({scrollTop : position.top }, 600, easeEffect);
	
	        }//if : 현재 스크롤의 top 좌표가  > (게시글을 불러온 화면 height - 윈도우창의 height) 되는 순간
			
			// lastScrollTop을 현재 currentScrollTop으로 갱신해준다.
			lastScrollTop = currentScrollTop;
		}// 다운스크롤인 상태
		
		/*  
			=================	업 스크롤인 상태	================
		*/
		else{
			// up- scroll : 현재 게시글 이전의 글을 불러온다.
			console.log("up-scroll");

// 2. 현재 스크롤의 top 좌표가  <= 0 되는 순간
			if ($(window).scrollTop() <= 0 ){ // 
	            
				// 3. class가 scrolling인 것의 요소 중 첫 번째 요소를 선택한 다음 그것의 data-bno속성 값을 받아온다.
				//		즉, 현재 뿌려진 게시글의 첫 번째 bno값을 읽어오는 것이다.( 이 전의 게시글들을 가져오기 위해 필요한 데이터이다.)
				var firstbno = $(".scrolling:first").attr("data-bno");
				
				// 4. ajax를 이용하여 현재 뿌려진 게시글의 첫 번째 bno를 서버로 보내어 그 이전의 20개의 게시물 데이터를 받아온다. 
				$.ajax({
					type : 'post',	// 요청 method 방식 
					url : 'infiniteScrollUp',// 요청할 서버의 url
					headers : { 
						"Content-Type" : "application/json",
						"X-HTTP-Method-Override" : "POST"
					},
					dataType : 'json', // 서버로부터 되돌려받는 데이터의 타입을 명시하는 것이다.
					data : JSON.stringify({ // 서버로 보낼 데이터 명시 
						bno : firstbno
					}),
					success : function(data){// ajax 가 성공했을시에 수행될 function이다. 이 function의 파라미터는 서버로 부터 return받은 데이터이다.
						
						var str = "";
						
						// 5. 받아온 데이터가 ""이거나 null이 아닌 경우에 DOM handling을 해준다.
						// 이때 서버에서 값이 없으면 null을 던질줄 알았는데 ""를 던진다. 따라서 (data != null) 이라는 체크를 해주면 안되고, (data != "") 만 해주어야한다.
						// 이건아마 컨트롤러의 리턴타입이 @ResponseBody로 json형태로 던져지는데 이때 아마 아무것도 없는게 ""로 명시되어 날아오는것 같다.
						if(data != ""){
							
							//6. 서버로부터 받아온 data가 list이므로 이 각각의 원소에 접근하려면 each문을 사용한다.
							$(data).each(
								// 7. 새로운 데이터를 갖고 html코드형태의 문자열을 만들어준다.
								function(){
									console.log(this);		
									str +=	"<tr class=" + "'listToChange'" + ">" 
										+	 	"<td class=" +  "'scrolling'" + " data-bno='" + this.bno +"'>"
										+			this.bno
										+		"</td>"
										+		"<td>" + this.title + "</td>"		
										+		"<td>" + this.writer + "</td>"
										+		"<td>" + this.regdate + "</td>"
										+		"<td>" + this.viewcnt + "</td>"
								 		+ 	"</tr>";
								 		
							});// each
							// 8. 이전까지 뿌려졌던 데이터를 비워주고, <th>헤더 바로 밑에 위에서 만든 str을  뿌려준다.
							$(".listToChange").empty();// 셀렉터 태그 안의 모든 텍스트를 지운다.						
							$(".scrollLocation").after(str);
						 		
						}//if : data != ""
						else{ // 9. 만약 서버로 부터 받아온 데이터가 없으면 그냥 아무것도 하지말까..??
							
							alert("더 불러올 데이터가 없습니다.");
						}// else
	
					}// success
				});// ajax
				
				// 스크롤 다운이벤트 때  ajax통신이 발생하지 않을때 까지의 좌표까지 스크롤을 내려가주기. 
				var position =($(document).height() - $(window).height()) -10;
				
				// 이동  위로 부터 position.top px 위치로 스크롤 하는 것이다. 그걸 500ms 동안 애니메이션이 이루어짐.
				$('html,body').stop().animate({scrollTop : position}, 600, easeEffect);
				
	        }//if : 현재 스크롤의 top 좌표가  <= 0 되는 순간
		
			// lastScrollTop을 현재 currentScrollTop으로 갱신해준다.
			lastScrollTop = currentScrollTop;
		}// else : 업 스크롤인 상태
		
});// scroll event

</script>

<%@include file="../include/footer.jsp" %>

'웹 개발(OLD) > Spring Framework(OLD)' 카테고리의 다른 글

스프링 애노테이션 종류 (0)	2016.06.28
Spring 게시글 CRUD (0)	2016.06.27
jstl 날짜 format (0)	2016.06.24
jstl c:forEach 사용 (0)	2016.06.24
Spring Form데이터 컨트롤러에서 처리 (1)	2016.06.24

우공공

Spring 페이지 무한스크롤

'웹 개발(OLD) > Spring Framework(OLD)' 카테고리의 다른 글

티스토리툴바

Spring 페이지 무한스크롤

'웹 개발(OLD) > Spring Framework(OLD)' 카테고리의 다른 글

'웹 개발(OLD)/Spring Framework(OLD)' Related Articles

티스토리툴바