본문으로 바로가기

얼마 전 새로운 부서로 오면서 이 곳에서 사용중이던 시스템의 UI개선 프로젝트를 담당하게 되었다.

기존 소스를 뜯어 보던 중 데이터 그리드를 그리는 부분에서 수많은 하드 코딩이 난무하는 것을 발견하였고, 그리드 디자인 자체도 마음에 들지 않았다.

이 시스템의 그리드를 datatables로 뜯어 고치려고 일을 벌려놨는데, 막상 손을 대다 보니 생각보다 쉬운 일은 아니었다. 무엇보다 어떤 에러가 발생했을 때, 분명 예전에도 봤던 것이고 해결한 경험이 있었는데 또 같은 부분에서 시간을 낭비하고 있는 것이 가장 힘들었다. 

개발을 하다 에러가 발생하고 해결한 과정을 블로그로 정리하면 다음에 또 이런 일이 있을 때 도움이 될듯 싶다.


이번에 쓸데없이 한시간 넘게 낭비한 부분이 datatables에서 그리드를 그릴 때 Cannot read property 'length' of undefined를 개발자도구 콘솔에 찍으며 스크립트 에러가 발생하는 부분이었다.


구글링해서 원인을 찾아본 결과 원인은 분명했다.


datatables에서 화면에 그려주던 hidden값으로 가지고 있던간에 지니고 있고자 하는 컬럼을 아래처럼 선언했을 것이다.

1
2
3
4
5
6
7
8
9
columns : [                    //target
    {data: "userId"},         //0
    {data: "userName"},        //1
    {data: "userType"},        //2
    {data: "email"},         //3
    {data: "desc"},            //4
    {data: "dept"},            //5
    {data: "roleNm"}         //6
    ]
cs

이 때 이렇게 내가 가져오겠다고 했던 항목을 서버에서 보내준 response에서 찾을 수 없으면 해당 에러가 발생한다.

1. 우선 서버단 소스나 클라이언트단의 소스에 오타가 있는지를 체크한다.

2. 데이터를 올바르게 보내주고 있는지 확인한다. 크롬이나 IE의 개발자도구를 활용하면 매우 편리하다.


크롬 개발자도구의 Network 탭에서 서버와 통신한 요청 목록 중 datatables에서 ajax로 서버에 호출한 것을 찾는다. 그러면 우측에서 Response 탭을 클릭하면 해당 요청에서 받은 값들을 확인할 수 있다.


json스트링으로 되어 있는데, 각종 json view를 보기 좋게 보여주는 툴을 활용하면 쉽게 확인할 수 있다.

나는 크롬 앱인 JSON Editor Online을 사용한다.


이렇게 확인해 봤는데도 모든 값을 오타 없이 잘 가져오고 있었다. 이부분에서 정말 오래 헤맸는데, 결론은 list를 담는 파라미터 명칭 자체의 문제였다. 분명 예전에도 똑같은 실수로 시간을 낭비했는데 말이다.


datatables의 그리드를 구성하게 될 데이터가 담겨있는 리스트는 반드시 "data" 라는 이름으로 전달받아야한다.

(v1.10 기준이다. 혹시 다른 버전에서는 달라질 수 있으니 안되면 datatables 사이트의 api를 확인해 보는 것이 좋다.)


내가 java spring 서버에서 데이터를 조회해 model에 담을 때 attributeName을 아래처럼 코딩한 것이다.

1
2
3
4
5
ModelAndView mv = new ModelAndView("jsonView");
UserList resultList = userService.selectUserList(UserVO);
mv.addObject("list", resultList);
        
return mv;
cs

3번라인에서 attributeName을 list가 아니고 data로 해서 전달해 줘야 했다.

해당 라인의 소스를 mv.addObject("data", resultList); 로 변경해서 실행하니 잘 작동했다.


알고나면 정말 간단하지만 사실 새롭게 짜야 할 경우에는 매번 놓치기 쉬운 부분이다.



 Other Contents 

댓글을 달아 주세요

  1. 개발자 2017.07.05 16:17 신고

    저도 같은 문제에 직면했는데 덕분에 손쉽게 해결했습니다. 감사합니다.

  2. 남쿤 2018.01.22 17:40 신고

    으앜.... 같은 문제 이글로 해결했습니다 ㅋㅋ 아 체증이 내려갑니다

  3. 전공자 2018.10.20 15:56 신고

    와.. 이 문제로 하루정도 고민했는데 바로 해결됐습니다! 감사합니다!

티스토리 툴바