210205

  어제 고민하던 테이블 데이터를 부르는 방법에 대해서는 두 번째 방법이었던 한 번에 호출해서 값을 변경 해 주는 방법을 선택하기로 했다. 여러 번 호출해서 계속 append 하는 것보다는 깔끔할 거 같기 때문에 선택했다. 그래서 먼저 데이터를 data 변수에 query해서 받아 오고, array를 수정하려고 했는데, 이게 또 필요한 칼럼은 빼고 새로 만들어서 넣고 하면 코드가 너무 지저분해질 거 같아서 새로운 array를 만들기로 했다. 처음에는 각 column별로 array를 만들어서 값을 추가해 줘야 된다고 생각해서 또 잔뜩 array를 만들었더니 너무 보기가 안 좋아서 다시 생각하기로 했다.

  밥 먹다가 문득 행별로 push 하면 되겠다는 생각이 떠올랐다. 어차피 data를 순회하니까 각 순회 때마다 array를 만들고 그 array를 new_data로 push 하는 방법을 사용하면 될 것이다. 순회 할 때 값들은 column render시에 사용했던 코드를 그대로 사용하고 그 값들로 한 행을 새로 만들어서 new_data에 push 해 주었다. 다 마무리가 되었다고 생각했는데 엑셀 파일의 첫 번째 행이 자체적으로 생성되었다는 것을 확인 할 수 있었다. sheetJS는 data의 제일 첫 번째 행을 key로 설정한다고 봤는데 왜 자동적으로 key를 생성하는지는 잘 모르겠다.. 그래서 hidden을 사용해 보려 했지만 hidden하면 행이 2부터 시작되게 된다.. 그러면 remove같은 함수로 어떻게 없앨 수 없나..? remove를 써서 행을 없애고 나면 range를 또 변경하는 작업을 해야 할 거 같아서 코드가 복잡해질 것 같았다. 그래서 그냥 new_data를 column명으로 초기화하지 말고 자동으로 생성된 행의 값들을 다 columna명으로 바꾸기로 했다. 이는 forEach를 써서 간단하게 할 수 있었다. 그런데 또 이 부분이 데이터가 없을 때 다운로드를 클릭하게 되면 바꿀 값이 없어서 에러가 나서 이 부분은 if data.length>0 일 때로 조건을 걸어주었다. 이렇게 엑셀 다운로드 기능이 완료 되면서 또 한 페이지 구현을 완료했다.

  아, ant-design의 datepicker 부분은 configprovider가 작용하지 않아서 개별적으로 locale 처리를 해서 한국어로 바꾸어 주었다. 그리고 loading 부분도 추가해서 엑셀을 다운로드 받는 동안 다른 작업들은 못 하도록 해 주었다.

  이번 주는 이렇게 깔끔하게 일주일이 마무리 되었다!!