210204

  리액트에서 테이블의 내용을 엑셀 파일로 다운로드 할 수 있는 방법들을 여러 가지 찾아봤다. 어제 시도했던 react-html-table-to-excel은 현재 만들어진 테이블이 html이 아니기 때문에 포기. json-to-excel, sheetJS 등 여러 가지를 찾아보다 보니 지금 테이블에 뿌려지는 데이터 타입부터 알아야 할 거 같았다. async/await을 이용하고 있었기 때문에 request하고 받아오는 형태는 promise 객체였다. 이제 여기서 어떻게 데이터만을 뽑아낼 것인지가 다음 문제였다. 찾아본 대부분의 lib들이 array나 json 형태였기 때문에 promise에서 data만 array형태로 가져오고 싶었다. 이 부분도 여기저기 보면서 삽질하다가 간단하게 response.data로 해결을 했다. 이렇게 array 형식으로 데이터를 받고 나서 이제 이 데이터를 이용해서 엑셀 파일로 만들기만 하면 된다. 최종적으로 선정한 lib는 sheetJS였는데 간편하게 쓸 수 있는 것 같았고 또 별점도 높았다..ㅎㅎ 예시 사이트들을 참고해서 엑셀로 파일을 내려 받는 부분을 빠르게 구현했다. 엑셀파일로 데이터를 전부 받아오는 것까지는 성공을 했으나 다음 문제가 생겼다.

  지금은 protable에서 column을 각각 렌더링할 때 데이터를 가공해서 테이블에 출력하는 방식을 썼는데, 나는 결국 이 테이블에 있는 데이터를 가져 오고 싶었던 것인데 호출할 때는 디비의 정보를 호출하니까 데이터의 내용이 달라서 문제가 생겼다. 이를 수정하기 위해서는 두 가지 방법을 생각했는데, 첫째는 table 데이터를 가져오는 기능을 사용하여 table을 여러 번 호출해서 append 해 주는 방식을 생각했고, 두 번째로는 디비의 값을 불러와서 데이터들을 엑셀파일로 넘기기 전에 다 수정해 주는 방법을 생각했다. 그런데 두 번째는 너무 코드가 더러워질 것 같은데.. 어떤 방식을 선택해야 깔끔하고 간단하게 할 수 있을까?