ValueError, Out of range float values are not JSON compliant

파이썬의 FastAPI, Flask 같은 웹 어플리케이션을 사용하여 간단하지만 체계적으로 웹 서버 구축이 가능하다. 프론트엔드 관련 지식이 부족해도, 기본 HTML 언어만 알아도 Jinja2Template을 통해 프론트를 만들어 볼 수 있다.

Jinja2Template을 사용하면 웹 APP의 RestAPI(CRUD)를 많이 신경 쓸 필요가 없지만, 페이지가 전환할 때마다 Flow data의 양이 많아지면 전환 속도가 굉장히 느리고, 페이지가 전환되는지도 명확히 알 수 없다는 단점이 있다. 이를 해결하기 위해 javascript의 Ajax가 필요하다.

 

 

javascript의 Ajax의 사용법은 굉장히 간단하고 10줄 이내로 RestAPI(CRUD) 틀을 만들 수 있다. 또한 페이지 전환 시, 전환될 페이지를 미리 보여주고, 해당 페이지에서 데이터의 로딩을 기다릴 수 있다. 추가로 setInterval() 함수를 사용하면 인터벌 시간을 설정하여 RestAPI(CRUD) 통신을 통해 실시간 데이터 업데이트가 가능하다.

필자는 순수 Jinja2Template으로 구축한 데이터 플랫폼에서 몇몇 기능을 javascript의 Ajax로 기능을 변경했는데, 기존에는 문제가 되지 않았던 부분에서 문제가 발생하여 이 문제에 대한 원인과 해결 방법을 포스팅하려고 한다.

 

발생한 문제

 

ValueError: Out of range float values are not JSON compliant

 

 

파이썬을 사용하여 데이터 플랫폼을 구축할 때, 많은 사람들이 데이터 핸들링 라이브러리로 Pandas를 사용한다. 이 때, Pandas Dataframe의 데이터들을 2차원 리스트로 바꾸는 경우도 종종 있는데, Jinja2Template을 사용하여 데이터를 넘길 때는 문제가 되지 않는다.

그러나 Javascript의 Ajax를 통해 데이터를 넘길 때는 상기의 오류가 발생하며 데이터를 받지 못하고 멈추는 현상이 발생한다. 이 문제는 2차원 리스트로 변환한 데이터 중, nan 값이 존재하기 때문에 발생한다. 왜 이게 문제가 되는지 확실치는 않지만, Javascript에서는 nan 이라는 것이 정의되지 않아 핸들링되지 않는가 싶다.

 

해결 방법

 

 

간단하게 데이터를 넘기기 전에 nan 처리하면 된다. 예컨데, financial_anal_df 라는 변수에 Pandas Dataframe 타입의 데이터를 할당했다면, 하단처럼 처리하여 문제를 해결할 수 있다. 만약 본인이 해당 데이터에 대한 지식이 부족하다면, .fillna(method='[ffill | bfill]')을 사용할 수 있다.

# NaN에 원하는 값 입력
financial_anal_df = financial_anal_df.fillna('NaN')