CSV파일로 export, import

📌 설정페이지의 CSV탭에서 거래내역을 CSV파일로 export, import 하기

구성

CSVSetting 컴포넌트는 아래와 같이 구성되어 있다.

1. 거래내역 CSV File로 다운받기 (export)
   
2. 파일 첨부하기 (CSV 파일 첨부)
   
3. 거래내역 CSV File로 추가하기 (import)
   거래내역 CSV의 형식은 export한 csv파일을 확인하면 알 수 있다.

필수적인 Field 값은 다음과 같으며 그 외 선택적인 값은 없을 경우 default 값으로 설정

content	type	cost	date
거래내역 이름	거래내역 타입	금액	날짜

구현

1️⃣ Export

1. 클라이언트가 다운받기 버튼 클릭 시 onClick 이벤트로 downloadCSV 함수를 실행하여 서버에 GET 요청을 보낸다.
   
2. 서버에서 요청을 받으면 DB의 트랜잭션 데이터를 가져온 후 json2csvParser 라이브러리를 이용해 지정된 필드값으로 csv데이터를 만들어 FE로 보내준다.
   
3. 반환된 csv데이터를 exportToCSV 함수에서 window.Blob을 활용해 다운로드 받을 수 있게 해준다.
   여기서 추가적으로 Blob과 File Download 동작에 대한 이해가 필요하다.

2️⃣ Import

1. client가 import 하고 싶은 csv파일을 첨부하면 CSVReader 태그의 onFileLoaded가 이를 감지해 fileChangeHandler 함수를 실행해 setFile 해준다.
   여기서 CSVReader는 라이브러리로 csv파일을 배열형태로 바꿔주는 역할을 해준다.

2. 추가하기 버튼을 누르면 첨부된 csv 파일을 json형태로 서버에 보내준다.

3. 서버에서 request.body에 담긴 데이터를 꺼내면 string타입으로 바꿔져있기 때문에 JSON.parse() 함수로 원래의 배열형태로 바꿔준다. 그 후 mongoDB에 들어갈 수 있는 형태의 객체로 가공해준다. 여기서 형식에 맞지 않는 key값이 들어오거나 필요한 필드값이 비어있다면 error를 발생시키고 종료된다. 가공이 잘 되었다면 mongoDB에 거래내역들을 업데이트 시켜준다.

Issue

1. 처음엔 DB데이터를 csv로 바꿔주는 부분을 직접 구현할까 했었다. 하지만 생각보다 쉽지 않은 부분이었으며 좋은 오픈소스가 있어서 활용하였다.
   

2. 원래는 csv파일을 태그로 첨부하여 백엔드에 보내서 parse 및 가공하고 싶었으나 저런식으로 첨부하여 서버로 보낼 시 파일 내부를 확인할 수 없는 문제가 있었다. 그래서 우선 FE에서 csv파일을 배열 형태로 바꾼후 json형태로 서버에 보내주었다.

3. csv파일을 json파일로 바꿔주는 것 또한 비슷한 이유로 오픈소스를 활용하였다.
   

4. template.csv 를 만들까 했었으나 트랜잭션이 아무것도 없을 때 받은 .csv 파일이 template과 마찬가지이므로 추가하지 않았다.