[프로젝트 1] 1차 메뉴 추가 작업 - 목록 페이지의 구현

최근 대전으로 파견을 나와서 배우지 않았던 웹 개발 프로젝트에 투입이 되었다.

전반적으로 프론트와 백엔드를 아우르는 부분인데, 

아직은 신입이라서 그런지 전체적인 사이트 개발보다는

내부 웹사이트의 일부분을 담당하여 개발하는 업무를 맡고 있다.

 

우선 어제 어려움을 겪었던 테이블 페이지네이션 에대해서

배운 부분을 간단하게 정리해야겠다.

 

우선 아래와 같이 DB에서 불러온 부분을 페이지를 나누어서 나타내는 것을 자바 스크립트를 

통해 구현해야 했었다.

 

여러 사이트와 미리 만들어져 있는 곳을 참고하여 코드를 짰었는데,

페이지는 분할이 되지만, 테이블은 전체가 나타나는 현상이 발생하여

꽤 고생을 했었는데...

 

전체적으로 페이지 네이션을 구현하는 코드 자체는 꽤 간단하고 심플했다(생각보다,,,)

우와 같이 구현하여, 페이지네이션이 필요한 곳에 넣어주고 

데이터를 불러오는 라이브러리인 ajax 코드에 기입해주고 조금만 코딩을 해주면

금방 불러올 수 있었던 것이다.

 

 

 

알고보니 API 로 만들었던 파일을 잘못 작성해서..

자바스크립트에서 데이터를 페이지네이션하지 못하고 있었던 것이었다.

여기서는 API 파일로 만들었지만 이 API 파일이 하는 역할은 

DAO(Data Access Object) 가 하는일이다. DB 를 사용하여 데이터를 조회하거나 조작하는 기능을 담당한

파일이었는데, 위 파일을 잘못작성하여 페이지 네이션이 작동하지 않고 있었던 것이었다.

 

이번에 몇시간을 문제를 찾는데 소비했고 원인을 알고났을 때는 허무하기도 했었지만,

그래도 DAO, Controller 등 데이터를 불러오는데 관여하는 모든 곳 중

한곳이라도 잘못되면 원하는 결과가 나오지 않는 다는 사실을 다시금 각인시키는 계기가 되었다.

 

한곳만 해결하는 것도 중요하지만, 전체적인 면을 볼줄도 알아야 겠다.

 

참고 링크

https://engkimbs.tistory.com/692

[Spring] 스프링 서비스 & DAO 객체 구현(Spring Service & DAO Implementation)

https://opentutorials.org/course/1014/5472

페이지네이션 - 생활코딩

https://freehoon.tistory.com/112

Spring 블로그 만들기 - 9. 페이징(pagination)