Vue.js infinite Scroll 간단예제

웹을 올해 들어 처음 학습하는데 Spring,Js,Vue 해볼건 많고, 만들어볼것도 많다. 그 중 가장 골치아팠던 내용...(알고나면 정말 어렵지 않으나 JS나 Jquery에 대해 이해도가 없다면 아예 알아들을수가 없는 내용 뿐이었다) 개발환경은 Spring Legacy,ES6 JS,Vue 최신버전,DB와의 통신은 Mybatis를 채택하고 DB는 Oracle을 썼다. Vue에서 제공하는 Vue-infinite-Handler라는 라이브러리도 있지만 맘에 들지않아서 여기저기 검색해서 직접 짜집기해버림..

const vue = new Vue({ -- Vue 객체 선언
  el: '#app',
  data: {
	list : [],
	process: true,
	rowMin: 0,
	rowMax: 5,		
  },
  mounted () { -- app이라는 div element가 Load될때 실행되는 메소드

	    const listElm = document.querySelector('#infinite-list');
	    listElm.addEventListener('scroll', e => { -- infinite-list라는 element에 Scroll evnet등록
	      if(listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
	    	  this.fetchData();
	      }
	    });
	    this.fetchData();
  },
  methods: {
    async fetchData() {
	if(this.process) {
    try { 
		const response = await axios.get('http://localhost:8080/search',
    			{
    				params:{
    					rowMin:this.rowMin,
    					rowMax:this.rowMax
    				}
    			});
    	if(response.data.length == 0) -- Data를 모두 가져온 후 요청을 막기위한 flag
    		{
    			this.process = false;
    		} 
    	setTimeout(e => {
    	if(this.process)
    		{
	    		for(var i = 0;i<response.data.length;i++)
	    		{
	    			this.list.push(response.data[i]);
	    		}
		    	
		    	this.rowMin += response.data.length;
		    	this.rowMax += response.data.length;
    		}
    	},500);
    	console.log(response);
    	
    	
    } catch (error) {
    	console.error(error);
    }
}     
    }
  }

});

Grid 프레임웤을 사용하지 않은 채로 Vue의 특성을 최대한 살려 만든다면 대략 이정도 모양새가 되었다.. Vue라는 녀석은 Data의 변화를 감지하면 즉각 반응하여 실시간으로 변화된 Data에 맞춰 문서를 렌더링 하는 특성이 있기때문.. 그래서 위의 코드중 계속 메소드를 호출해서 list에 요소를 집어넣기만 해도 Vue 객체가 알아서 업데이트된 만큼 다시 자동으로 렌더링을 해준다.