페이징 구현 방식에 대한 고민

 

현재 구현 중인 프로젝트는 근태관리 프로그램이다.

나는 직원정보관리 및 휴가관리 파트를 맡았는데, 데이터 양이 늘어나니 별 생각 없이 일반적인 방식으로 페이징을 구현했다.

그리고 팀원들과 페이징 방식을 공유하기 위해,

기존에는 페이징을 처리하는 VO없이 view, controller, service까지 코드를 분산하여 페이징을 구현했다면

이제는 공동으로 사용할 수 있도록 페이징 처리를 위한 VO를 만드는 중이었다.

 

그런데 할수록 의문이 드는 게, 나는 ajax를 사용하여 실시간 필터링 검색을 구현할 계획인데,

1) 페이징 처리 이후의 자료들에 필터링 작업을 할 것인지

2) 필터링을 먼저 처리하고 검색 결과를 페이징 할 것인지 

순서도 고민되고 과연 두 방식 중 하나라도 적합한가 싶었다.

 

 

1) 페이징 처리 후 필터링 검색

   → 페이징 이후 한 페이지에 보여지는 자료는 제한되어있는데, 이후 필터링은 큰 효과X

2) 필터링 검색 직후 페이징

    → 키보드 입력할 때마다 자료를 새롭게 가져오는 이벤트가 자바스크립트에 의해 작동하고 있는데, 그때그때 페이징 처리 또한 동시에 일어난다면 너무 정신없지 않을까? 페이지번호가 자모음 하나하나 입력될때마다 1이 되었다가.. 늘어났다가.. 이상할 것 같았다. 또 입력된 값을 다른 페이지로 이동할 때 여전히 input태그에 유지시키는 것도 귀찮고..

 

그래서 실제로 ERP 시스템에서는 어떤 식으로 자료를 보여주고 있을까 좀 찾아봤다.

 

보니까 전혀 다른 방식의 페이징을 사용하고 있었다.

페이지 번호는 따로 없고, 스크롤을 내릴 때마다 자료를 추가해서 가져오는 식이었다.

즉 눈에 띄는 페이징은 없고, 스크롤로 데이터를 리스트형으로 보여주되, 실시간 필터링 검색 기능은 사용 가능한 상황

 

처음에는 페이징 처리 없이 데이터를 한번에 모두 가지고 와서 뿌리는 건가 싶었는데.. 그러면 데이터가 1000개 이상으로 늘어날 때 문제가 되지 않을까 싶었다.

 

그런데 좀 더 알아보니 스크롤을 내릴 때마다 이를 감지했다가 ajax로 데이터를 가져와 추가하는 식이었다.

지금의 프로젝트가 일반적인 게시판이 아닌 ERP 시스템이라는 점에서 여러 개의 컬럼에 동시 필터링 검색을 포기할 수 없었고, 그렇다면 자료는 페이지 이동 없이 한번에 보여지는 게 바람직하다는 판단 하에 기존의 페이징 방식을 폐기하고 안해본 방식으로 새롭게 시도해야 할 것 같다..

 

 

 

근태관리 프로그램 상세 페이지에 따른 페이징 flowchart

 

관리자 모드의 상세페이지들은 비교적 더 많은 데이터를 가지다보니, 검색 기능을 구현해서 일종의 필터링을 가능하게 하는 것이 필수다. 페이징 자체보다는 데이터를 끊김없이 보되 정렬이나 필터링을 통해 원하는 데이터를 빠르게 추출해 볼 수 있게 하는 것이 중요하다. 따라서 ajax를 통해 다중 검색 기능이 구현되어야 한다. 이에 맞는 페이징 처리 방식은 무한스크롤이 될 것이다.

 

반면 직원 모드의 상세페이지(근태기록리스트, 휴가요청리스트, 정정요청리스트)들은 본인의 데이터만 열람 가능하다보니 데이터가 수 십 페이지에 이를만큼 방대하지 않기 때문에, 일반적인 페이징 방식을 채택하여 처리하기로 한다.

 

 

 

 

 

참고한 글

무한스크롤링

페이징2

 

무한스크롤 구현을 위해 공부한 글

https://aljjabaegi.tistory.com/191

자바스크립트 스크롤 내려서 추가 조회 하는 방법, 스크롤 이벤트

https://gimmesome.tistory.com/177?category=1194271

Spring MVC 로 무한 스크롤, 검색 구현하기

https://yulfsong.tistory.com/76

Ajax data를 Controller에서 받는 두 가지 방법 : Vo / Map

https://do-dam.tistory.com/94

[ JS ] 무한 스크롤 만들기 ( div 태그 )

https://velopert.com/1890

https://sir.kr/qa/212594

 

 

 

 

---

자바스크립트 무한 스크롤 구현 위해 본 동영상 내용 정리

유노코딩이란 분의 무한스크롤을 구현하는 방식으로 동영상이 10분 이내로 짧아 전체적인 아이디어를 얻는데 많은 도움을 받았다.

 

window 브라우저 객체

documnet 문서객체

window.innerHeight : 브라우저에서 실제로 표시되고 있는 영역의 높이, 즉 사용자가 보고 있는 영역의 높이

window.scrollY : 스크롤이 세로로 얼마나 이동했는지를 px 단위로 나타냄. 0부터 시작해서 스크롤을 내릴수록 증가

document.body.offsetHeight : 요소의 실제 높이 = 보이는 영역 + 가려진 영역 (즉 실제 컨텐츠에 지정된 영역의 높이)

 

표시되는 영역 + 스크롤 값이 컨텐츠 전체 높이보다 크면 더이상 내려갈 곳이 없다.

즉 스크롤을 더이상 내릴 곳이 없을 때 새로운 요소를 추가한다.