검색을 해보면 알겠지만 DataTables를 사용할 때 Spring Boot의 Controller를 어떻게 짜야하는지 나와있는 곳이 없다.
그나마 있는 것들도 내 프로젝트에 제대로 적용이 안 됐다.
하루종일 스트레스를 받으며 삽질을 하다가 겨우 성공해서 해당 코드를 올린다.
1. View 단
hbody는 필요하지 않다.
2. JS 단
DataTables는 기본적으로 모든 데이터를 한 번에 통째로 들고 와 처리한다.
이러면 페이지 로딩이 버벅거릴 수 있으므로 serverSide와 processing 파라미터를 true로 설정한다.
위 두 파라미터를 설정하면 서버에 추가 작업이 필요하지만, 필요한 부분의 데이터만 가져올 수 있어 성능 향상에 도움이 된다.
destory 파라미터는 해당 테이블을 제거하고 다시 생성하기 위해 추가했다.
계속 reinitialize를 할 수 없다는 에러가 나와서 그냥 기존 테이블은 버리도록 했다.
ajax 파라미터는 로딩할 데이터를 서버에 비동기로 요청할 때 사용한다.
JQuery의 ajax와 매우 유사하다. type은 'post'로, url은 컨트롤러 맵핑에 맞게 입력해준다.
다른 예제를 찾다보면 data나 dataSrc라는 파라미터를 사용하는데, data는 서버에 전송할 데이터(검색에 필요한 조건 등)를, dataSrc는 서버에서 반환한 데이터를 후처리할 때 사용한다.
둘 다 필요 없으므로 설정하지 않았다.
3. Spring Boot Controller 단
가장 시간이 오래 걸린 부분이 맵핑 메소드에서 도대체 무슨 데이터를 반환해야 하는지였다.
모든 예제가 메소드 인자도 다르고, 반환 값도 다르다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ...
ajax 404 에러, 서버 내부 에러 등 여러 장애를 지나 결국 방법을 찾았다.
먼저, @PostMapping으로 라우팅을 잡아준다.
그리고 반환 값은 기존 jQuery의 ajax post 요청을 처리할 때와 똑같이 해줬다.
메소드 인자는 req, res 순으로 정했는데, 다른 예제를 보면 (HttpServlet* 클래스는 아니지만) 두 개의 순서가 바뀌어 있는 경우도 많았다.
내부에서 알아서 처리하는 건지 잘 모르겠다.
이 부분은 검색이 필요하다.
req에는 datatables가 보낸 draw, start, length 파라미터가 들어있다.
draw는 Cross Site Scripting 공격을 방지하기 위한 파라미터로, req에 담긴 값을 int로 변환해 그대로 반환해주면 된다.
-----------------------------
-> response, draw = 1 : OK
-> response, draw = 2 : OK
-> response, draw = 1 : ERROR
-----------------------------
위와 같이 draw가 순차적으로 진행되지 않고 다른 값이 들어올 경우(이 경우가 Cross Site Scripting 공격)를 처리한다.
draw의 값은 datatables 내부에서 자동으로 처리하므로 클라이언트나 서버에서 값을 건드리지 않아도 된다.
start와 length는 테이블 페이징에 필요한 파라미터다.
start번 째 데이터부터 length개의 데이터를 요청한다는 의미다.
이 예제에서는 값을 상수로 반환하지만, 나중에 실제 DBMS에 접근할 경우 해당 파라미터를 이용해 필요한 값만 뽑아 반환하면 DataTables가 알아서 표시해준다.
반환 데이터를 json string 타입으로 반환할 예정이므로
res.setContentType("application/json");이렇게 타입을 설정해준다.
이후에는 반환할 전체 json string을 구축하는 과정이다.
마지막으로 해당 값을 반환하면 끝이다.
return ResponseEntity.ok(sb.toString());
WRITTEN BY
- pf1999
프로그래밍 도중 삽질하다가 해결한 내용 공유용 블로그
